Someone help a CSS newbie: why is there extra bottom padding on image?

am 04.07.2007 19:57:43 von Steve

Hi,

I've got a simple problem - I'm trying to position a logo in CSS with a 1px
border that has a padding of 1px, and a 1px margin. In IE6 it works fine,
but in Opera 9 or Firefox 2 the bottom border seems to have some extra
padding applied. The problem only occurs if the DOCTYPE declaration is in
place, without one everything is fine.

Here's my HTML:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

CSS Problem

And here's my CSS:
#logo {
float: left;
border: 1px solid black;
padding: 1px;
margin: 1px;
}

Can someone shed some light on this easy problem?

Thanks
steve

Re: Someone help a CSS newbie: why is there extra bottom padding on image?

am 04.07.2007 20:31:47 von Ben C

On 2007-07-04, steve wrote:
> Hi,
>
> I've got a simple problem - I'm trying to position a logo in CSS with a 1px
> border that has a padding of 1px, and a 1px margin. In IE6 it works fine,
> but in Opera 9 or Firefox 2 the bottom border seems to have some extra
> padding applied. The problem only occurs if the DOCTYPE declaration is in
> place, without one everything is fine.

Add div#logo img { display: block; }

The gap is because the img is inline, and so sits on the baseline, with
a gap underneath for descenders in the current font. But not in quirks
mode. But don't use quirks mode, instead make the img a block.

Re: Someone help a CSS newbie: why is there extra bottom padding on image?

am 05.07.2007 10:10:47 von Steve

"Ben C" wrote in message
news:slrnf8no28.6fr.spamspam@bowser.marioworld...
> On 2007-07-04, steve wrote:
>> Hi,
>>
>> I've got a simple problem - I'm trying to position a logo in CSS with a
>> 1px
>> border that has a padding of 1px, and a 1px margin. In IE6 it works fine,
>> but in Opera 9 or Firefox 2 the bottom border seems to have some extra
>> padding applied. The problem only occurs if the DOCTYPE declaration is in
>> place, without one everything is fine.
>
> Add div#logo img { display: block; }
>
> The gap is because the img is inline, and so sits on the baseline, with
> a gap underneath for descenders in the current font. But not in quirks
> mode. But don't use quirks mode, instead make the img a block.

Ahhh thanks... I knew little things like this would trip me up!