CSS Hints for Internet Explorer 5
Pages: 1, 2, 3, 4

Margins below scrollbars

The second margin bug is clearly related to scrollbars. Unfortunately, it doesn't appear all the time, just most of the time. In about 10-20% of the cases, Explorer interprets the styles correctly, although a reload may change that.

Bug: Explorer incorrectly sees the space below a scrollbar as belonging to the canvas. Content of the page may spill below the vertical scrollbar, causing an unwanted horizontal scrollbar to appear.

Example:

body {
   margin: 0px;
   padding: 0px;
   font: 12px helvetica;
}

div.container {
   height: 150px;
   width: 100%;
   overflow: auto;
   -moz-box-sizing: border-box;
}

p {
   border: 1px solid #000000;
}

I assigned the container <DIV> a height of 150px, a width of 100%, and an overflow: auto to create scrollbars if necessary. The -moz-box-sizing is for evading box model problems in Mozilla.

Unless instructed otherwise, <P> tags always take 100% of the available width, so they stretch across the entire <DIV>. Since there are slightly too many <P>s for the box to contain, it gets a scrollbar. Now the <P>s ought to stretch from the left margin of the <DIV> to the left edge of the scrollbar.

In Mozilla, these styles have the desired effect:

In Explorer, however, this happens:

The <P>s stretch beyond the vertical scrollbar. Since part of the content of the page is now hidden by the vertical scrollbar, Explorer also creates a horizontal scrollbar.

Workaround: The basic solution is to add a padding-right of 16 pixels to the <DIV>:

div.container {
   height: 150px;
   width: 100%;
   overflow: auto;
   -moz-box-sizing: border-box;
   padding-right: 16px;
}

We need to hide this extra padding from the other browsers, though. Fortunately, the commented backslash hack allows us to restrict our definition of padding-right to just Explorer on the Mac:

div.container {
   height: 150px;
   width: 100%;
   overflow: auto;
   -moz-box-sizing: border-box;
   padding-right: 16px;
}

/* Commented backslash hack \*/

div.container {padding-right: 0px;}

/* End hack */

Now Explorer has a 16px padding-right while all other browsers have a 0px padding-right. The paragraphs stretch to the left edge of the scrollbar, not underneath it. The horizontal scrollbar for the <DIV> is no longer necessary and disappears.

The bad news is that this causes two new unwanted effects to appear:

• The entire page gets a horizontal scrollbar.
• The first paragraph is shorter than subsequent ones. In fact, this was already the case before we applied the padding-right. In the screenshot above, you can see that the first paragraph stretches the correct width: from left margin to scrollbar.

The scrollbar for the entire page is again caused by an extra margin of 15px. Adding the margin-right hack solves the problem:

div.container {
   height: 150px;
   width: 100%;
   overflow: auto;
   -moz-box-sizing: border-box;
   padding-right: 16px;
   margin-right: -15px;
}

And the results:

Unfortunately, you still might have problems with the first paragraph. The first block-level element is not affected by the margin bug. As the screenshots show, the first paragraph doesn't stretch below the horizontal scrollbar, and the padding-right causes an unwanted gap. But this (lack of a) problem isn't consistent. Most of the time, the first paragraph behaves as it should, but sometimes it doesn't.

There is a solution for Explorer 5.2 for Mac OS X, but it doesn't work quite as well on the OS 9 version. The trick is to give the first child of the <DIV> a margin-right of -16px:

div.container>:first-child {
   margin-right: -16px;
}

...and then once again overrule this style for any other browsers by using the commented backslash hack. So the complete CSS becomes:

div.container {
   height: 150px;
   width: 100%;
   overflow: auto;
   -moz-box-sizing: border-box;
   padding-right: 16px;
   margin-right: -15px;
}

div.container>:first-child {
   margin-right: -16px;
}

/* Commented backslash hack \*/

div.container {padding-right: 0px;}

div.container>:first-child {
   margin-right: 0px;
}

/* End hack */

This usually solves it:

Again, this whole series of bugs is somewhat flighty. Sometimes these CSS hacks simply won't work.

Reverse inheritance of margin-bottom

Bug: When placing a <P> inside a <DIV>, the <DIV> "reverse inherits" the margin-bottom of the paragraph. Result: a too large margin below the <DIV>.

Example:

div.container {
   height: 100px;
   width: 90%;
   border: 1px solid #000000;
   margin: 0px;
}

p {
   margin-top: 0px;
   font-size: 20px;
   border: 1px solid #000000;
}

These styles ought to look like this (as rendered in Mozilla). The first <P> outside the <DIV> is flush against the bottom border of the <DIV>.

In Explorer, however, the <DIV> reverse inherits the margin-bottom of the last <P> which causes an unwanted gap. The actual margin depends on the font size used in the <P>:

Workaround: Set the margin-bottom of the <P> to 0px.