Futureproofing and fixing for IE7 layout issues
In an earlier post, Conditional Comments are your Friends, I outlined the best way to future proof your website against the onset of IE7, by using a conditional comment to feed a separate stylesheet with your IE6 and less adjustments in it. This would keep the dreck away from the good browsers (assuming, of course, that IE7 is one of them) and allow IE6 and earlier to play nicely.
The problem is that IE7, though much better than its predecessors, is still not a fully compliant browser. The haslayout issues still exist to varying degrees, and some of the haslayout triggers react differently in IE7 than they do in earlier versions. But you can only feed in ONE special IE stylesheet through conditional comments, so . . . how do you feed IE7 what it needs and hide those fixes from both the good browsers and earlier versions of IE?
According to Dejan Kozina of css-discuss you feed all IEs from 7 on down ONE stylesheet, then call in others as needed through the IE stylesheet, like so:
`
href="common/standard.css" type="text/css" rel="stylesheet">type="text/css" rel="stylesheet">
type="text/css" rel="stylesheet">
`
… and when it works as requested in Firefox, IE6 and Opera and
validates (ie.css too) take a look at the thing with standalone
versions of IE5.5 and IE5.01 (in that order) and add some corrections,
importing more stylesheets at the end of the IE one if needed:
`
@media tty {
i{content:”\”;/*” “*/}}@m; @import ‘ie55.css’; /*”;}
}/* */
`
`
@media tty {
i{content:”\”;/*” “*/}}; @import ‘ie50.css’; {;}/*”;}
}/* */
`
The code section was quoted from a css-d discussion. There are, of course, other ways to use this, ie calling in a stylesheet from the end of the IE only stylesheet for each version of IE that needs it, including IE6. This is untested, but I thought it might be useful enough to post anyway, especially with the release imminent. YMMV.
Technorati Tags: IE7, Conditional Comments, CSS, Import multiple stylesheets
