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:hiddenoroverflow:autoon html — all contens is hidden.overflow:visibleon html — the contents is visible but cannot be scrolled: no scrollbars. testcase.overflow:scrollon html — invisible contents and the browser shows ghost scrollbarsoverflowdeclared on body does work correctly, when the overflow property is not applied to thehtmlelement.
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; 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].
