How do I remove the extra pixels underneath tables?

mozillaman,

I'd try adding a CSS class to the "bottom" table that would give it a negative top margin. That way you'd be "pulling" that table up to flush with the table above it. As you've seen, though, you're going to be fighting browser capabilities, so you may end up using a variety of "hacks" to make it behave properly.

Perhaps enclosing each table in a separate div and then applying the style parameters to the divs would be more reliable. Also, if you can get away with absolute positioning, you can effectively force the divs (or the tables) to be exactly where you want them to be.

I hope this helps,
ric

Thanks rcastagna.

I'll try wrapping each table 'round a div and see what happens, before I conclude this and "distribute points".

I did more studying on this question...and found out more about it. In XHTML strict mode, this problem happens when a picture inside a table is set at the exact same as the table. There is this little bit of "padding" beneath the image that I don't know how to remove.

I would like to know how to fix this without weird hacks such as setting negative margins/padding.

Thanks,

mm

bump. I found out what the real problem was! In XHTML strict mode, if an image's style is not set to display: block than 3-4 extra pixels show underneath. rcastagna you did not help me in the way I wanted, but to show appreciation I'll award you the points. :)

The headline of this question should have been:

"How do I remove the extra 3 pixels underneath an image inside a table cell?"

The simple solution is to give the image the style "display: block", because an image that is not part of a text line should be styled as a block level element.

Another solution is to remove all whitespace between the cell element and the image element, but I would consider this bad practise.

This problem mostly appears on Internet Explorer (in standards-compliant mode) which - correctly - aligns the image (which is an inline element per default) with the baseline of the text line it appears on, even though the rest of the line only consist of whitespace. To reserve space for letters that go beyond the baseline (like j, g and y) 3 pixels (depending on font size) is left underneath the image, and appears as forced padding.

Firefox for instance doesn't display this problem because it - arguable incorrectly - automatically displays a lone image as a block level element.

Click here to see the Answer Discussion that preceded this summary.

Login to rate this summary: Good  |  Bad

Problem: Image in XHTML Strict mode has 3 pixels underneath it, impossible to remove.

Solution: Not impossible. Set the image's style to display: block and it will work fine.

Click here to see the Answer Discussion that preceded this summary.

Login to rate this summary: Good  |  Bad