HTML table positioning (subtle)

Question

Hi all

I am working on http://www.qxl.dk/ and I am experiencing a problem. If you compare the spacing between the leftmost column and the center column to the spacing between the center and the rightmost column, you'll see that they are different by at least 10 pixels.

The spacing has been done by using a table layout with a 10px wide TD as the gutter on the left, and a 9 px wide TD as the gutter on the right. But as you can see, it isn't working properly. I've been hunting for a stray padding or margin clause somewhere, but I haven't found it.

All ideas are appreciated!

(oh, and I am painfully sorry about the site's use of tables for layout - not my choice)

Answer 1

It seems to be the "Varer i dit nærområde" box header and its content:

.contentsStaticLeft_dk (linie 381)

{

background-image: url(/contents/dk/images/forside/contentsStaticLeft.gif); background-repeat: repeat-y; padding-top: 5px; padding-right: 19px; padding-bottom: 0px; padding-left: 15px;

}

The web developer toolbar is great for finding out stuff like this.

Answer 2

Add table-layout: fixed to the main table. In my perception this is just like hasLayout kind of magical fairy dust to remedy all table problems. Seems to work with your site according to Firebug.