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!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE 7 and below not rendering td cells correctly

Status
Not open for further replies.
gwh3

gwh3

Technical User
May 14, 2009
14
0
0
AU
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.
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
198
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
58
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
144
PeDa
PeDa
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
57
pendle666
pendle666
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
200
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top