www.webdeveloper.com
Results 1 to 7 of 7

Thread: Incorrect table width in IE when margin is used

  1. #1
    Join Date
    May 2007
    Posts
    6

    Incorrect table width in IE when margin is used

    Hi,

    Since I don't have any server to upload my file to, I've included the code below. My question is included in the code.

    Thanks in advance!

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

    <HTML>
    <BODY>

    <TABLE STYLE="width: 500px;"><TR>

    <TD STYLE="width: 75%;">
    <P>When set to a width of 100% and a margin of 25 px, this table disappears behind the next table cell <i>in Internet Explorer</i>:</P>

    <TABLE STYLE="width: 100%; background: yellow; margin: 25px;"><TR>
    <TD>
    <P>Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.</P>
    </TD>
    </TR></TABLE>

    <P>When the margin is removed, however, the table becomes the correct width:</P>

    <TABLE STYLE="width: 100%; background: yellow; "><TR>
    <TD>
    <P>Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.</P>
    </TD>
    </TR></TABLE>

    </TD>

    <TD STYLE="width: 25%; background: orange;">
    Pellentesque cursus, leo ac venenatis ornare, ligula libero vehicula arcu, sit amet facilisis est felis vel arcu. Aenean tempus arcu eget neque. Donec rutrum magna non magna. Cras consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin viverra eleifend est.
    </TD>

    </TR></TABLE>

    </BODY>
    </HTML>

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    The width of the left and right margins is added to the already 100% width of the table. The outer table will therefore stretch to 550px to accomodate the need of the inner table(s). With a "loose.dtd" IE is in quirks mode.
    Try using the strict.dtd instead.
    Last edited by holyhttp; 05-28-2007 at 11:49 AM.

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    No, the IE will be in standards mode. The loose DTD just allows deprecated tags and attributes. There shouldn't be any tables on that page in the first place, though. Here's a suggested replacement.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
      <body>
    
        <div style="width: 500px; background:#fff">
    
          <div style="width: 75%; float:left">
            <p>
              When set to a width of 100% and a margin of 25 px, this table
              disappears behind the next table cell
              <i>in Internet Explorer</i>:
            </p>
    
            <div
              style="width: 100%; background: yellow; margin: 25px; float:left">
              <p>
                Just the good ol' boys, never meanin' no harm. Beats all
                you've ever saw, been in trouble with the law since the day
                they was born. Straight'nin' the curve, flat'nin' the hills.
                Someday the mountain might get 'em, but the law never will.
                Makin' their way, the only way they know how, that's just a
                little bit more than the law will allow. Just good ol' boys,
                wouldn't change if they could, fightin' the system like a
                true modern day Robin Hood.
              </p>
            </div>
    
            <p>
              When the margin is removed, however, the table becomes the
              correct width:
            </p>
    
            <div style="width: 100%; background: yellow;  float:left">
              <p>
                Just the good ol' boys, never meanin' no harm. Beats all
                you've ever saw, been in trouble with the law since the day
                they was born. Straight'nin' the curve, flat'nin' the hills.
                Someday the mountain might get 'em, but the law never will.
                Makin' their way, the only way they know how, that's just a
                little bit more than the law will allow. Just good ol' boys,
                wouldn't change if they could, fightin' the system like a
                true modern day Robin Hood.
              </p>
            </div>
    
          </div>
    
          <div style="width: 25%; background: orange; margin-left: 75%">
            Pellentesque cursus, leo ac venenatis ornare, ligula libero
            vehicula arcu, sit amet facilisis est felis vel arcu. Aenean
            tempus arcu eget neque. Donec rutrum magna non magna. Cras
            consequat. Vestibulum ante ipsum primis in faucibus orci luctus
            et ultrices posuere cubilia Curae; Proin viverra eleifend est.
          </div>
          <div style="clear:both"></div>
        </div>
    
      </body>
    </html>
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    May 2007
    Posts
    6
    Thanks for your suggested <div> design. It still doesn't solve the problem, though: the indented text box still disappears behind the column to the right—and now in Firefox as well. Is something like this even possible with a pixel margin (as opposed to percent)?

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I'm still trying to figure out what you're trying to do... :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <body>
    <div style="width: 500px; margin:0 auto; background:#fff; border:1px solid gray;">
    <div style="width: 75%;">
    <p> When set to a width of 100% and a margin of 25 px, this table disappears behind the next table cell <i>in Internet Explorer</i>: </p>

    <div style="width: 100%; background: yellow; margin:0 25px; float:left">
    <p> Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood. </p>
    </div>

    <p> When the margin is removed, however, the table becomes the correct width: </p>

    <div style="width: 100%; background: yellow; margin:0 25px; float:left">
    <p> Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood. </p>
    </div>

    </div>

    <div style="width: 75%; background: orange; margin:0 25px; float:left">
    Pellentesque cursus, leo ac venenatis ornare, ligula libero vehicula arcu, sit amet facilisis est felis vel arcu. Aenean tempus arcu eget neque. Donec rutrum magna non magna. Cras consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin viverra eleifend est. </div>

    <div style="clear:both"></div>

    </div>
    </body>
    </html>
    ??
    I build for: Firefox and tweak for IE

  6. #6
    Join Date
    Oct 2006
    Location
    Cardiff, Wales, UK
    Posts
    48
    I'm guessing that your table inside the cell is overlapping because you've added a total 50px margin to 100% width. So if the cell is 75% of 500px (375px) and your sub-table is 100% width of this, plus 50px margin, that makes the total table width 425px - hence it is overlapping.

    You could work out what percentage you need to use to accommodate the margin, or just do the measurements in pixels instead.

    And yes, the page should ideally use DIVs and not tables, but the theory should work for both.
    Tim Denton

    Graphic Designer for web, multimedia and interactive in Cardiff, Wales, UK.

    http://www.timdenton.co.uk

  7. #7
    Join Date
    May 2007
    Posts
    6
    I'm beginning to think that what I have in mind is not entirely possible with CSS, but I'll post my concept here as an image anyway:

    http://i5.photobucket.com/albums/y16...ck/sidebar.png

    Whenever there's a sidebar, the text box should shrink to leave room for it. If there is no sidebar, however, the text box should fill the entire width.

    A typical page with this design would have several text boxes and several sidebars, and the design should be fluid as opposed to fixed.

    Ideally, the margin between the text box and the sidebar should be 25px, but this can be replaced by an appropriate percentage value if necessary.

    I hope this clears up some confusion about the concept.
    Last edited by Freaksworth; 05-30-2007 at 06:45 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles