Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Mozilla's nasty habits

unwanted gaps around images in pixel perfect table layout

7:27 pm on Sep 2, 2001 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 27, 2000
votes: 0

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.

8:58 pm on Sept 2, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
votes: 0

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... ;)

5:22 am on Sept 4, 2001 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
votes: 36

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.