too-wide div in table causes alignment problem in ie7

Discussion in 'CSS' started by jrisken, Sep 22, 2008.

0
  1. #1
    I'd be surprised if this hasn't been answered before, but I didn't find anything directly on point.

    Consider this little bit of code:

    <table>
    <tr>
    <td>
    <div style="width:200px;text-align:right">this is a test</div>
    </td>
    <td style="text-align:left;">
    of the EBN.
    </td>
    </tr>
    </table>

    It properly renders the two columns as a single sentence somewhat like

    ..........this is a test of the EBN

    If I add another row
    <tr>
    <td colspan="2">
    <div style="width:300px;">is ok</div>
    </td>
    </tr>

    the table continues to render properly, but if I change the div from 300 to 400

    <div style="width:400px;">is NOT ok</div>

    the entire table becomes much wider, and the left-justified second column in the first row is pushed way over to the right, so the result is something like

    ..........this is a test..........of the EBN
    is NOT ok

    This appears to be a problem only with IE (7: I haven't tested 6), not Firefox, Safari, or Chrome
     
    jrisken, Sep 22, 2008 IP
  2. jrisken

    jrisken Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    So the question is, (since I can't edit the message further!)

    Has anybody else seen this? Is there a CSS hack to make it work better?
     
    jrisken, Sep 27, 2008 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    The effect you're getting is correct and shows up in FF, IE and Safari, as expected. There are slight differences, as the specs don't specify just how certain things should be done, only that they should be done.

    When that second row exceeds the width of the top row, the upper row gets stretched to accommodate the difference. See Tables in HTML documents.

    View this simple comparison demo: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
         

  <title></title>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="text editor"
        content="Emacs 22" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/

  table {
    margin: 1.25em auto;
    }    

  td {
    border: 1px solid black;
    }

  div {
    border: 1px solid green;
    }

  /*]]>*/
  </style>
</head>

<body>
  <table summary="natural">
    <tr>
      <td>
        <div style="width: 200px; text-align: right;">
          this is a test
        </div>
      </td>

      <td style="text-align: left;">of the EBN</td>
    </tr>
   </table>
  <table summary="test">
    <tr>
      <td>
        <div style="width: 200px; text-align: right;">
          this is a test
        </div>
      </td>

      <td style="text-align: left;">of the EBN</td>
    </tr>

    <tr>
      <td colspan="2">
        <div style="width: 300px;">
          300px
        </div>
      </td>
    </tr>
   </table>
  <table summary="test">
    <tr>
      <td>
        <div style="width: 200px; text-align: right;">
          this is a test
        </div>
      </td>

      <td style="text-align: left;">of the EBN</td>
    </tr>

    <tr>
      <td colspan="2">
        <div style="width: 400px;">
          400px
        </div>
      </td>
    </tr>
   </table>
  <table summary="test">
    <tr>
      <td style="width: 200px; text-align: right;">
          this is a test
      </td>

      <td style="text-align: left;">of the EBN</td>
    </tr>

    <tr>
      <td colspan="2">
        <div style="width: 400px;">
          400px—no div in upper left td
        </div>
      </td>
    </tr>
   </table>
</body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Sep 27, 2008 IP