Welcome to WebmasterWorld Guest from 107.20.110.201

Forum Moderators: incrediBILL

Message Too Old, No Replies

<td> colspan throwing off following rows in IE

Tables fine in firefox, weird formatting in IE

     

dpinion

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

5+ Year Member



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

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month