Why? (table expands to width of text in textbox)

[ck]

Take a look at the following example (browse in IE6):

<table style = "width:100; border:1px solid black">
<tr>
<td style = "border:1px solid red">
<input style = "width:50%" value = "this is a test with a long string in
it and the table width setting doesn't matter"></input>
</td>
</tr>
</table>

The string causes the table to expand to the width of the string, even
though the string is in a text box that cuts off the visible portion of the
string.

What's up with this? I can prevent it by setting the input width to a fixed
value, but that's not my preference...

Thanks!

Chris

 

[Steve Pugh]

Take a look at the following example (browse in IE6):

<table style = "width:100; border:1px solid black">

width: 100; should be ignored as all non-zero lengths on CSS require
units, but browsers tend to guess that you meant to write width:
100px; so we'll pretend that you actually did write that.

So according to
http://www.w3.org/TR/CSS2/tables.html#auto-table-layout the width of
the table will be either 100px or the width needed by summing the
widths of the columns, whichever is greater.

<tr>
<td style = "border:1px solid red">

So the table cell has no width set. So the minimum width of the cell
and hence the minimum width of the column and the minimum width of the
table is deterimined by the content.

<input style = "width:50%"

Ah, so the width of the content (this input is the only content) is
half the width of the cell.

Hmm, this may cause a problem, there's a bit of a loop going on in
determing the widths and some browsers (e.g. many versions of Opera)
resolve the loop in an annoying fashion. But IE looks like it's being
even more stupid.

value = "this is a test with a long string in
it and the table width setting doesn't matter"></input>

</td>
</tr>
</table>

The string causes the table to expand to the width of the string, even
though the string is in a text box that cuts off the visible portion of the
string.

Indeed. IE seems to be doing something very strange. It's decided that
width: 50%; in this context means 50% of the width needed to display
the full text of the value attribute.

This is just bizarre, and has no grouding in the CSS or HTML specs,
nor in any past browser behaviour AFAIK.

Anyway, the width of the cell is thus the width of the full text
(because the input must be 50% of the width of the cell) and hence the
100px width for the table is ignored as the minimum width of the cell
is greater than 100px.

Solution? Well that depends on what the real page looks like as the
above is presumably a much simplified test case.

Steve

 

[Steve Pugh]

Ah, so the width of the content (this input is the only content) is
half the width of the cell.

B****r
I'm being stupid tonight.

input is a replaced element according to
http://www.w3.org/TR/CSS2/conform.html#replaced-element and thus
width: 50%; refers to half its intrinsic width rather than half its
parent's width. (Note that CSS 2.1 drops input from that list:
http://www.w3.org/TR/CSS21/conform.html#replaced-element).

(I'd gotten so used to the stupid way Opera behaved in this situation
that I'd forgotten what should really have been happening.)

The intrinsic width of an input box is.... (answers on a postcard)

Okay, now I see why IE is doing what it does. It's taking the width
needed to display the value attribute text as the intrinsic width.

Steve

 

[ck]

Steve, thanks for you smart analysis! I see what you mean (about intrinsic
vs parent); but, if you put a bunch of inputs into parent elements and set
the width to a percentage, at least in IE it does always come out as a
percentage of the parent, not a percentage of the inputs intrinsic width (I
guess that's the default width?). Anyway, the only way I have been able to
resolve this, what I can only call an inconsistency, is to set the width of
the input in pixels instead of a percentage. Which is of course a bummer
when it comes to resizing, though fortunately my users don't really
resize...

I've seen another "funny" case like this too, which involves table cells and
divs; I'll have to see if I can dig that up...

Thanks for your help. Wish I had a better solution to this.

Chris

 

[DU]

width: 100; should be ignored as all non-zero lengths on CSS require
units, but browsers tend to guess that you meant to write width:
100px; so we'll pretend that you actually did write that.

That's not my interpretation. Browsers do ignore all non-zero length and
then revert to default width value for that table: width: auto; So, the
table will use the necessary width to render its content. Therefore it
explains why the table expands to fit its content.

"User agents must ignore a declaration with an illegal value. For
example: (...)
IMG { border-width: 3 } /* a unit must be specified for length values */"
CSS2, Section 4.2 Rules for handling parsing errors
http://www.w3.org/TR/CSS2/syndata.html#parsing-errors

So according to
http://www.w3.org/TR/CSS2/tables.html#auto-table-layout the width of
the table will be either 100px or the width needed by summing the
widths of the columns, whichever is greater.

[snipped]

That's not how I understand/interpret this. The table width will be
auto, no "or", no "otherwise".

DU

 

[Steve Pugh]

That's not my interpretation. Browsers do ignore all non-zero length and
then revert to default width value for that table: width: auto;

It depends on doctype sniffing. In quirks mode the width: 100; is
interpreted as 100px, in standards mode it's ignored. Tested and
confirmed in IE6, Opera 7.5 and FireFox 0.8.

Makes little difference in the case under discussion as taking the
width of the value of the input, rather than say the input's default
width in that particule browser/OS, as the minimum width for the table
content is an odd thing to do.

Steve