Webkit keeps changing table's fixed width

Question

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.

I'm going to try bringing this up on my server to see if I can figure it out, give me a minute. What DOCTYPE is the document using? — Solo, Sep 20 '12 at 14:22
I put the code on my server and it works as you want. the table is 1000px and the td.left element is 200px. There is something you are missing. — Solo, Sep 20 '12 at 14:29

score 1 · Answer 1 · answered Sep 20 '12 at 14:14

1

Wow, don't use tables on such elementary script, go with divs:

<div style="width:1000px; background-color:#ffffff; float:left; clear: both;">
    <div style="width:200px; float:left;">
        Contents of the menu here.
    </div>
    <div style="width:800px; float:right;">
        Contents of website here.
    </div>
</div>

This should fix your problems.

answered Sep 20 '12 at 14:14

Peon

7,902
7
59
100

I'm pretty aware that everyone uses div's these days. I use them too and it was my first thought when I encountered the issue. Problem is that changing the structure of the website (from tables to divs) is probably going to take us quite a bit of time, especially if we want to get the CSS right. The website is very outdated, I'd rather spend that time on creating the new website. Nevertheless I'll try and put some time in figuring out how long it's gonna take. Thanks. – Rex Sep 20 '12 at 14:18
1

There is nothing strange in slowly adding div content to tabled website, especially, if you can get rid of some additional tables on the process. – Peon Sep 20 '12 at 14:22

score 1 · Accepted Answer · answered Sep 20 '12 at 14:23

1

I think the problem are the images in the righthand "sponsoren" table.

Setting min-width to the left table, and width:150px to the div-tag in the "sponsoren"-table, is working for me.

answered Sep 20 '12 at 14:23

svennergr

800
1
8
26

Problem then is, the pictures are overlapping to the right. Just set the min-width to the left, and change the width value of the "center" text-td from 640 to something like 490 or 495. – svennergr Sep 20 '12 at 14:27
The problem indeed had to do with those images. They were bigger than the container they were in, causing the whole page to behave oddly. The width bug is still active, but at least the left panel doesn't look so weird now. Thanks for your help! – Rex Sep 20 '12 at 20:02

score 0 · Answer 3 · answered Sep 20 '12 at 14:13

0

Try to add class class to your table and :

table.yourclass {
    width: 1000px !important;
}

answered Sep 20 '12 at 14:13

Fry_95

241
1
6

The table width is fine, it just changes when I try to forcibly correct the width of the internal elements. I already tried putting !important after the widths, but the problem is that Webkit claims it is following them, yet the calculated width is always different. – Rex Sep 20 '12 at 14:22
Yes, no effect. Only has effect if I set the display to block, but then the width attribute also has effect (and messes up the rest of the page, see original post). – Rex Sep 20 '12 at 15:03

Webkit keeps changing table's fixed width

3 Answers3