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

Overflow

The overflow declaration defines what happens with content that overflows an element. If an element has a fixed width and height but the content doesn't fit into this defined area, three things can happen:

1. With overflow: visible, the content spills out of the box.
2. With overflow: hidden, the content that doesn't fit into the box is completely hidden and not accessible to the user.
3. With overflow: auto, the box generates scrollbars if necessary. This style was used in the previous code example.

The fourth value, overflow: scroll, causes the element to always show scrollbars, regardless of whether they're needed. Web developers rarely find a use for this.

Overflowing content not clipped

Bug: When giving an element an overflow of anything but visible, Explorer doesn't clip the content of the element. Instead, the content is still present (though invisible) on the page and may create scrollbars.

Example: If we add some more paragraphs to the 'Hidden margins' code example, an unnecessary scrollbar again appears - this time a vertical one for the entire page:

The extra content of the <DIV> now overflows the entire page and creates a scrollbar, even though the overflow: auto declaration should hide this content until the user scrolls the <DIV>. (Also note that the right margin of the first paragraph goes haywire again. A very nasty bug, this one.)

Workaround: Give the body an overflow: hidden. The downside is that this workaround causes the next bug to appear.

Propagation of overflow styles of the body element

Bug: When setting the overflow of a body element to scroll or hidden, the style is propagated to all subsequent pages that are loaded into the same frame or window. Note that this usually happens, but not always.

Workaround: Explicitly reset the overflow to auto in the page that is loaded into the same frame or window.

Padding of overflowing elements

Bug: When giving a padding style to an element with an overflow of anything but visible, hyperlinks within this padding are not clickable.

Example:

.container {
   width: 200px;
   height: 200px;
   overflow: auto;
   padding: 50px;
}

These styles are rendered correctly, except for the unnecessary body scrollbar caused by the previous bug:

But links inside the padding area are no longer clickable. Note that the padding is calculated from the visible edges of the container, even though the bottom padding should be invisible because it hasn't yet scrolled into view:

Workaround: Give the content of the box a margin and set the padding of the box itself to 0.

Related Reading CSS Pocket Reference By Eric A. Meyer

Conclusion

Internet Explorer 5 for the Mac, despite being the most standards-compatible Microsoft browser, has some CSS issues. Unfortunately, it isn't possible to relate all these bugs to a few underlying causes and thus come up with a cure-all.

The best way to avoid them is to test all sites in Explorer 5. Even then, though, strange and inexplicable things will happen. Let's hope for the speedy release of Explorer 6.

Resources

• CodeBitch's IE 5 Mac Bug List, by far the most complete bug list available.
• Sam-i-am's commented backslash hack and some more IE 5 Mac test cases.
• Bug reports and test pages for the overflow bugs and other issues.
• Eric Meyer's CSS Mastergrid, the most complete list of CSS bugs in all browsers.

Peter-Paul Koch is a freelance Web developer in Amsterdam, the Netherlands.

Return to the Web Development DevCenter.