Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






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:

Incorrect Explorer Rendering Screen Shot

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:

Incorrect Explorer Rendering Screen Shot

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:

Incorrect Explorer Rendering Screen Shot

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

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


Return to the Web Development DevCenter.