Debugging Layout in IE
March 28th, 2007 by Leons PetrazickisFirefox has the Web Developer Toolbar, Opera has the “Debug with Outline” user mode and developer tools, but the browser that needs block outlining the most has long been limited to obscure bookmarklets.
A more robust tool is the Internet Explorer Developer Toolbar. Outlining elements is one of its useful features.
To fix things in IE6 without breaking them in other browsers, replace any rule such as:
/* Works in good browsers */
#content {
width:500px;
}
#content {
width:500px;
}
with:
/* Works in good browsers */
#content {
width:500px;
}
/* IE6 fix */
* html #content {
width:502px;
}
#content {
width:500px;
}
/* IE6 fix */
* html #content {
width:502px;
}
This is valid CSS and, since IE6 is the only browser that thinks the html element has an ancestor, the second rule will only cascade down in IE6.
A different approach is endorsed by the IE team, but I find it less elegant.
Posted in css |