Call to action: The demise of CSS hacks and broken pages
We’re starting to see the first round of sites and pages breaking due to the CSS fixes we have made. We would like to ask your help in cleaning up existing CSS hacks in your pages for IE7. It is has been our policy since IE6 that under quirks doctype we will not make any behavioral changes so that existing pages will continue to render unmodified, but under the strict doctype we want to change behavior to be as compliant as possible with the web standards. For IE7, we introduced new CSS functionality (see Chris’ blog post for the full list) and cleaned up our parser bugs. This leads now to several CSS hacks failing. If you are using IE7 (you are MSDN subscriber or received a copy at the PDC) you may notice major sites breaking due to the use of CSS hacks and the strict doctype.
Example how easy it is to fall into the CSS hack trap
I was very happy to hear that Slashdot has their page rewritten using clean HTML 4.01 with a full complement of CSS. I immediately opened up IE7 to see how it would look like. It looked very good, but I noticed an odd behavior with their search box being moved into the footer of their page. I opened up the IE dev toolbar started to take a look, and found:
html > body #footer .search { margin: 0; }
#footer .search
{
text-align: left;
position: absolute;
top: 0;
left: 1em;
margin: -1.6em 0 0 0;
padding: 0;
}
It is targeting the following HTML:
<div id="footer">
<div class="search">
<form method="get" action="http://slashdot.org/search.pl">
<fieldset>
<legend></legend>
<input type="text" name="query" value="" size="20">
<input type="submit" value="Search" class="button">
</fieldset>
</form>
</div>
</div>
As you can see the legend tag is empty. IE6 and IE7 reserve white space for the empty legend tag. The HTML 4.01 spec does not specify what should happen in this case. We just do it differently than Firefox and Opera, who do not reserve white space (since we were the first to implement this HTML 4 element back in the day there was no precedent to do it differently). The legend element is required according to the HTML validator, so Slashdot did the right thing to put an empty element in the page. The site authors wanted to work around the IE behavior by applying negative margins to IE only. Since we implemented the child selector (>) now for IE7 their CSS hack is failing. We contacted Slashdot and are trying to address this issue.
Call to action: Please check your pages
Here is a list of common CSS hacks to look out for (please also consider their variations):
We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments .
Here is a simple example how you would use it in the Slashdot scenario:
Using the existing style block:
#footer .search
{
text-align: left;
position: absolute;
top: 0;
left: 1em;
margin: 0;
padding: 0;
}
In a new style block underneath:
<!--[if IE]>
<style>
#footer .search
{
margin-top: -1.6em;
}
</style>
<![endif]-->
I would prefer a CSS solution too but currently there isn’t one in the CSS standard. Please help us spread the word so it is an easier decision for us in the future to make improvements to our standards implementation (even if it means breaking customers).
Thanks,
- Markus Mielke