Welcome to WebmasterWorld Guest from 54.196.244.45

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
posts:75
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
posts:3928
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

joined:Sept 4, 2001
posts:2143
votes: 7


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members