Table width in percents embedded in css layout

**ThaVincy** · Mar 9, 2009 10:21

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?

**ShawnsITSolution** · Mar 9, 2009 23:02

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.

**ThaVincy** · Mar 10, 2009 02:45

Originally Posted by ShawnsITSolution

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** · Mar 10, 2009 03:42

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% width of the div it resides in, in IE it simply spans across the entire width of the screen.

**ThaVincy** · Mar 10, 2009 05:17

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">

**ShawnsITSolution** · Mar 10, 2009 12:20

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.

User Tag List

Thread: Table width in percents embedded in css layout

Thread Tools

Display

Table width in percents embedded in css layout

Bookmarks

Bookmarks

Posting Permissions