SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    Breaking table layout.

    Ahoi hoi,

    I'm trying to make a table not behave like a table but IE just won't budge.
    Is it possible to make table cells display like normal block level elements in IE?

    2 attempts at it.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    /* Attempt 1 */
    table {
    	border-collapse: collapse;
    }
    tr { float: left; width: 100&#37; }
    td {
      clear: left;
    	float: left;
    	width: 100%;
    	border: 1px solid #000;
    	min-height: 1%;
    	position: relative;
    }
    /* Attempt 2 */
    table, tr, td { display: block; width: 100% }
    td { border: 1px solid #000 }
    </style>
    </head>
    
    <body>
    <table width="100%">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    Thanks,
    Last edited by markbrown4; Apr 1, 2008 at 00:39.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I'm guessing that IE once again breaks our balls with one..

    Short of absolutely positioning the td's I can't budge them

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe IE has some sort of hard-coding based on some element types, instead of using a real user-agent style sheet. Probably because it doesn't support the associated display values.

    If you set display:block for an LI element, you'll see that IE6 still displays the list marker, too (although it does support display:list-item).
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

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