Some content in an element may fall outside the element's rendering
box for a number of reasons (negative margins, absolute positioning,
content exceeding the width/height set for an element, etc.) In
cases where this occurs, the 'overflow' property describes what to
do with the content outside the elements rendering area.
Allowed Values
inherit
[CSS2|CSS2.1]
[N6|O4|S1]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
visible
[CSS2|CSS2.1]
[IE4|N6|O4|S1]
Type: Explicit
Description:
Content is not clipped and may be rendered outside of the element's box.
hidden
[CSS2|CSS2.1]
[IE4|N6|O4|S1]
Type: Explicit
Description:
Content is clipped and content outside of the element's box is not visible.
The size of the clipping region is defined by the 'clip' property.
scroll
[CSS2|CSS2.1]
[IE4|N6|O7|S1]
Type: Explicit
Description:
Content is clipped as necessary, but scrollbars are made available
where necessary to view the additional, non-visible content. If the
Visual media in use is static (such as Print) the content should be
treated as if the value was 'visible'.
auto
[CSS2|CSS2.1]
[IE4|N6|O7|S1]
Type: Explicit
Description:
This value is browser and media dependent, but should allow for a
scrollbar if possible in case of overflow.
-moz-scrollbars-none
[N6]
Type: Explicit
Description:
Mozilla proprietary value - authors should not use this value.
Content is clipped as necessary, but no scrollbars are rendered.
-moz-scrollbars-horizontal
[N6]
Type: Explicit
Description:
Mozilla proprietary value - authors should not use this value.
Content is clipped as necessary, and a horizontal scrollbar is forced to
render, even if not necessary.
-moz-scrollbars-vertical
[N6]
Type: Explicit
Description:
Mozilla proprietary value - authors should not use this value.
Content is clipped as necessary, and a vertical scrollbar is forced to
render, even if not necessary.
In-Line: <blockquoteSTYLE="width: 50px;
height: 50px;
overflow:
scroll">text that scrolls if forced in the name of
decent CSS</blockquote>
Notes
Before its inclusion in CSS2, this property was first proposed in the W3C
Working Draft "Positioning HTML Elements with Cascading Style Sheets" (8/19/97,
http://www.w3.org/TR/WD-positioning)
Browser Peculiarities
Internet Explorer
4.0+:
- The default value for this property as applied to the BODY
element is "auto" not "visible".
- For TEXTAREA elements, a value of "hidden" eliminates scrollbars.
- The TABLE element supports this property with a default value of "hidden".
5.0+:
- Table cell elements (TD/TH) support this property with a default
value of "hidden", if the 'table-layout' property is set to "fixed".
Opera
4.0+:
- It seems like Opera is cutting off any borders applied to
an element if 'overflow' is set to "hidden." This is fixed
in 5.x+ unless the element is positioned, in which case it still
cuts off applied borders.
- Opera's features page says that "overflow: scroll" is not supported
in Opera, but it does have an effect, since the default
value should be "visible", and it is NOT behaving that way.