Someone help a CSS newbie: why is there extra bottom padding on image?
steve
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
<title>CSS Problem</title>
</head>
<body>
<div id="header">
<div id="logo"><img
src="http://newsimg.bbc.co.uk/media/images/42001000/gif/_42001036_bbc_logo_2.gif"
alt="Logo" /></div>
</div>
</body>
</html>
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
Ben C
> 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.
steve
news:slrnf8no28....@bowser.marioworld...
Ahhh thanks... I knew little things like this would trip me up!