homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
<td> colspan throwing off following rows in IE
Tables fine in firefox, weird formatting in IE
dpinion




msg:4151202
 1:58 pm on Jun 11, 2010 (gmt 0)

This is yet another "looks fine in firefox but not in IE" post. I am trying to modify a simple table and all of this should be boringly simple, yet I am missing something. Here is my html:

<table style="width: 400px;">
<tbody>
<tr>
<td colspan="3">
<h3 style="text-decoration: underline;"><strong>Customer-Driven Solutions</strong></h3>
</td>
</tr>
<tr>

<td colspan="3">With a choice of chassis, processor board, drives and options, Trenton will work directly with your system engineers to create a customer-driven solution designed to meet application specific requirements.</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td style="width: 65px;">
<h4><a href="/index.php?view=product&amp;product_id=3348&amp;option=com_products&amp;Itemid=126">TRC6000</a></h4>
</td>
<td class="vr_border">&nbsp;</td>
<td>
<ul>
<li>19" Rackmount Enclosure</li>
<li>18.2" depth</li>

<li>Choice of Single Board Computers</li>
<li>14 or 20-slot backplane</li>
<li>Supports full-length I/O cards</li>
</ul>
</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td>
<h4><a href="/index.php?view=product&amp;product_id=3354&amp;option=com_products&amp;Itemid=126">TRC6001</a></h4>
</td>

<td class="vr_border">&nbsp;</td>
<td>
<ul>
<li>19" Rackmount Enclosure</li>
<li>Lightweight Aluminum Chassis with a 20.1" depth</li>
<li>Choice of Single Board Computers</li>
<li>20-slot backplane</li>
<li>Features four, hot swap power supplies</li>
</ul>
</td>
</tr>
</tbody>

</table>


This section:
<tr>

<td colspan="3">With a choice of chassis, processor board, drives and options, Trenton will work directly with your system engineers to create a customer-driven solution designed to meet application specific requirements.</td>
</tr>


when entered in causes IE to throw extra space between my first and second cells in the following row (and every row below it with three cells per row):

<tr>
<td style="width: 65px;">
<h4><a href="/index.php?view=product&amp;product_id=3348&amp;option=com_products&amp;Itemid=126">TRC6000</a></h4>
</td>
<td class="vr_border">&nbsp;</td>
<td>
<ul>
<li>19" Rackmount Enclosure</li>
<li>18.2" depth</li>

<li>Choice of Single Board Computers</li>
<li>14 or 20-slot backplane</li>
<li>Supports full-length I/O cards</li>
</ul>
</td>
</tr>


If I take this section out it looks fine. Any ideas what might be happening?

PS. Removing:

<tr>
<td colspan="3">&nbsp;</td>
</tr>

has no effect

 

tedster




msg:4151372
 6:17 pm on Jun 11, 2010 (gmt 0)

Turning on borders for the table (using border="1") I see that the space IE is adding is in the first cell of each row. The W3C spec does allow browsers a lot of leeway in how they interpret the width "suggestions" the author marks-up, to avoid conflicts that could cause crashes. In this case style="width: 65px;" is being overruled by the browser.

I think you can fix it by adding
style="width:100%;" for the third table cell.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved