CSS scrollbarfix IE

2007-12-01

This article concerns the unnecessary scrollbar IE generates to compensate for the loss of space a to be created vertical scrollbar will take up (and vice versa).IE will display a disabled vertical scrollbar by default, even when one is not justified. This is easily fixed by adding html { overflow: auto; } to your CSS. A common trick. The scrollbar will disappear and only reappear when required.The problem which can occur when any element has the width: 100% specification is this: when a vertical scrollbar is demanded, the scrollbar takes up space. IE thinks one of the elements, with 100% width, is no longer completely shown and will force a horizontal scrollbar to compensate for the vertical bar.When you search for a fix for this problem, the first fix I found had to do with removing the DTD part from the doctype definition. That's a bad idea and I refused to accept it. Then I encountered this article and noticed I had indeed forgotten to add the XML tag.In short, it's very simple to solve the problem above by adding an XML definition to your code (make sure you echo the tag in php, because php will think You can look at the source of this page for a production example.--Oh... When looking at the table on this page it suddenly becomes clear why... Apparently IE6 can't handle the Source)Standardmode will echo "CSS1Compat", anything else is quirksmode (Hooray!). It's not easy getting the rendering mode in IE. At least Opera and Firefox show it in their page properties.If I'm not mistaken you can leave out the