We are in the process of redoing our whole website. The current website is over 7 years old, but seems to have a CSS bug that only appears in Webkit-based browsers (Chrome and Safari). We would like to fix that bug as it may take a while before the new site is ready.
We have a table with fixed width:
<table width="1000" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td class="left" width="200" valign="top">
Contents of the menu here.
</td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
Contents of website here.
</table>
</td>
</tr>
</table>
The CSS of the relevant elements and classes is as follows:
td {
font-size: 11px;
}
td.left {
width: 200px;
padding-top: 50px;
background-color: #EFEFEF;
}
td.top {
height: 16px;
align: right;
padding-bottom: 2px;
}
The issue is that Webkit calculates the td with class left to be 161 pixels instead of 200 pixels. I can resolve this issue by adding either style="display: block" or style="min-width: 200", but when I do that, Webkit resizes the first table to 1039 pixels rather than 1000, causing the rest of the page to shift all over the place. It seems to totally ignore the fixed width requirements.
I would like to know if there is a way to fix this without drastically changing the structure of the website. If you need to, you can play around with the CSS on the website in question. Note that the bug only appears in Chrome and Safari. I have checked many bug reports for Webkit and many Stack Overflow questions, but none of them seem to quite match my problem.
