Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Why? (table expands to width of text in textbox)

Reply
Thread Tools

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

 
 
ck
Guest
Posts: n/a
 
      06-05-2004
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


 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      06-06-2004
"ck" <(E-Mail Removed)> wrote:

>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>


That </input> really isn't recommended. Feeding XHTML of that nature
to a tag-soup slurper like IE6 is pointless.

> </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

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      06-06-2004
Steve Pugh <(E-Mail Removed)> wrote:
>"ck" <(E-Mail Removed)> wrote:
>
>> <input style = "width:50%"

>
>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.h...laced-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

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
ck
Guest
Posts: n/a
 
      06-06-2004
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


 
Reply With Quote
 
DU
Guest
Posts: n/a
 
      06-08-2004
Steve Pugh wrote:

> "ck" <(E-Mail Removed)> wrote:
>
>
>>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.
>


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
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      06-08-2004
DU <(E-Mail Removed)> wrote:
>Steve Pugh wrote:
>> "ck" <(E-Mail Removed)> wrote:
>>
>>>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.
>>

>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

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
When a server control expands, it overlaps with the text that follows antonyliu2002@yahoo.com ASP .Net 1 11-20-2006 11:11 PM
Textbox width scaling to width of data not width of page? AndrewF ASP .Net 1 10-10-2005 04:38 PM
must parser expands character entities? rw XML 2 12-17-2004 09:20 PM
Microsoft Signs on as Elite Sponsor of XML 2004; Program Expands Marion Elledge XML 0 11-10-2004 07:46 PM
XML 2004 Program Expands -- Register Today! MarionEll XML 0 11-02-2004 07:46 PM



Advertisments