Internet Explorer 5 Mac: oddities

Overflow

“overflow:auto” applied to <body> and/or <html>.

Applying {overflow:auto} to the <html> tag (and the <body> tag) will cause a page not to display at all in IE5 mac. Some explanation.

Overflow property and positioned boxes

A demo file illustrating some problems with the overflow property on positioned boxes. Some comments are included in the file.

Overflow property and scrollbars

Similarly to edge-positioned boxes (see elsewhere on this site), IE mac mispositions the scrollbars when the overflow property is used. This page (ed. dead link) has some details, including a fix (adding extra padding on the right, similar way of problem solving as what is described in my right positioning article here. The fix is also in use on the above mentioned demo file. For consistent display across browsers, it is better to hide that fix from other browsers.

Incorrect positioning of the scrollable container

The browser does not center the container block when using {margin:auto; width: any value;}. Sample. Workaround: wrap the scrollable block in a parent container and apply the centering from there. Sample2. Notice also that IE mac doesn't clip the hidden contents, as shown by a vertical scrollbar on the viewport, even if I explicitely declare the clipping (as in sample2). The contents is hidden, but still takes up some space. This, however, doesn’t affect the positioning or flow of the elemtents that follow the block element with overflow declared.

Additionally, IE mac leaves a ‘ghost’ horizontal scrollbar when overflow:auto is declared on an element.

Overflow and block level elements except div

When applied to most block elements, except a div, the overflow property causes the element to collapse and vanish into thin air, even when a height is specified. Width is also ignored, and defaults to the available width as computed from the parent block level element. Adding a top padding to the element will expand the height, but the contents will not appear.

If the element is floated, the overflow will be respected, but the scrolling mechanism will not function correctly (scrolling is not possible). When the height is set to “0” (zero), the overflow will be ignored completely (height treated as auto and overflow:visible). This is important in case some of the various Image Replacement methods are in use (see Michael Ryznars article for more on this). This last problem can, luckily, be overcome, by declaring a height of 1px. [Samples, testcases and screen grabs].

section – contents

Also around here
[ Empty spaces ]
a weblog

This collection of documents and test cases related to Internet Explorer 5 for Mac is no longer maintained and is only kept online for historical reasons.

Comments and suggestions: are not needed anymore. Thanks to all who provided info and tips in the past.

File last updated: September 09, 2009.

back to top

permanent location: http://www.l-c-n.com/IE5tests/overflow/index.shtml.