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

Discussion in 'HTML' started by ck, Jun 6, 2004.

  1. ck

    ck Guest

    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
     
    ck, Jun 6, 2004
    #1
    1. Advertising

  2. ck

    Steve Pugh Guest

    "ck" <> 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 <> <http://steve.pugh.net/>
     
    Steve Pugh, Jun 6, 2004
    #2
    1. Advertising

  3. ck

    Steve Pugh Guest

    Steve Pugh <> wrote:
    >"ck" <> 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.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

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

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jun 6, 2004
    #3
  4. ck

    ck Guest

    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
     
    ck, Jun 6, 2004
    #4
  5. ck

    DU Guest

    Steve Pugh wrote:

    > "ck" <> 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
     
    DU, Jun 8, 2004
    #5
  6. ck

    Steve Pugh Guest

    DU <> wrote:
    >Steve Pugh wrote:
    >> "ck" <> 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 <> <http://steve.pugh.net/>
     
    Steve Pugh, Jun 8, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    784
    Bruce Barker
    Oct 10, 2005
  2. Sean Jorden
    Replies:
    1
    Views:
    599
    laurie
    Aug 19, 2003
  3. MarionEll
    Replies:
    0
    Views:
    345
    MarionEll
    Nov 2, 2004
  4. Replies:
    1
    Views:
    377
  5. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,979
    Smokey Grindel
    Dec 2, 2006
Loading...

Share This Page