Forum Moderators: not2easy
Got a curious one, not quite sure if spec says this is meant to happen, but it is in every browser I've tested:
The problem is this: I define a height on an element, set some padding to the bottom, and set the
overflowTechnically (well, to me anyway) the only usable area is the content can take up is the height of the element less the top and bottom padding. Correct? Indeed it seems so if the height and the
overflowYou can recreate it like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>overflow + padding issue</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px; }
div { width: 200px;
height: 200px;
overflow: hidden;
margin: 20px auto;
padding: 50px;
background-color: #eee;
color: #222; }
</style>
</head>
<body>
<div>
<p>Nulla eget nulla quis dui luctus gravida. Etiam a elit ut erat fermentum convallis. Duis at nisl eget libero tincidunt lacinia. Nunc tellus. Pellentesque venenatis metus nec libero. Sed magna arcu, porta in, consectetuer sed, feugiat lacinia, elit. Nunc pellentesque semper sapien. Donec felis neque, varius at, suscipit ac, tincidunt eget, diam. Ut dui magna, placerat rutrum, iaculis vel, accumsan sit amet, lorem. Suspendisse ullamcorper nunc a mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p>
<p>Sed eget dolor. Sed fringilla rutrum odio. Ut vel eros. Donec adipiscing. Etiam non mauris at dui tempus sodales. Pellentesque lobortis lectus nec metus. Donec eu augue nec leo venenatis lobortis. Integer dictum pharetra lacus. Aliquam accumsan auctor neque. Mauris et nunc. Nunc ac quam ac nibh mattis convallis. In hac habitasse platea dictumst. Sed eu dolor sit amet ante rutrum cursus. Suspendisse est. Maecenas eros. Phasellus vulputate turpis sit amet magna. Cras volutpat bibendum eros. Pellentesque hendrerit posuere enim.</p>
</div>
</body>
</html>
Does anybody know if this is the way
overflow
The Overflow recs [w3.org] are as non-committal as the rest of them.. I do like the use of the word "generally" ;)
anyway I *think* the key parts are
Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
.. and at first read you might expect the overflow property to clip to the content box width/height (i.e. clip the padding from all 4 sides) but then..
Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.
So it's clipped to its padding edge (not content width/height) - it includes all the padding which you can see if overflow is set to auto or scroll - when overflow is hidden the padding is likely still there at the bottom (a check shows the height of container is still the same as it would be if it scrolled) it's just that there's just no scroll mechanism to access it..
another case where it might be easier if width and height had been called content-width and content-height?
Suzy
[edited by: SuzyUK at 12:33 pm (utc) on Mar. 15, 2007]
:)
I can understand the padding still being at the bottom of the content when auto or scroll is set, but with hidden, I actually expected the padding to stay intact and the content to clip at padding edge... maybe that's just me... or that's what
clipThanks again SuzyUK
