This is a test page for an Explorer 5 Mac bug.
From time to time, mysterious horizontal scrollbars crop up in Explorer 5 Mac even though they're not necessary. There are at least two bugs that cause these scrollbars to appear. I solved one bug and described the other one.
Note: Explorer on Mac behaves a bit like Netscape 4 when you resize a window: it doesn't refresh all styles (or it doesn't correctly recalculate them). When you resize the test popup, please reload the page afterwards to be sure the styles are interpreted correctly.
Philippe Wittenbergh has done excellent work on this bug. He
concludes that it only applies to direct children of the body tag,
not to nested absolute divs. His page is indispensable for a complete overview of this bug.
We take a page with an absolutely positioned element at the right of the viewport. The test element is styled as follows:
p.test {
position: absolute;
width: 300px;
top: 40px;
border: 1px solid #666666;
font: 18px verdana,arial,helvetica;
margin: 0;
right: 0px;
}
It should look like this (Mozilla):
The problem is that Explorer 5 on Mac adds a horizontal scrollbar, even though all content fits in the window.
As you see the test P is exactly at the prescribed position, but the browser seems to find some more content to the right of it. However, when we scroll to the right we see nothing but white background. Then why this scrollbar?
I played with the test P and eventually moved it slightly to the left to see if anything nice happened. And it did. When I used
right: 15px;
the scrollbar disappeared.
Exactly 15 pixels, no less? Yes. When I tried
right: 14px;
the scrollbar reappeared.
It doesn't take Sherlock Holmes to deduce that the test P has a secret right margin of 15 pixels, no more, no less. In fact, I tentatively assume that
IE5Mac gives each absolutely positioned element a secret margin of 15 pixels
So we have an extra margin of 15 pixels. What do we do about it? Well, remove it of course.
Since IE5Mac thinks margin-right: 0px means margin-right: 15px,
it stands to reason that to obtain a right margin of 0 pixels we have to do
right: 15px; margin-right: -15px;
And so it turned out:
Element positioned correctly, no scrollbars.
I wanted to be totally sure of my solution, so I devised a second test. I took a DIV that spans the entire window and wanted it shown without any scrollbars.
In my test case the DIV had these styles:
div.test {
position: absolute;
top: 0px;
left: 0px;
border: 4px solid #cc0000;
width: 100%;
height: 100%;
background-color: #cccccc;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The code should produce something like this (Mozilla):
Predictably Explorer 5 on Mac was eager to show off its scrollbars.
Would the negative margin trick work? I added
margin-right: -15px; margin-bottom: -15px;
to the code an the result was perfect:
So now we have solved a very persistent and annoying bug in Explorer on Mac. But how do other browsers regard our negative right and bottom margins?
Fortunately there seem to be no problems at all. Explorer on Windows, Mozilla and Opera don't show any ill effects. The test page looks the same as the one without the negative margins, all browser interpret the styles as we want them interpreted.
So I think I'm really on the right track. Of course there will be a situation in which the trick won't work (browserology is not an exact science) but we've come way closer to solving the problem.
That doesn't mean we've solved all scrollbar bugs in Explorer on Mac. Far from it. There are several very nasty ones, which I've described in my CSS Hints for Internet Explorer 5 on Mac article.