Internet Explorer versions 6 and below didn’t not parse the !important css modifier correctly - this allowed you to specify styles for browsers like Firefox and such, using the following syntax:
identifier {
background: #000 !important; /* Firefox */
background: #FF0000; /* IE */
}
The element’s background will be set to red because the red declaration is after the black declaration, and IE ignores !important identifiers - Firefox on the other hand observes the identifier correctly, and will use the higher priority black background.
This is (I mean was) a pretty cool solution that I have used to good affect on several websites. Unfortunately Internet Explorer 7 shipped with support for the identifier, but didn’t really fix much else in the way of CSS bugs. So we now have a browser that will correctly use the higher priority declarations, but these declarations still break layout. Sigh.
This took me a couple of minutes to figure out why my site was going insane, luckily the fix is pretty quick:
Remove the !important keywords from your CSS file, and then delete the IE related declarations.
identifier {
background: #000;
}
In your main template/HTML file, under your external css declaration, put the following:
<!--[if IE]>
<style type="text/css">
identifier {
background: #FF0000;
}
</style>
<![endif]-->
This uses IE’s conditional comments to apply the appropriate styles - other browsers treat it as a comment and ignore it.
p.fun {color:#990000;}
body[id=variable] p.fun {color:#fedaeb;}
This is another solution for getting one style in IE 5.x/6.x, and one that other browsers will get.
IE 5.x/6.x do not support “body[id=variable]“, so they will ignore rules on it. Thus, IE 5.x/6.x will get a color of “#990000″, and firefox (as an example) will get “#fedaeb”.
This is a great advantage to web designers because it means that you can use absolutely bleeding-edge techniques that you know will work on all other browsers, but you can override these rules (only for IE) so that IE doesn’t get a messed up display.
Firefox will see “body [id=variable] p {}” and override “p {}”, while IE will only see “p {}”.
The neat thing about this is that it won’t mess up IE7 because it will do the same thing as firefox/opera/etc, that is, override “p {}”.
The downside is, yeah, you still have to be careful with the limitations of IE7. If someone would find another parsing bug for IE7, one that can be exploited like the one you mentioned, that would be great.
Love the blog, keep up the good work.
Internet Explorer 8 is really good. This browser is very very stable and i have been using it for quite a while without blue screens or crashes.