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

Discussion in 'HTML' started by steve, Jul 4, 2007.

  1. steve

    steve Guest

    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
     
    steve, Jul 4, 2007
    #1
    1. Advertising

  2. steve

    Ben C Guest

    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.
     
    Ben C, Jul 4, 2007
    #2
    1. Advertising

  3. steve

    steve Guest

    "Ben C" <> wrote in message
    news:...
    > 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!
     
    steve, Jul 5, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dan
    Replies:
    1
    Views:
    8,426
    ainigma
    Apr 4, 2008
  2. Noozer
    Replies:
    1
    Views:
    7,254
    Carolyn Marenger
    Mar 13, 2006
  3. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,270
    Smokey Grindel
    Dec 2, 2006
  4. Cuthbert
    Replies:
    8
    Views:
    466
    Ancient_Hacker
    Sep 13, 2006
  5. Disc Magnet
    Replies:
    1
    Views:
    615
    123Jim
    Jun 22, 2010
Loading...

Share This Page