Bad Image in Firefox

July 6, 2004 1:39 PM

Could anyone tell me why the logo is broken up when I load this page in Firefox?
posted by grrarrgh00 to Computers & Internet (11 answers total)

The logo consists of three image slices, and the bottom slice is the one getting pushed down, thanks to the "inline image quirk."

In most modern browsers, images inherit the line-height of their parent element, causing unsightly white space when table hacks are used for layout. This can be solved with CSS, thusly:

img { display: block; margin: 0; }

(Nesting the img inside a properly id'd parent, of course.)
posted by brownpau at 1:47 PM on July 6, 2004

Logo looks fine to me (using Avant browser).
posted by davidmsc at 2:07 PM on July 6, 2004

Response by poster: Hmm, brownpau, that doesn't seem to be working for me (unless I'm doing it wrong ... properly id'd parent? Do I have to put the img in a div?).

The logo's also fine in IE. As you can see from the current home page, neither me nor my site-creating compadre knows enough about workarounds to make DIVs degrade well across browsers, so we had to resort to table-hacking.
posted by grrarrgh00 at 3:19 PM on July 6, 2004

If you look at it with table borders on, you can see there is extra space below the top image (as opposed to extra space above the bottom image). Could it have anything to do with the fact that the datestamp sits lower in Firefox than in IE?
posted by parrots at 3:58 PM on July 6, 2004

Response by poster: Well, i tried moving the datestamp up, and taking it out, and that didn't solve the problem. Hmm. Thanks for your help with this, folks.
posted by grrarrgh00 at 4:55 PM on July 6, 2004

This is a case where the CSS standard and classic browser behavior differ. This article has an explanation of the problem and a few work-arounds.
posted by reynaert at 5:36 PM on July 6, 2004

Aha, I finally got it. Try changing the line-height on the body to a lower number. It looks like 75% works best.
posted by smackfu at 5:42 PM on July 6, 2004

Actually, I think 0px works better. The 75% scales badly when you change the font size.
posted by smackfu at 5:44 PM on July 6, 2004

img {vertical-align: bottom;}

That fixes it too, as reynaert's link proscribes.
posted by smackfu at 5:52 PM on July 6, 2004

Response by poster: Yay!! You guys are the best.
posted by grrarrgh00 at 6:15 PM on July 6, 2004

Hm..it looks fine for me with both Firefox and Opera.
posted by salmacis at 3:30 AM on July 7, 2004