IE 7 and below not rendering td cells correctly

gwh3 · Nov 1, 2009

Hi everyone,

I have table that I've styled with the following css code:

Code:

table#private {
width: 733px;
color: #333;
text-align: left;
}

table#private thead th {
background-color: #00274C;
border-bottom: 1px solid #EA2127;
font-weight: bold;
color: #fff;
}

table#private th {
padding: 0.5em;
}


table#private td {
padding: 0.2em;
}


table#private th, table#private td {
width: 86px;
}


table#private th#name {
	width: 152px;	
}

table#private th#addres {
	width: 151px;	
}

The width of the table is 733px. There are 7 columns in the table and I've given all of them a width of 86px with the exception of the first two columns where the first one has a width of 152px and the second one 151px.

This adds up to the table width of 733px.

It work in all browsers but not internet explorer 7 and below. In this browser the first two columns which are larger than the remaining ones, are both really narrow and the text is getting wrapped onto the subsequent lines.

I can't work it out since all other browsers render if perfectly - even internet explorer 8.

Does anyone know what's going on here?

Appreciate any help.

audiopro · Nov 1, 2009

I am not sure if your CSS is correct here but even if you enter the sizes directly into the HTML the widths are not guaranteed. Any cell will stretch to fit additional content and the over all width may exceed 733px.
We would need to see the HTML of the page to help you any further.

If this is tabular data, it is generally best to just allow the table cells to size themselves.
If it is not tabular data, divs are probably a better option.

Keith

http://www.studiosoft.co.uk

Vragabond · Nov 1, 2009

Try adding [tt]table-layout: fixed;[/tt] declaration to your table. This should force the browsers to respect the given widths.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

gwh3 · Nov 2, 2009

Hi,

I tried table-layout: fixed but no luck. Any other suggestions? Also not sure if the xhtml would help troubleshoot?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"><!--[/URL] InstanceBegin template="/Templates/inner.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled</title>
<!-- InstanceEndEditable -->
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" /> 
<link href="css/inner.css" rel="stylesheet" type="text/css" /> 
<!-- InstanceBeginEditable name="head" --> 
<link href="css/tables.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="SpryAssets/SpryData.js"></script>
<script type="text/javascript" src="SpryAssets/SpryCSVDataSet.js"> </script>
<!--<script type="text/javascript" src="SpryAssets/SpryPagedView.js"></script>-->
 
 
<script language="JavaScript" type="text/javascript">
<!--
var pageOffset = 0;
var pageSize = 10;
var pageStop = pageOffset + pageSize;
 
var dsHospPrivate = new Spry.Data.CSVDataSet("data/HospPrivate.csv", { filterFunc: MyPagingFunc, sortOnLoad: "Name", sortOrderOnLoad: "ascending" });
var dsHospPublic = new Spry.Data.CSVDataSet("data/HospPublic.csv", { filterFunc: MyPagingFunc, sortOnLoad: "Name", sortOrderOnLoad: "ascending"  });
 
function MyPagingFunc(ds, row, rowNumber)
{
        if (rowNumber < pageOffset || rowNumber >= pageStop)
                return null;
        return row;
}
 
function UpdatePage(offset)
{
        var numRows = dsHospPrivate.getUnfilteredData().length;
        
        if (offset > (numRows - pageSize))
                offset = numRows - pageSize;
        if (offset < 0)
                offset = 0;
 
        pageOffset = offset;
        pageStop = offset + pageSize;
 
        // Re-apply our non-destructive filter on dsStates1:
        dsHospPrivate.filter(MyPagingFunc);
 
} 
function UpdatePage2(offset)
{
        var numRows = dsHospPublic.getUnfilteredData().length;
        
        if (offset > (numRows - pageSize))
                offset = numRows - pageSize;
        if (offset < 0)
                offset = 0;
 
        pageOffset = offset;
        pageStop = offset + pageSize;
 
        // Re-apply our non-destructive filter on dsStates1:
        dsHospPublic.filter(MyPagingFunc);
 
} 
-->
</script> 
 

<!--<script type="text/javascript" src="js/striped_table.js"></script>--> 
 
<!-- InstanceEndEditable -->
</head> 
<body> 
<div id="fullWidthHeader"></div>
<div id="outerWrapper">
<div id="branding">
  <p>Affordable accomodation for the healthcare professional </p>
  
  <div id="nav_main">
<h2>Site areas</h2>
  <ul>
    <li id="nav_home"><a href="index.php">Home</a></li>
    <li id="nav_about"><a href="about.php">About us</a></li>
    <li id="nav_fees"><a href="fees.php">Fee structure</a></li>
    <li id="nav_packages"><a href="welcome_packs.php">Welcome packs</a></li>
    <li id="nav_directory"><a href="directory.php">Hospital directory</a></li>
    <li id="nav_area"><a href="local_area.php">Local area</a></li>
    <li id="nav_"><a href="location_map.php">Location map</a></li>
    <li id="nav_contact" class="last"><a href="contact.php">Contact</a></li>
  </ul>
</div>
</div>
<!-- InstanceBeginEditable name="Inner_content" -->
<div id="content_inner"> 
  <h2 id="hospital_directory">Hospital directory</h2>
  
    
 
  <div id="privRegion" spry:region="dsHospPrivate">
 
  <h3><a name="anchor_priv" id="anchor_priv"></a>Private Hospitals </h3>
  
    <p>
        <input type="button" value="Prev" onclick="UpdatePage(pageOffset - pageSize);" />
        <input type="button" value="Next" onclick="UpdatePage(pageOffset + pageSize);" />
        
</p> 
 
  <table id="private" cellpadding="0" cellspacing="0" summary="A list of private hospitals">
 <caption>Private Hospital List </caption>
  
 <thead>
  <tr>
    <th id="name" scope="col" spry:sort="Name"><a href="#">Name</a>
      </th>
    <th id="address" scope="col">Address</th>
    <th id="suburb" scope="col" spry:sort="Suburb"><a href="#">Suburb</a>
      </th>
    <th scope="col" class="centre">State
      </th>
    <th scope="col" class="centre">Postcode</th>
    <th scope="col">Phone</th>
    <th scope="col">Fax</th>
  </tr>
  </thead>
  
  <tbody>
  <tr spry:repeat="dsHospPrivate" spry:even="dsHospPrivate other" >
    <td>{Name}</td>
    <td>{Address}</td>
    <td>{Suburb}</td>
    <td class="centre">{State}</td>
    <td class="centre">{Postcode}</td>
    <td>{Phone}</td>
    <td>{Fax}</td>
  </tr>
  </tbody>
  
</table> 
 
</div> 

  <div id="pubRegion" spry:region="dsHospPublic">
   
  <h3><a name="anchor_pub" id="anchor_pub"></a>Public Hospitals </h3> 
    <p>
        <input type="button" value="Prev" onclick="UpdatePage2(pageOffset - pageSize);" />
        <input type="button" value="Next" onclick="UpdatePage2(pageOffset + pageSize);" />
        
</p> 
  <table id="public" cellspacing="0" summary="A list of public hospitals">
 <caption>Public Hospital List </caption>
  
 <thead>
  <tr>
    <th id="name" scope="col" spry:sort="Name"><a href="#">Name</a>
      </th>
    <th id="address" scope="col">Address</th>
    <th id="suburb" scope="col" spry:sort="Suburb"><a href="#">Suburb</a>
      </th>
    <th scope="col" class="centre">State
      </th>
    <th scope="col" class="centre">Postcode</th>
    <th scope="col">Phone</th>
    <th scope="col">Fax</th>
  </tr>
  </thead>
  
  <tbody>
  <tr spry:repeat="dsHospPublic" spry:even="dsHospPublic other" >
    <td>{Name}</td>
    <td>{Address}</td>
    <td>{Suburb}</td>
    <td class="centre">{State}</td>
    <td class="centre">{Postcode}</td>
    <td>{Phone}</td>
    <td>{Fax}</td>
  </tr>
  </tbody>
  
</table> 

</div> 
 
</div>
<!-- InstanceEndEditable --><div id="clearfooter"> </div> </div>
<div id="fullWidthFooter"><p id="site_info">© 2009. All rights reserved.&nbsp; &nbsp; <a href="terms_conditions.php">Terms and conditions</a> &nbsp;|&nbsp;  <a href="privacy_policy.php">Privacy policy</a> &nbsp;|&nbsp;  <a href="contact.php">Contact Us </a></p></div>
</body>
<!-- InstanceEnd --></html>

Vragabond · Nov 2, 2009

Your math does not work out. You have 7 columns and their sizes are:
[tt]
5 x 86px = 430px
+ 1 x 152px = 582px
+ 1 x 151px = 733px
[/tt]
Each cell however has an addition 1em of padding (0.5em padding on each side from the table header cells). Since table cells have to be positioned correctly in columns, this padding will have to play a role in all the cells. Now assume your m is 10px wide. This would mean 5px of padding on each side, 10px of padding all together. On every cell. 7 cells equals 70px extra.

733px + 70px (estimate on em to px conversion) = 803px.

You're instructing browsers to squeeze approximately 803px (not necessarily the same number because of the em to px difference, but definitely higher than 733px) into a 733px frame. At this point, the browser has to decide to start ignoring one of your numbers. Apprently, most browsers ignore the full width. However, IE apparently ignores the individual cell widths.

If you define the width and padding of each cell with CSS or in the first line of the table, why is there a need to specify the entire width of the table as well? If you stick to just the cells, table will end up being taking up the sum of all the cells.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

gwh3 · Nov 2, 2009

I thought you had to specify a width for the table element.

I tried your suggestion and removed the width:

table#private {
color: #333;
text-align: left;
}

I tested again, but still no luck. It's still not the working in ie 7 and below.

I can't work it out.

audiopro · Nov 2, 2009

Try with no cell widths at all, the table will form round the content. Set a table width to keep the table under control. If the content looks a bit squashed, introduce some padding.

Keith

http://www.studiosoft.co.uk

Vragabond · Nov 2, 2009

Do you have this example online somewhere? Also, have you tried adding [tt]table-layout: fixed;[/tt] back to the table declaration? I would like to see it not working correctly in IE7 with specified widths for columns.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

ChrisHunt · Nov 3, 2009

With some cutting and pasting, I get this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <title>Table Test</title>
  <style type="text/css">

table#private {
width: 733px;
color: #333;
text-align: left;
}

table#private thead th {
background-color: #00274C;
border-bottom: 1px solid #EA2127;
font-weight: bold;
color: #fff;
}

table#private th {
padding: 0.5em;
}


table#private td {
padding: 0.2em;
}


table#private th, table#private td {
width: 86px;
}


table#private th#name {
    width: 152px;    
}

table#private th#addres[red]s[/red] {
    width: 151px;    
}


  </style>
</head>
<body>
  <table id="private" cellpadding="0" cellspacing="0" summary="A list of private hospitals">
 <caption>Private Hospital List </caption>
  
 <thead>
  <tr>
    <th id="name" scope="col"><a href="#">Name</a></th>
    <th id="address" scope="col">Address</th>
    <th id="suburb" scope="col"><a href="#">Suburb</a></th>
    <th scope="col" class="centre">State</th>
    <th scope="col" class="centre">Postcode</th>
    <th scope="col">Phone</th>
    <th scope="col">Fax</th>
  </tr>
  </thead>
  
  <tbody>
  <tr>
    <td>{Name}</td>
    <td>{Address}</td>
    <td>{Suburb}</td>
    <td class="centre">{State}</td>
    <td class="centre">{Postcode}</td>
    <td>{Phone}</td>
    <td>{Fax}</td>
  </tr>
  <tr>
    <td>{Name}</td>
    <td>{Address}</td>
    <td>{Suburb}</td>
    <td class="centre">{State}</td>
    <td class="centre">{Postcode}</td>
    <td>{Phone}</td>
    <td>{Fax}</td>
  </tr>
  </tbody>
  
</table> 

</body>
</html>

It doesn't have the symptoms you describe in IE6, I haven't tried other browsers. Maybe there's some other rules in your stylesheet that are affecting it? Maybe some fix-for-IE6 code? I suggest searching your stylesheet for "* html" rules and checking if any apply.

Mind you, I also agree with audiopro - it would be better to set a width for the whole table and let the columns look after themselves.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

gwh3 · Nov 3, 2009

I've actually ended up solving it by removing the width from the td cells and just setting the width on the table itself, so thanks everyone for your input.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

IE 7 and below not rendering td cells correctly

gwh3

Technical User

audiopro

Programmer

Vragabond

Programmer

gwh3

Technical User

Vragabond

Programmer

gwh3

Technical User

audiopro

Programmer

Vragabond

Programmer

ChrisHunt

Programmer

gwh3

Technical User

Similar threads

Part and Inventory Search

Sponsor