SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table width in percents embedded in css layout

    Hi all,

    I experience a problem when I place a table in a css layout I've made. It works fine in FF, but in IE it seems like there is an unclosed div or something, as the page gets completely ripped open so the submenu disappears to the right. You can see the problem here.

    Does this have anything to do with my table width, specified in percents? Maybe IE thinks I mean a table width of 100% of my page in stead of 100% of the div it resides in?
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me ask you a question.

    If you are using it inside of a DIV and the div is a fixed width then why don't you use a fixed width with the table.

    But either way, that should not do it, the table should fill up 100% of the slot it resides in. If this is till causing an error in IE, then you can use IE hacks in order to specify that specific page CSS or table elements for that page.

  3. #3
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ShawnsITSolution View Post
    Let me ask you a question.

    If you are using it inside of a DIV and the div is a fixed width then why don't you use a fixed width with the table.
    The div does not have a fixed width. It is set to "grow" according to screen resolution of the visitor.

    This is the code:

    Code HTML4Strict:
    <table width="100%" align="center">
      <tr class="tablehead"> 
        <td>user name</td>
        <td><div align="center">type</div></td>
        <td><div align="center"><img src="gui/icon_user_edit.png" width="16" height="16"></div></td>
        <td><div align="center"><img src="gui/icon_user_delete.png" width="16" height="16"></div></td>
      </tr>
      <tr> 
        <td><strong>Stef Verbeeck</strong></td>
        <td width="70"><div align="center">admin</div></td>
        <td width="20"><div align="center"><img src="gui/icon_user_edit.png" width="16" height="16"></div></td>
        <td width="16"><div align="center"><img src="gui/icon_user_delete.png" width="16" height="16"></div></td>
      </tr>
    and so on ...

    This is the css used:

    Code CSS:
    table{
    width:90%;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 40px;
    font-size: 11px;
    }
     
    tr.tablehead {
    background-color: #495058;
    height: 35px;
    }
     
    tr.tablehead td {
    color: #ffffff;
    padding: 5px;
    font-weight: bold;
    }
     
    thead th {
        padding:1em 1em .5em;
         border-bottom:1px dotted #FFF;
         text-align:left;
    }
     
    td{
    padding:8px;
    }
     
    tbody tr.odd td {
    background: #FCFCFD;
    }
     
    * html tr.odd td
    {
        background:#FCFCFD;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tr_bg.png', sizingMethod='scale');
    }
     
    #middle
    {
        background-color:#900;
    }
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  4. #4
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Grrrrr. This is so stupid. I tried everything, from removing all table variables in html to removing all css used for tables. And the result is always the same: the table won't take 100&#37; width of the div it resides in, in IE it simply spans across the entire width of the screen.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  5. #5
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed by using a different doctype:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well there I didn't see a CSS tag for the table it self, is it actually nested in another div ID?

    I just saw the div class for the inside of the table.


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
  •