UPDATE
Since the time of this writing I have learned some important things:
- With correct doctypes, IE6 almost always renders the same as FFX and IE7, except when it comes to PNGs.
- If you set your body’s font-size to 62.5%, you reset browsers to 10px.
Eric posted about this some time ago, but I really think this is one of the most unique methods I use in my coding process. I’ve yet to see this idea brought up by most sites I browse for CSS/XHTML solutions. The idea is that you can use pure XHTML in conjunction with conditional comments to create a CSS style sheet that is free of your usual hacks. The reason we found this out is because the people on the IE 7 dev team actually managed to bring their new browser into closer range for compliant style rendering. IE 7, for the most part, follows the box model pretty well, and ignores the usual string of hacks we use in our CSS.
Before we learned about conditional comments, we were using an underscore to rewrite any definitions that IE 6 needed to render our code correctly. The most common fix was usually to the width attribute. Add your padding back. Well, no more underscores. Here’s what you do:
When you create your body tag, write it as so:
OK, so what is this mess, you wonder. This is code that only Internet Explorer since v5.5 understands. Microsoft did a good thing by adding this functionality so that web developers like us can fix our coding problems without hacks. Essentially here’s what it says in order from top to bottom:
If Less Than IE 7 then read: If IE 7 then read: If NOT IE, then read:
Since the first two statements are commented out, all browsers except IE ignore the HTML inside the comments. The last statement is commented it out, as well, but the HTML: is not. This is actually a twist on down-level revealed comments. The tags supplied by MS in the link above would have you use
body{
font:normal 1em Arial, Helvetica, sans-serif; }
body.ie6, body.ie7{
font-size:0.9em;
}
Starting my stylesheets with this declaration almost always guarantees my fonts will be the same size on Firefox, IE6, and IE7.
And of course, if you need to fix a width problem due to improper box model:
.bigdiv{
width:140px;
padding:0 5px;
}
body.ie6 .bigdiv{
width:150px;
}
Using body.ie6 as the parent selector will cause .bigdiv’s new width to only be implemented by IE 6.
You may read Eric’s post and notice he didn’t differentiate between IE 6 and 7 in his comments. Since his post, I’ve come to find that sometimes IE 6 needs fixing, sometimes IE 7 needs fixing, and sometimes they both do. That’s why I’ve chosen to differentiate between them in my body sub classes.
