Re: Elements styled with width:value% inside a table with width="auto"

My understanding is it's undefined: from http://www.w3.org/TR/CSS21/ 
visudet.html#propdef-width:

   <percentage> Specifies a percentage width. The percentage is
   calculated with respect to the width of the generated box's
   containing block. If the containing block's width depends on
   this element's width, then the resulting layout is undefined
   in CSS 2.1.

The containing block for the textarea is the td, so it's undefined.  
This rule applies to all block-level items except "display=table- 
cell" elements, which can take a width as a percentage even if the  
outer table has a width of "auto". CSS2.1 17.5.2.2:

   A percentage value for a column width is relative to the table width.
   If the table has 'width: auto', a percentage represents a constraint
   on the column's width, which a UA should try to satisfy.

"cols" is a non-css presentational hint so technically should be  
overridden by anything in CSS (6.4.4), but that's down to the UA as  
well. As for the intrinsic width being used as a backup (ie treating  
the width as "auto"), that seems sensible but I'm not aware of  
anything in the spec that says it must be so.

Cheers... Mike


On 10 Jul 2006, at 10:51, Shadow2531 wrote:

>
> What must happen in these situations?
>
> <!DOCTYPE html>
> <html>
>    <head>
>        <title>Use cols as backup</title>
>        <style>
>            td textarea {
>                width: 100%;
>            }
>        </style>
>    </head>
>    <body>
>        <table>
>            <tr>
>                <td><textarea cols="300"></textarea></td>
>            </tr>
>        </table>
>    </body>
> </html>
>
> The textarea is styled with width: 100% and the table has a width of
> auto.  The textarea needs to know the width of the table so 100% can
> mean something, but the table needs to know the width of the textarea
> so the table can fit -to-width.  A calculation can't be made.
>
> What should happen?
>
> Should the UA use the cols attribute as a backup?
>
> If so, how *exactly* should it be used?
>
> Should the end result be a textarea that has a static width of 300
> columns or should the end result be that the table has width: 100% and
> a max-width of whatever 300 columns calculates to in pixels?
>
> Gecko and KHTML do the latter, which makes the textarea have a
> variable width. Opera and IE don't do either and just display the
> textarea borders and scrollbars. If the table's borders and padding
> are collapsed, Opera won't display anything.
>
> Now, here's the same situation, but with a 1400 x 20 image:
>
> <!DOCTYPE html>
> <html>
>    <head>
>        <title>Use intrinsic width as backup</title>
>        <style>
>            td img {
>                width: 100%;
>            }
>        </style>
>    </head>
>    <body>
>        <table>
>            <tr>
>                <td><img
> src="http://shadow2531.com/opera/testcases/tables/002.png"></td>
>            </tr>
>        </table>
>    </body>
> </html>
>
> Should the intrinsic width of the image be used as a backup?
>
> Gecko and KHTML make the table have a width of 100% and use the
> intrinsic width of the image to apply a max-width of 1400px. to the
> table. The end result  is that the pic has a variable width. However,
> the height of the pic is also variable.
>
> Opera here doesn't display the image at all.
>
> What *exactly* should happen?
>
> Must  the end result be that the pic has a static width of 1400px and
> a static height of 20px or is the Gecko and KHTML behavior correct?
>
> Note: There seems to be a little more to what  Gecko and KHTML do
> (like padding, borders, margins etc.), but what I decribed is
> basically what they do..
>
> Thanks
>
> -- 
> burnout426
>
>

Received on Monday, 10 July 2006 16:37:46 UTC