CSS scrollbarfix IE

2007-12-01 03:33:18

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
Example (the < of the tag MUST be the first character of the document or else some browsers will show you malformed XML errors!) :

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
If you want to know which rendering mode your browser currently uses type the next line into your address bar and press enter (works in IE, Opera and FF with javascript on)


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
header("Content-Type: text/html; charset='UTF-8'" );

And as Math points out, you can just add it to the html header...