| <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"> </td>
</tr>
<tr>
<td style="width: 65px;">
<h4><a href="/index.php?view=product&product_id=3348&option=com_products&Itemid=126">TRC6000</a></h4>
</td>
<td class="vr_border"> </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"> </td>
</tr>
<tr>
<td>
<h4><a href="/index.php?view=product&product_id=3354&option=com_products&Itemid=126">TRC6001</a></h4>
</td>
<td class="vr_border"> </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&product_id=3348&option=com_products&Itemid=126">TRC6000</a></h4>
</td>
<td class="vr_border"> </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"> </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.
|
|
|
