How to work around this IE table resizing issue?

Discussion in 'HTML' started by Bruce C. Miller, Feb 13, 2007.

  1. Take a look at this html page:

    <html>
    <body>

    <TABLE border=1 WIDTH="100%">

    <TR>
    <TD WIDTH="1">1</TD>
    <TD WIDTH="1">2</TD>
    <TD>333</TD>
    <TD>444</TD>
    </TR>

    <TR>
    <TD COLSPAN="4">hhhhhhhhhhhhhhhffffffffffffffffffffffffffhhhhhhh</
    TD>
    </TR>

    </TABLE>
    </body>
    </HTML>

    If I pull that up in FF it looks like I want it to (the first and
    second columns are small), but in IE it expands those columns (it
    ignores the width=1). How do I tell IE to not automatically make those
    columns whatever size it wants? It seems to have something to do with
    the length of content in the COLSPAN-ed row below it, which is pretty
    stupid.
    Bruce C. Miller, Feb 13, 2007
    #1
    1. Advertising

  2. Bruce C. Miller

    dorayme Guest

    In article
    <>,
    "Bruce C. Miller" <> wrote:

    > Take a look at this html page:
    >
    > <html>
    > <body>
    >
    > <TABLE border=1 WIDTH="100%">
    >
    > <TR>
    > <TD WIDTH="1">1</TD>
    > <TD WIDTH="1">2</TD>
    > <TD>333</TD>
    > <TD>444</TD>
    > </TR>
    >
    > <TR>
    > <TD COLSPAN="4">hhhhhhhhhhhhhhhffffffffffffffffffffffffffhhhhhhh</
    > TD>
    > </TR>
    >
    > </TABLE>
    > </body>
    > </HTML>
    >
    > If I pull that up in FF it looks like I want it to (the first and
    > second columns are small), but in IE it expands those columns (it
    > ignores the width=1). How do I tell IE to not automatically make those
    > columns whatever size it wants? It seems to have something to do with
    > the length of content in the COLSPAN-ed row below it, which is pretty
    > stupid.


    Have you tried with a doctype,

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    ?

    And remove width in the <td...>, it is an error. If necessary
    specify it in css:

    td.tiny {width:1em;}

    and class the <td>s concerned. If there is a meaningful reason
    apart from the sheer look to so do, then use a more appropriate
    name than my "tiny".

    And what is this business of "1"? This means 1px in your code.
    But that is not very sensible, even one character will take up
    more space generally. Poor IE, what is it to do? We all now it is
    a bit challenged. Why strain its brain? Better to use ems as
    above.

    And really, is there a good reason so want to constrain things?
    Why not let the widths adjust themselves to the content and the
    browser window? Even remove the width="100%".

    Play about with these ideas and let us know if IE then behaves
    more according to your taste (I have not looked at any of the
    Wins IE for a while)

    --
    dorayme
    dorayme, Feb 13, 2007
    #2
    1. Advertising

  3. "Bruce C. Miller"

    > Take a look at this html page:


    > <html>

    Where is the !DOCTYPE. You are putting IE into quirks mode where it
    reproduces the bugs from prior versions.

    <snip>

    IE always breaks when you mix percentages and pixels in tables with colspan.
    Known problem.
    Richard Formby, Feb 14, 2007
    #3
  4. Bruce C. Miller

    Steve Pugh Guest

    On Feb 13, 8:11 pm, "Bruce C. Miller" <> wrote:

    > <TABLE border=1 WIDTH="100%">
    > <TR>
    > <TD WIDTH="1">1</TD>
    > <TD WIDTH="1">2</TD>
    > <TD>333</TD>
    > <TD>444</TD>
    > </TR>
    > <TR>
    > <TD COLSPAN="4">hhhhhhhhhhhhhhhffffffffffffffffffffffffffhhhhhhh</
    > TD>
    > </TR>
    > </TABLE>
    >
    > If I pull that up in FF it looks like I want it to (the first and
    > second columns are small), but in IE it expands those columns (it
    > ignores the width=1).


    As the characters "1" and "2" are almost always wider than 1px (which
    is what width="1" means in this context) then both IE and FF are
    ignoring the width="1" anyway, and with good reason.

    > How do I tell IE to not automatically make those
    > columns whatever size it wants? It seems to have something to do with
    > the length of content in the COLSPAN-ed row below it, which is pretty
    > stupid.


    The specification tells browsers to treat cell widths as a suggestion
    and to ignore them when the content doesn't fit. IE handles this by
    treating cell widths as minimum widths.

    It will be hard to come up with a solution without being able to see a
    real page with real content. Possible solutions include,, but probably
    aren't limited to,: not using tables, using table-layout: fixed;
    splitting the table into two; but which one is most appropriate will
    depend on the the actual content, design and structure of the page.

    Steve
    Steve Pugh, Feb 14, 2007
    #4
  5. On Feb 13, 5:30 pm, dorayme <> wrote:
    > In article
    > <>,
    > "Bruce C. Miller" <> wrote:
    >
    >
    >
    > > Take a look at this html page:

    >
    > > <html>
    > > <body>

    >
    > > <TABLE border=1 WIDTH="100%">

    >
    > > <TR>
    > > <TD WIDTH="1">1</TD>
    > > <TD WIDTH="1">2</TD>
    > > <TD>333</TD>
    > > <TD>444</TD>
    > > </TR>

    >
    > > <TR>
    > > <TD COLSPAN="4">hhhhhhhhhhhhhhhffffffffffffffffffffffffffhhhhhhh</
    > > TD>
    > > </TR>

    >
    > > </TABLE>
    > > </body>
    > > </HTML>

    >
    > > If I pull that up in FF it looks like I want it to (the first and
    > > second columns are small), but in IE it expands those columns (it
    > > ignores the width=1). How do I tell IE to not automatically make those
    > > columns whatever size it wants? It seems to have something to do with
    > > the length of content in the COLSPAN-ed row below it, which is pretty
    > > stupid.

    >
    > Have you tried with a doctype,
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > ?
    >
    > And remove width in the <td...>, it is an error. If necessary
    > specify it in css:
    >
    > td.tiny {width:1em;}
    >
    > and class the <td>s concerned. If there is a meaningful reason
    > apart from the sheer look to so do, then use a more appropriate
    > name than my "tiny".
    >
    > And what is this business of "1"? This means 1px in your code.
    > But that is not very sensible, even one character will take up
    > more space generally. Poor IE, what is it to do? We all now it is
    > a bit challenged. Why strain its brain? Better to use ems as
    > above.
    >
    > And really, is there a good reason so want to constrain things?
    > Why not let the widths adjust themselves to the content and the
    > browser window? Even remove the width="100%".
    >
    > Play about with these ideas and let us know if IE then behaves
    > more according to your taste (I have not looked at any of the
    > Wins IE for a while)
    >
    > --
    > dorayme


    Unfortunately, I cannot use strict since this is part of generated
    markup produced by a huge n-tier app, most of which ignores strict
    syntax. Rewriting the display layer of this to produce proper markup
    is something I'd like to see, but would require literally months of
    work and testing, and wouldn't be an easy sell to more results-
    oriented people :(

    Either way, I dislike the idea that the length of the content in the
    second row effects the way IE draws the first one. It really
    shouldn't, quirks-mode or not. For example, if you change the 2nd
    row's content to like 4 characters, IE does exactly what I want it to.
    Bruce C. Miller, Feb 14, 2007
    #5
  6. Bruce C. Miller wrote:

    > Either way, I dislike the idea that the length of the content in the
    > second row effects the way IE draws the first one. It really
    > shouldn't, quirks-mode or not. For example, if you change the 2nd
    > row's content to like 4 characters, IE does exactly what I want it to.
    >


    Makes you kind of understand why it strikes a nerve around here when
    someone make a statement like: "who cares about standards, its the most
    popular 'browser' so all should do it that browser's way!"

    I and many here will recommend to design for standards-compliant
    browsers first, then if IE has problems, tweak or hack if you must, else
    live with the difference.

    You're stuck with quirks mode so it is a crap-shoot at best. You'll just
    have to live with IE doing it its *own* way. IE7 is now out and it is
    clear how MS feels about this.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 14, 2007
    #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. Piet
    Replies:
    0
    Views:
    519
  2. Network/Software Buyer
    Replies:
    0
    Views:
    412
    Network/Software Buyer
    May 23, 2010
  3. csgraham74

    Datagrid or Table Resizing issue

    csgraham74, Aug 30, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    134
    csgraham74
    Aug 30, 2005
  4. Pil (Trustworthy from Experience)

    Resizing a div by resizing its borders

    Pil (Trustworthy from Experience), Apr 18, 2009, in forum: Javascript
    Replies:
    9
    Views:
    348
    Proper
    Apr 21, 2009
  5. Proper
    Replies:
    0
    Views:
    197
    Proper
    Apr 18, 2009
Loading...

Share This Page