Table Colspan/Width Problem (IE only)

[flanakin]

I'm having the weirdest problem in IE 6. I have a very simple page that is being displayed wrong. There are 3 rows: 1 defining widths, 1 with a colspan=2 header, and the 1 with two cells representing the menu and body. I cut out all of the formatting and image fat to see if that was the issue, but it wasn't. Here's the HTML that causes the problem:

<table width="100%">
<tr><td width="151"></td><td></td></tr>
<tr>
<td bgcolor="gray" colspan="2">
This is just a really long string to
compress the body section of the table
</td>
</tr>
<tr>
<td bgcolor="green">menu</td>
<td bgcolor="blue">body</td>
</tr>
</table>

If anyone can figure out why IE has this problem I'd appreciate it. I have to have the first column with the specified width so it doesn't change on different pages. The second column doesn't have one so it will adjust with the page/browser width.

________________________________________
Michael C Flanakin
Indigo Web Systems

http://www.indigows.com

michael.flanakin@indigows.com

 

[ChrisHunt]

Ah, the joys of table-based layout Looks like IE is effectively treating the stated width as a minimum, and since you don't state a width for the other column it contracts it to reflect the low amount of content in it. With a bit more content in the right hand side it snaps back to where it should be:

  <td bgcolor="green">menu line</td>
  <td bgcolor="blue">the quick brown fox jumped over the lazy dog</td>

But that may be a bit hit-or-miss. I can think of two ways to fix it, one would be to use a spacer gif:

<table width="100%">
<tr><td width="151"></td><td [b]width="100%"[/b]></td></tr>
<tr>
  <td bgcolor="gray" colspan="2">
    This is just a really long string to 
    compress the body section of the table
  </td>
</tr>
<tr>
  <td bgcolor="green">[b]<img src="spacer.gif" width="151" height="1" alt="" /><br />[/b]menu</td>
  <td bgcolor="blue">body</td>
</tr>
</table>

Where [tt]spacer.gif[/tt] is a 1x1 pixel transparent image. Alternatively, since this behaviour only seems to manifest when the [tt]colspan=2[/tt] row is present, you could extract it into it's own table, or (better) a <div>:

<div style="width:100%; background-color:gray">
    This is just a really long string to 
    compress the body section of the table
</div>
<table width="100%">
<tr>
  <td width="151" bgcolor="green">menu line</td>
  <td bgcolor="blue">
     body
  </td>
</tr>
</table>

Does that help you out?

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk