Mozilla's nasty habits

unwanted gaps around images in pixel perfect table layout

[alexjc]

If you're using a table for the layout of your page, and you have images in there, you might be in for a nasty surprise in Mozilla... it has a frustrating tendency of doing things nothing like what the CSS says.

Some of my tips to get rid of those gaps:

• Force align=left for problematic images.
  
• Set vspace="0"
  
• Don't let your design rely on pixel perfect layout!
  

Any other tips welcome, i've got a few cases that these tricks can't fix.

[mivox]

I haven't done a "pixel perfect" layout in a while, just because it becomes such a hassle...

<big pain in the rear>
One thing I found, if you really want a perfect, complex table, is to make sure every single table cell has its height and width set to an exact pixel size, and create an 'extra' row 1 px high, and an 'extra' column 1 px wide... then place a clear gif in each of the 'extra' cells with it's width or height set to 1 px, and its second dimension set to exactly the width/height that row/column is supposed to be.
</big pain in the rear>

Creates miles of extra garbage code, and a huge hassle if the page ever needs to be changed, but it'll keep your table in place in every browser I ever tested it in.

But I think throwing away the idea of table-grid-pixel-perfect designs is a much less aggravating route to take... ;)

[Marshall]

With Netscape, when you're placing an image in a data cell, the <td><img> and </td> all have to be on the same line in your HTML. If not - if you use the return/enter key between the three, Netscape sees it as a space and will add a gap equal to the default font setting. I found this out by accident. So try <td><img information></td> all on the same line and see if it corrects the problem.