Topic: Firebird padding quirk (Page 1 of 1)

http://www.11oh1.net/test/nextest.html

This is a page I did real quick for a friend. I wanted to show him that a design he did using tables could be done completely with CSS. Everything looks OK and works in IE and Firebird except underneath the photo Firebird is insisting on adding more padding than I want.

The div is called "borderboxdiv" and here's the CSS for it:

#borderboxdiv {
width: auto;
text-align: center;
border: 1px solid gray;
margin: 5px;
padding-top: 5px;
padding-bottom: 5px;
}

Even if I remove the "padding-bottom" Firebird still puts the extra pixels in there. Am I missing something here?

:::11oh1:::

2 things I would try off the top of my head -

- on the #borderboxdiv img, change the border thickness to an absolute u/m - It shouldn't effect it, but I've seen the 'medium' and other such terms cause odd behavior.

- also on the #borderboxdiv img, try adding 'margin:0 auto; padding:0;'

Nope, those didn't seem to make any difference at all.

This is such a simple layout, it totally boggles me as to what might be causing this.

:::11oh1:::

line-height: 0;

seems to work.

Yep. Thanks HZR.

That's a strange quirk.

:::11oh1:::

Ahhh.....yes.

Had that issue a few times as well with NN/Mo/FB

Sorry to drag this thread up again, but I felt the need to point out that this is not a quirk, but actually the correct behavior for handling images.

Images are inline elements, and as such, the bottom edge of the image sits on a baseline, the same one used for text. The extra space Firebird is adding is reserved for the descenders of letter such as "y" and "g." Applying "display: block" to the image should have much the same effect as setting line-height to 0.

I often wondered about that. Thanks for the clarification ozphactor.

Yes, very helpful Oz.