I am trying to get the CSS3 border-radius to work on IE8. But for some reasons, it is not working: http://uiux.atwebpages.com/
I am using the border-radius.htc file.
Is there some other way to make border-radius work on IE8 without using the .htc file ?
It's not possible without using VML just with pure CSS in IE<9. The only other way is to use sliced images. I'd recommend, if those rounded corners are not really necessary, just omit them. It's not your fault, if people use outdated browsers.
However I can recommend you css3pie. Take a look at it.
edit:
your page has a 404 on css_reset.css
Are you sure, your resources have loaded all correctly?
you need to include behavior:url(border-radius.htc) in your css (with the correct url of course), but i couldn't find this in your css. Try it and see, if it works.
No, CSS3 border-radius isn't supported in IE8.
Please, refer to this chart for my info about compatibility:
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx
Is jQuery an option? If so then try this - http://jquery.malsup.com/corner/
if you do what's said on this page it should work properly. one more advice: clean up your css and define browser depending rules before you do general css rules.
css3 in ie
Related
Does anybody know if there is a plugin like HTML5 shiv for CSS3 that allows CSS3 to be rewritten and render properly in browser versions before IE9?
You can try CSS3PIE.
Did the job for me a while back.
CSS3Pie is awesome (and +1 to both the answers that suggested it), but it only covers a small number of CSS properties.
If you need other CSS features to work, then you may want to look at some of the following as well:
CSS Sandpaper
Selectivizr
Any one of several scripts listed here
CSS3 PIE is a good one.
a#logo {
_background:transparent;
_filter:progid:dXImageTransform.Microsoft.alphaImageLoader(src="/assets/images/header/logo.png", sizingMethod="crop");
_cursor:pointer;
}
It fixes an issue with IE rendering transparent PNGs by specifying a different Image Loader for IE.
It is definitely IE specific. Most of the time, though, you won't see this done in the CSS explicitly since most pages have multiple transparent PNGs on a page. Most developers use Javascript to fix this across all images on a page.
The most popular of these scripts is TwinHelix's IE PNG Fix.
It makes Internet Explorer use PNG Alpha transparency.
I also believe this is not according to the official css standard, so I would avoid when possible.
However, sadly, using pure standards is a utopia in cross-browser web development...
Filters like
img {filter:flipV;}
I'm guessing are pretty old, I just was asked by a colleague why they weren't working for him in FF. I assume they were an IE only thing that died out a while back?
Yes, it is IE-only. They didn't die-out, they were just a bad idea to begin with.
They were the only way to do some things in IE, for example PNG transparency in IE6...so they're still around. Web developers everywhere are hoping they die :)
Even in the latest jQuery UI files you can find it being used for Alpha transparency: http://dev.jqueryui.com/browser/trunk/themes/base/jquery.ui.theme.css
By no means are they gone...unfortunately. At this point, I'm hoping they don't stick something like this into IE9 and call it a "feature"...
You may find this article interesting. While filter is IE only, there is a Firefox equivalent (opacity) which is part of the CSS3 recommendation.
They are pretty old and work only in IE. Bad, don't use them unless you are targetting only IE (not good again). There are some things in CSS3 not supported by IE, you can sometimes use these filters to get around things.
For example, box shadow effect can be easily done with CSS3 but IE again does not support that, you can use these filters for IE and normal CSS3 for other browsers to create a cross-browser solution.
Any solution for reducing browser compatibility problem while writing css style.
These three are the main points you need to do yourself:
Write correct markup - make sure it validates
Make sure your markup is in standards mode
Write correct CSS - make sure it validates
In addition, you can do some of the following to reduce the amount of headache:
You can use a CSS framework, like Blueprint, 960.gs, YUI CSS library, etc.
For Internet Explorer -related issues, there is ie7.js and ie8.js
Know how HTML and CSS work
Test in all browsers you target
You may also want to use a CSS reset file to start on the common ground.
Well, as of now there is nothing like fixall() which will make all browsers compatible...however, you can reduce compatibility problems by using the correct doctype.
Read thisarticle on using doctypes. Also, validate your markup.
Edit: You can go to Browser shots to see screenshots of your web design in different browsers.
Discipline!
Validate your HTML. Use a correct DOCTYPE.
Use standards, hack the bugs.
Be descriptive, or use a reset stylesheet.
Simple -- test, test, test.
First thing, you should have at least these browsers on your computer: FireFox3.5B , InternetExplorer7 (+ optional Safari 3, Google Chrome 2 Beta and Opera).
Now for a more definite answer:
avoid css3 styling like "opacity" et cetera as CSS3 is not a standard yet. Instead use Javascript libraries like jQuery to apply those effects selectively
avoid png transparency like the plague... instead use dithered gif transparency (this is now somewhat old, as it now works on IE7+)
Test and test and test
I have been working on a webpage. It is the first I have actually tried to design using an image and then use proper CSS layout rather than tables.
http://www.roccocammisola.com/proj/brunel/bgimage.html
I have been having issues with the shadows on either side of the main content area. Of course these are only an issue in IE. As you can see the shadow has been cut down to about 10% of its actual height.
With my relative inexperience how do I look for relevant fixes to this issue.
Any help would be very much appreciated.
FireBug, the most crucial tool for debugging CSS, amongst other things.
get it here
IE Web Developer Toolbar
It's not as good as firebug in general, but it helps when you have an IE-specific problem.
In addition to Firebug, making sure your HTML is valid is an invaluable tool and can minimize CSS headaches. Sometimes your CSS may not work right because there are mistakes in the HTML. The different browsers have different ways of dealing with improperly written HTML which can sometimes make it seem like there's a cross-browser CSS issue. The validator can help you find mistakes in your markup.
http://validator.w3.org/
+1 for FireBug
In this particular case, I'd just suggest a new approach for your shadows. Currently, you have them as items. You typically want to use CSS background images for things like this.
.mainShadowRight {
*/ your other stuff */
url('images/mainShadowRight.gif');
}
Your .mainShadowRight CSS class specifies a min-height (which IE6 doesn't understand, and IE7 doesn't always 100% get correctly)
and as DLarsen pointed out, it appears you are missing the background-image: url(); bit.
Thanks for all your answers, seems to have done the trick.
I think I spazzed out with the upload as I should definitley have had the bg-image stuff there.
That IE web developer toolbar looks pretty good too as I have firebug and web developer bar for FF.
Another hot recommendation for debugging CSS - CSS Viewer.
It's a Firefox add-on that allows you to hover over elements in a web page and see their exact style. Often you figure out that the final style was not what you meant, possibly due to some inheritance of styles.