CSS: remove gap under image

Discussion in 'HTML' started by chlori, Jan 20, 2005.

  1. chlori

    chlori Guest

    chlori, Jan 20, 2005
    #1
    1. Advertising

  2. chlori wrote:

    > Hi
    >
    > There is a gap under the logo image (IE6/FF1):
    > http://www.arto.ch/tests/thinklab/index2.php
    >
    > How can I remove it?
    >
    > (The image is just an ugly dummy image...)


    Try adding a margin or padding attribute to the <p id="logo"> element, e.g.
    style="margin-bottom: 0px; padding-bottom: 0px". I am not sure about the
    names here, but it's the idea I hope to get across.

    Roy

    --
    Roy Schestowitz
    http://schestowitz.com
    Roy Schestowitz, Jan 20, 2005
    #2
    1. Advertising

  3. chlori

    Steve Pugh Guest

    chlori <> wrote:

    >There is a gap under the logo image (IE6/FF1):
    >http://www.arto.ch/tests/thinklab/index2.php
    >
    >How can I remove it?


    The <h1> has position relative. Remove that and add borders to the
    <h1>. What do you see? The bottom border of the <h1> coincides with
    the top of the nav strip.

    When you use position: relative the rest of the page is laid out as if
    that element had been in its static position.

    You've given the h1 a line-height of 60px so it has to be 10px taller
    than the 50px tall image. Hence there will be at least a 10px gap.

    Setting a pixel line-height is a bad idea - it causes problems when
    the font size is larger than that pixel value.

    Remove the line-height and the gap becomes much smaller.

    The remaining gap is due to the fact that images are treated as text
    and sit on the baseline of their line box. In this case this means
    that <p id="logo"> (BTW is that really a paragraph?) has space below
    the baseline just as it would if there was text in there. Set display:
    block for the logo <img> to remove.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Jan 20, 2005
    #3
  4. chlori

    chlori Guest

    Steve Pugh schrieb am 20.01.2005 12:19:
    > Remove the line-height and the gap becomes much smaller.


    Worked...

    > <p id="logo"> (BTW is that really a paragraph?)


    No, but the validator didn't like the image standing
    there alone when I changed from transitional to strict.

    Would a <div> be better? Or what else?

    > has space below the baseline just as it would if there
    > was text in there. Set display: block for the logo <img>
    > to remove.


    Thanks Steve!

    --
    chlori
    chlori, Jan 20, 2005
    #4
  5. chlori

    Richard Guest

    On Thu, 20 Jan 2005 11:58:30 +0100 chlori wrote:

    > Hi


    > There is a gap under the logo image (IE6/FF1):
    > http://www.arto.ch/tests/thinklab/index2.php


    > How can I remove it?


    > (The image is just an ugly dummy image...)



    <h> tags inherently include a break like a paragraph does.
    Instead of a <h> use "text-size:14pt".
    I prefer pt to px because a font is set up naturally in pt.
    Then for your images use img {margin;0px;}
    No dot or # before img.
    Personally, I like a little seperation between images and text.
    Richard, Jan 20, 2005
    #5
  6. .oO(Richard)

    ><h> tags inherently include a break like a paragraph does.


    Like every other block-level element.

    >Instead of a <h> use "text-size:14pt".


    Bigger text doesn't make a heading.

    >I prefer pt to px because a font is set up naturally in pt.


    The results across different browsers/platforms are unpredictable when
    using pt in screen stylesheets. What is 1pt on a screen?

    >Then for your images use img {margin;0px;}


    Images don't have margins by default, but since they are inline-level
    elements they are positioned on the baseline. Adjusting vertical-align
    helps in some cases.

    Micha
    Michael Fesser, Jan 20, 2005
    #6
  7. chlori

    ghoul Guest

    Richard wrote:

    > On Thu, 20 Jan 2005 11:58:30 +0100 chlori wrote:
    >
    >> Hi

    >
    >> There is a gap under the logo image (IE6/FF1):
    >> http://www.arto.ch/tests/thinklab/index2.php

    >
    >> How can I remove it?

    >
    >> (The image is just an ugly dummy image...)

    >
    >
    > <h> tags inherently include a break like a paragraph does.
    > Instead of a <h> use "text-size:14pt".
    > I prefer pt to px because a font is set up naturally in pt.
    > Then for your images use img {margin;0px;}
    > No dot or # before img.
    > Personally, I like a little seperation between images and text.



    sicko
    ghoul, Jan 21, 2005
    #7
  8. Blinky the Shark, Jan 21, 2005
    #8
  9. chlori

    Neal Guest

    ghoul <> wrote:

    > sicko


    plonko
    Neal, Jan 21, 2005
    #9
  10. chlori

    Toby Inkster Guest

    Michael Fesser wrote:

    > What is 1pt on a screen?


    It's 1/72 of an inch on a screen.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jan 23, 2005
    #10
  11. chlori

    Toby Inkster Guest

    Michael Fesser wrote:
    > Richard wrote:
    >
    >> Instead of a <h> use "text-size:14pt".

    >
    > Bigger text doesn't make a heading.


    Don't worry -- "text-size" won't make it bigger text either. ;-)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jan 23, 2005
    #11
  12. Toby Inkster wrote:
    > Michael Fesser wrote:
    >
    >>Richard wrote:
    >>
    >>
    >>>Instead of a <h> use "text-size:14pt".

    >>
    >>Bigger text doesn't make a heading.

    >
    >
    > Don't worry -- "text-size" won't make it bigger text either. ;-)


    LOL
    I think it doesn't matter as long as Richard thinks it will do this :)

    --
    www.daszeichen.ch
    remove nixspam to reply
    Bernhard Sturm, Jan 23, 2005
    #12
    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. Wayfarer
    Replies:
    2
    Views:
    412
    Toby A Inkster
    Sep 30, 2003
  2. Jeff
    Replies:
    2
    Views:
    620
    dorayme
    Jun 16, 2005
  3. chlori

    Gap in IE, no gap in FF

    chlori, Jan 19, 2006, in forum: HTML
    Replies:
    1
    Views:
    436
    kchayka
    Jan 19, 2006
  4. Replies:
    7
    Views:
    34,834
    forexad
    May 21, 2011
  5. Replies:
    14
    Views:
    2,703
    dorayme
    Aug 25, 2006
Loading...

Share This Page