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
<!-- m --><a class="postlink" href="http://test1.whatisgenius.com">http://test1.whatisgenius.com</a><!-- m -->
(FAQ or About Us).
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;
}Seems like the ROOT of the problem is in using tables where they do not belong...Thanks, Vladdy. Would you care to elaborate. The only reason I use tables at all is to accommodate older browsers. But perhaps your comment didn't have to do with using a tableless layout.
Anyway, I think I fixed the problem simply by removing the "valign=top" from the 1px height TD.
TimYes, my comment had to do with using tables for laying out your site.
As far as accomodating old browsers goes.... see my sig.
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
<!-- m --><a class="postlink" href="http://test1.whatisgenius.com">http://test1.whatisgenius.com</a><!-- m -->
(FAQ or About Us).
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;
}Seems like the ROOT of the problem is in using tables where they do not belong...Thanks, Vladdy. Would you care to elaborate. The only reason I use tables at all is to accommodate older browsers. But perhaps your comment didn't have to do with using a tableless layout.
Anyway, I think I fixed the problem simply by removing the "valign=top" from the 1px height TD.
TimYes, my comment had to do with using tables for laying out your site.
As far as accomodating old browsers goes.... see my sig.