I think everything agrees with me here, but IE is the most incompatible browser out there.
I deal with ie's incompatibility using different particular css files for each version, to display it correctly?
Is there a better way?
I think everything agrees with me here, but IE is the most incompatible browser out there.
I deal with ie's incompatibility using different particular css files for each version, to display it correctly?
Is there a better way?
Different CSS files, each with the IF ie filter on them is probably the cleanest way to separate out the separate IE CSS.
The advantage of using different CSS files with <!--[if IE]> filters is that you can write 100% compliant CSS, whereas hacks will make your CSS invalid.
On the other hand, the advantage of using CSS hacks to have only one CSS file is download efficiency.
Still, I prefer filters. Using the paradigm below helps me keep my browser specific CSS organized, and leveraging the "cascade" along with equivalent "specificity" is the easiest way that I have found to deal with browser inconsistencies. Don't forget you can also include javascript specific to IE in these filters to juice up your IE experience.
<link id="stylesheet1" rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!--[if IE]>
<link id="stylesheet2" rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 6]>
<link id="stylesheet3" rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
<![endif]-->
The other great thing about this filter paradigm is that you isolate your code written for aging browsers that will one day become obsolete. For example, does anyone care about IE 5 anymore? Those files aren't slowing anything down, because they are only downloaded on an as-needed basis, and they are less needed over time. I'd rather have it this way versus having my obsolete code intertwined with my standards compliant code.
However, what about browsers other than IE such as Safari or Firefox? Well, try to write CSS code that works the same accross Chrome/Safari/Firefox and I rarely need a specific hack for one of them, but for some stuff I have used browser specific CSS extensions.
Another option is javascript browser selectors:
http://rafael.adm.br/css_browser_selector/
Lastly, I briefly looked at S.O. and they don't seem to be using IE filters. They have one CSS file, which they have cleverly hosted on a cookieless domain for performance: