- From: Rossen Atanassov <ratan@windows.microsoft.com>
- Date: Sat, 5 Jan 2008 11:08:42 -0800
- To: Andrew Fedoniouk <news@terrainformatica.com>, fantasai <fantasai.lists@inkedblade.net>
- CC: Alex Mogilevsky <alexmog@exchange.microsoft.com>, "www-style@w3.org" <www-style@w3.org>, Sam Fortiner <samfort@microsoft.com>, Harel Williams <harelw@microsoft.com>, Scott Dickens <sdickens@exchange.microsoft.com>, Boris Zbarsky <bzbarsky@MIT.EDU>
>Case #3 raises the question: what exactly is content box of an element?
The specified width/height box minus any scroll bar sizes.
>Case #3 shall not show any scrollbars.
If you open case#3 and if you use overflow:auto on the in your example bellow you will not see scroll bars. Here's a modified version that shows that behavior. However, if you specify overflow:scroll and force the scrollbars, then the size of your containing block will change in order to account for the size of the bars. If you look at our cases 5,6,7,8 using floats and percentage sizes you will see how the size of the containing block is changing.
<!-- there will be no overflow nor scroll bars here since the content fits in the containing block (currently size 100x100) -->
<p style="width: 100px; height:100px; background: lightgreen; overflow:auto;">
<span style="background:orange">some content that does not fit into a container so it will overflow</span>
</p>
<!-- there will be no overflow, but scroll bars will be present since they are requested by the user. Also the size of the
containing block is now taking into account the scroll bars and the width is recalculated (currently size 100 - [size of scroll bar] x100) -->
<p style="width: 100px; height:100px; background: orange; overflow:scroll;">
<span style="background:lightgreen">some content that does not fit into a container so it will overflow</span>
</p>
>If it shows scrollbars then rendering of this case:
>
><!doctype>
><html>
> <head>
> <style>
> p { font: 14pt sans-serif; border:1px solid; }
> </style>
> </head>
><body>
> <p style="width: 100px; height:100px; background: lightgreen;">some
>content that does not fit into a container so it will overflow</p>
> <p style="width: 100px; height:100px; background: orange;">some
>content that does not fit into a container so it will overflow</p>
></body>
></html>
>
>must not have text of the paragraphs rendered on top of each other -
>paragraphs here should have computed height equal to the height of
>content, like here:
>
><table>
> <tr>
> <td style="width: 100px; height:100px; background:
>lightgreen;">some content that does not fit into a container so it will
>overflow</td>
> </tr><tr>
> <td style="width: 100px; height:100px; background: orange;">some
>content that does not fit into a container so it will overflow</td>
> </tr>
></table>
Table cells will always ignore specified width/height values if the content can't be fit. Consider this scenario
<table>
<tr>
<td style="width: 100px; height:100px; background:lightgreen;">
some content that does not fit into a container so it will
overflow some content that does not fit into a container so it will
overflow</td>
</tr>
</table>
>This sample, btw, demonstrates another issue:
>It appears as cells in table use overflow:never value (that does not
>exist in CSS at all).
>This and layout algorithm that use flexes (a.k.a. shrink-to-fit) makes
>tables "unbeatable-by-css" so far.
>
>--
>Andrew Fedoniouk.
>
>http://terrainformatica.com
Received on Saturday, 5 January 2008 19:09:04 UTC