Table cell doesn't stick to height I'm trying to enforce

Question

I have a <td> that is just about empty since it only contains an  . The height I'm trying to enforce is 110 pixels, but for some reason the table cell is rendered with a height of 182.317 pixels. Why?

There are a few things I already checked:

• The font-size that applies to the non-breaking space isn't set to something that cannot fit into the table cell.
• There's no table cell on the same row that needs to stretch in order to fit its content into that cell.
• There's no piece of CSS code that overwrites the height I want with the inexplicable value of 182.317 pixels.

What else could be the culprit? The cell renders with the expected height in Chrome, but it messes up in Firefox 3.6. The rendering mode is XHTML 1.0 Strict (yes, I did validate).

Update: you can view and analyze the page at http://labs.pieterdedecker.be/vspwpg/. The <td> I'm talking about is leftbartop.

Answer 1

Do you have a line-height set for the table cells or somewhere in the cascade that affects it directly?

Answer 2

does it work if you say

{height:95px !important;}

Perhaps you have set padding or something like that that is affecting the td

Answer 3

Use Firebug and take a look at the cell via the element inspector. On the bottom right using Firebug, look at the style. Scroll down until you see an area where you are setting the height of the cell. If you still can't find it, try right click in the style area and adding it in the top most style selector.

Eventually you'll either find the culprit that is overwriting your styling, or you'll be able to find a class that you can use to overwrite the style that is being applied. You can also use Google Chrome's developer tools to do the same (just right click anywhere on the page and "inspect element" to bring them up).

Answer 4

You don't say which of the columns in the table has the issue. But, I suspect that it is:

<td id="bottombar2" colspan="2"></td>

The attribute colspan="2" tells the cell to be two rows high. Your rows are 95px, that would make it 190px high (roughly the height you are seeing).

Each row in your table specifies a different number of columns 5, 1 and 3. This might explain why the table is rendered differently by different browsers.