Table w/ 2 TDs; 1 rowspan; can't valign=top! 5px gap

[timware]

Hello,

I have a table with two TDs. I want the first TD to just be 1px in height; the 2nd TD has a rowspan of 2 and contains the main content. Row 2 then has the navigation, which will appear pretty much adjacent to the content area. I get a nice tight valign top in that 1px-height TD with Safari, but with IE on Mac and IE and NS on Windows, the 1px TD in the first row actually renders at about 5px and I can't see how to tighten it up.

You can see this at <Sorry, no personal details. See TOS [webmasterworld.com]>

Is there a way to get this working, either with style sheets or html?

Here's a skeletal look at the table in question:

<table id="subTable">
<tr>
<td valign=top>[1px spacer gif]</td>
<td valign=top rowspan=2>[main content]</td>
</tr>

<tr>
<td>[left-side navigation]</td>
</tr>
</table>

Style for the table:

#subTable {
padding:0;
border:0;
width:760px;
}

#subTable th {
padding:0;
border:0;
border-right:1px solid #fff;
background:#646873;
}

#subTable td {
padding:0 30px 10px 25px;
background:#ffecc7;
line-height:17px;
font-size:12px;
text-indent:0;
}

/* Below is to fix the problem I describe */

#subTable td#navFix {
padding:0;
height:1px;
background:url(/images/bg_orangeStripe.gif);
background-repeat:repeat;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}

[edited by: tedster at 6:38 pm (utc) on Mar. 31, 2004]

[EBear]

This is an old problem. There's lots of threads around here on it but when I last looked (about 8 months ago) I couldn't find a solution other than to make sure your navigation cell is longer/higher than the main content cell. You can do this by adding breaks but you'll need to add a different amount for each page, depending on the content.

The cause: if the spanning content cell is larger than your navigation + your 1 pixel cell, then the extra space is divided propotionately between the two cells on the left. Since the top one is very small (1 pixel) it only gets a very small amount of space, but it does get some.

[timware]

Yeah, I've come across the problem before, but each time I do I think, There *must* be a fix for this! But you're right, the only solution I've found is as you mentioned although, instead of using a bunch of <br> or <p>s, I just put a <div style="height:500px;"></div> after the left navigation to diminish the allocation to that 1-px space.

Thanks.

Tim

[MozMan]

The only other way around this is to embed tables, but this opens another can-o-worms as there is more overhead involved in painting embedded tables. If your page is not terribly large, then it shouldn't be a problem, but if you are delivering a lot of data on the page, then you may slow down the load noticably. In any case, it might look something like this:

<table>
<td>
<table>
<tr>
<td valign=top height=1>[1px spacer gif]</td>
</tr>
<tr>
<td valign=top>[main content]</td>
</tr>
</table>
<td>[left-side navigation]</td>
</table>