CSS Hints for Internet Explorer 5
Pages: 1, 2, 3, 4
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:
overflow: visible, the content spills out of the box.
overflow: hidden, the content that doesn't fit into the box is completely
hidden and not accessible to the user.
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
(Also note that the right margin of the first paragraph goes haywire again.
A very nasty bug, this one.)
Workaround: Give the
The downside is that this workaround causes the next bug to appear.
Propagation of overflow styles of the
Bug: When setting the
overflow of a
body element to
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
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.
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.
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.
is a freelance Web developer in Amsterdam, the Netherlands.
Return to the Web Development DevCenter.