<colspan> tag not working in firefox! GOING CRAZY!

[davidryder]

ok, this is insane. i have a page with the following code:

<table border=0 cellpadding=0 cellspacing=0 width="100%">

<!--this is row one, with a <hr> spanning all 3 columns-->
<tr><td colspan="3">
<hr style="height: 7px;border-style: solid;border-color: #000000;background: #000000;">
</td></tr>

<!--this is row two, with the two images. the first image spans 2 columns-->
<tr>
<td colspan="2" style="width:50%">
<img alt="site_logo" src="graphics/logo_left.gif"></td>

<td style="text-align:right;"><img alt="site_logo" src="graphics/logo_right2.gif"></td>
</tr>

<!--this is row 3, with white space in the first cell, and a <hr> in the last two cells-->
<tr>
<td colspan="1" style="width:14%">-</td>

<td colspan="2" width:86%">
<hr style="height: 7px;border-style: solid;border-color: #000000;background: #000000;">
</td>
</tr>

</table>

it looks fine in internet explorer. what i want is a <hr> at the top and a <hr> on the bottom that covers 86% of the table under the right two columns.

what it does in firefox is makes the bottom left <td> the width of the image in the row above it. if i remove the image tag, it works fine. i've tried variations on the html such as instead of using style tags just using <td width="86%">. i've also tried removing the <hr>'s, same effect. the only thing that gets this to work is removing the <img> or viewing it in internet explorer

the code looks perfect, and it displays perfectly in internet explorer. i even tried putting that first image in an <object> tag, does the same thing!

[SuzyUK]

Hi davidryder, and Welcome to WebmasterWorld!

first
<td colspan="2" width:86%">
should be
<td colspan="2" style="width:86%">

although as you've said you already tried other ways to apply width that's likely just a typo..

Then in the second row specify the 50% width on the right column instead of the left, the table is rendering row by row and by the second row it doesn't yet know about those 3rd rows overlap splits (14%, 36%, 50%;} and spans.

the confusion I think is coming from a colspan="2" @ 50% when it's never actually knows the widths of the columns it's spanning because that third row itself is another calculation

Who knows but changing from left to right seems to work!

[Lexur]

Oooppsss... SuzyUk did it really quick but
<td colspan="2" width:86%">
shouldn't be
<td colspan="2" width="86%">?

[edited by: Lexur at 11:00 am (utc) on Sep. 23, 2006]

[sonjay]

Firefox is struggling to understand what you want. You have two images, that by virtue of being images are a specific size and will take up only a certain amount of space. But you have your table specified to be 100% wide, so the containing table will take up the full width of the containing element. A td inside that table, set to 86% width, will be 86% of the width of the table, but an image inside that td will be whatever width the image is, not 86% of the width of the table. And you have your hr's set to be a percentage width of the table -- the width of the hr's has no connection to the width of the images.

A simple div with some basic css applied would probably do just what you want with much more manageable code. Note that this example is not tested and I didn't bother with proper syntax here, just bare indications of what should be set where -- it's just to give you an idea of how you could handle this:

<div border-bottom width:auto or width:img1width + img2width>
<img float:left><img float:left>
<hr width:86%; float:right;>
</div>