joshkrak
asked on
Firefox adding 1px in height to TD
Working on the header and using a table layout. The last cell is a dynamic cap type thing using a repeated space to fill in what the buttons dont take up. This last cell needs a solid 1px border around it. In IE6 is works, but in FF3 (these are the only browser I have to test on) it is adding 1px in height to the cell.. How can I get FF3 to make the cell the same height as the others. I don't have a problem with removing the table for divs if you can give me the working HTML with style included. Here is the current HTML I am using.
The page with the bug is live @ http://www.alolha.com
The page with the bug is live @ http://www.alolha.com
<div> <!-- NavBar -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td><a href="PicGallery.aspx"><img src="Images/MasterPage/btnGallery.png" alt="Gallery" border="0" /></a></td>
<td><a href="PicPage.aspx"><img src="Images/MasterPage/btnPics.png" alt="Pics" border="0" /></a></td>
<td><a href="PicUpload.aspx"><img src="Images/MasterPage/btnUpload.png" alt="Upload" border="0" /></a></td>
<td><img src="Images/MasterPage/btnMyPics.png" alt="MyPics" /></td>
<td style="width:100%; background-image:url('Images/MasterPage/RightNavSpacer.png'); border:solid 1px black;"></td>
</tr>
</table>
</div> <!-- End NavBar -->
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The problem was the space that the border occupied acted as an outline (thus being rendered outside the expected region and adding 1-2px height).
ASKER