#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    Midrand, South Africa
    Posts
    154
    Rep Power
    18

    Angry Width: 100% & Overflow: auto in IE7


    It always amazes me how Microsoft can mess something up that was working before. Take the following example, a table cell set to a specific width, containing a div, width set to 100% of its containing block element (the table cell). Overflow:auto is applied to the div and content is placed in the cell that cannot be wrapped. See the code that follows:

    html4strict Code:
     
    <table width="200px" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td style="width: 200px;">
          <div style="width: 100%; overflow: auto;">
            <p style="white-space: nowrap;">Content that should not be wrapped.</p>
          </div>
        </td>
      </tr>
    </table>


    One would expect to have the table cell display with a width of 200 pixels and scrollbars will be displayed for the un-wrappable content.

    IE7 does not do that. It widens the cells width to accommodate the content. FF follows this perfectly. To fix this, one has to set the div to the same width as the table cell, like so:

    html4strict Code:
     
    <table width="200px" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td style="width: 200px;">
          <div style="width: 200px; overflow: auto;">
            <p style="white-space: nowrap;">Content that should not be wrapped.</p>
          </div>
        </td>
      </tr>
    </table>


    Only then, IE7 will correctly display it. Just something to keep in mind when working with percentage widths.
    Neil Craig
    Software Developer
    SourceCode Techonolgy Holdings Inc
    South Africa
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Which doctype are you using?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    Midrand, South Africa
    Posts
    154
    Rep Power
    18
    XHTML 1.0 Transitional
    Neil Craig
    Software Developer
    SourceCode Techonolgy Holdings Inc
    South Africa
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    Midrand, South Africa
    Posts
    154
    Rep Power
    18
    I'm bumping this thread to see if anyone can assist. Someone else also have a similar question
    Neil Craig
    Software Developer
    SourceCode Techonolgy Holdings Inc
    South Africa

IMN logo majestic logo threadwatch logo seochat tools logo