Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Someone help a CSS newbie: why is there extra bottom padding on image?

Reply
Thread Tools

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

 
 
steve
Guest
Posts: n/a
 
      07-04-2007
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:
<!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


 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      07-04-2007
On 2007-07-04, steve <(E-Mail Removed)> 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.
 
Reply With Quote
 
 
 
 
steve
Guest
Posts: n/a
 
      07-05-2007
"Ben C" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On 2007-07-04, steve <(E-Mail Removed)> 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!


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Why 'display: inline' and 'padding-bottom: 1px' is bad for makingtabs? Disc Magnet HTML 1 06-22-2010 09:45 AM
css "div" bottom of window or bottom of content. Dan HTML 1 04-04-2008 09:40 AM
findcontrol("PlaceHolderPrice") why why why why why why why why why why why Mr. SweatyFinger ASP .Net 2 12-02-2006 03:46 PM
CSS to put text at bottom of browser window, or page bottom, whichever is lower? Noozer HTML 1 03-13-2006 10:35 AM
(QUESTION) lining up border-bottom with padding-left:0.5em Steve Pugh HTML 3 02-11-2005 07:31 PM



Advertisments