All CSS browsers except for Opera 5 on Linux, iCab and Omniweb support overflow to a certain extent. Below I treat the reactions of the various browsers to the four different values.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. You can assign four values to overflow and they should give the following results:
Testsheet:
div.test { font: 9px verdana,arial,helvetica; border: 2px solid #000000; width: 200px; height: 70px; margin-bottom: 50px; } #visible { overflow: visible; } #hidden { overflow: hidden; } #scroll { overflow: scroll; } #auto { overflow: auto; }
Desired result: The content flows out of the box.
Netscape 4: Incorrect, stretches box up until the content fits.
Mozilla: Correct.
Explorer 4-6 Windows: Incorrect, stretches box up until the content fits.
Explorer 4 Mac: Incorrect, stretches box up until the content fits.
Explorer 5 Mac: Correct
Opera 5: Correct
Opera 7: Incorrect, stretches box up until the content fits.
Safari: Correct.
Desired result: The overflowing content is completely hidden, not accessible to the user.
Netscape 4: Correct, except that the bottom border isn't shown.
Mozilla: Correct
Explorer 4-6 Windows: Correct
Explorer 4 Mac: Correct
Explorer 5 Mac: Correct
Opera 5+: Correct, except that the border isn't shown.
Safari: Correct.
Desired result: Show horizontal and vertical scrollbars.
Netscape 4: Incorrect, same as hidden
.
Mozilla: Correct
Explorer 4-6 Windows: Correct
Explorer 4 Mac: Incorrect, same as hidden
.
Explorer 5 Mac: Correct, but buggy. Initially nothing appears in the box, only when you scroll it away, then
back again the text does appear.
Opera 5: Incorrect, same as hidden
.
Opera 7: Correct.
Safari: Correct.
Desired result: Show scrollbars where necessary (horizontal or vertical or both).
Netscape 4: Incorrect, same as hidden
.
Mozilla: Correct
Explorer 4-6 Windows: Correct
Explorer 4 Mac: Incorrect, same as hidden
.
Explorer 5 Mac: Correct, but it's difficult to evade a horizontal scrollbar. It has,
however, strange bugs
when you use an overflow: auto on an element in a nested table.
Opera 5: Incorrect, same as visible.
Opera 7: Correct.
Safari: Correct.
Desired result: Defaults to overflow: visible.
All browsers: Correct
Some notes on bugs and broswer behaviour:
In Explorer 5.0 an element with overflow: scroll | auto
does not react to the mouse
wheel. From 5.5 onwards the element scrolls without problems when you use the wheel.
This browser has serious trouble with overflow: scroll | auto | hidden
. I follow its bugs on
the Explorer 5 Mac page.