Images as block-level elements

Mozilla and Netscape 6+ display images as inline elements with a standard line-height — even in pre-sized table cells. That means spacer GIFs and table-sliced graphics may not display the way you want them to. The fix involves using CSS to declare the image as a block element rather than inline, but you’ll find that the hack messes up the layout for IE-users who are used to adding a <br> line break right after the image to avoid unsightly gaps.

The solution is to remove the extra <br>, and declare the image a CSS block-level element with margin-bottom: 0px. This way, excessive space beneath the image baseline is removed in all instances, and all browser engines are happy campers. (Except Netscape 4.x, but that hasn’t been a happy camper since the late 90’s anyway.)

Alternatively, you can also use the style declaration as a class in your linked CSS file, then use the class in your img tag. Or better yet, just stop using table cell hacks for your layouts.

(This is the kind of stuff that grows on you after working all day with six different browsers open on your desktop. What fun.)