[XHTML+CSS] margin between IMG and a border

Discussion in 'HTML' started by Damien Debin, Nov 22, 2004.

  1. Damien Debin

    Damien Debin Guest

    Hi,

    I need some advice/help to put an image just above a dashed border,
    without any gap.
    Test page is http://ddebin.free.fr/test/test.html
    You can see a gap at the bottom of the page between the image and the
    border, I want to get rid of it... I can't understand how it can work
    for the top border and not for the bottom border.
    (I don't want to use the CSS "border" attribute of the IMG tag).
    You can see this problem with Firefox (1.0) but not with IE... I hope
    it's not a bug of firefox.

    Please, help me :)

    Damien
     
    Damien Debin, Nov 22, 2004
    #1
    1. Advertising

  2. Damien Debin

    Steve Pugh Guest

    On Mon, 22 Nov 2004 14:53:39 +0100, Damien Debin <> wrote:

    > I need some advice/help to put an image just above a dashed border,
    > without any gap.
    > Test page is http://ddebin.free.fr/test/test.html
    > You can see a gap at the bottom of the page between the image and the
    > border, I want to get rid of it... I can't understand how it can work
    > for the top border and not for the bottom border.


    You need to set either
    img {display: block;}
    or
    div {line-height: 0;}

    A div that contains inline content, such as text or an image, has a
    minimum height equal to its line-height property. What's more any images
    will sit on the baseline of the implied line box which leaves some space
    below it.
    By converting the image into a block or by setting the line-height to zero
    you can avoid his problem.

    > (I don't want to use the CSS "border" attribute of the IMG tag).


    Why not? Is having the border continue into the empty space besides the
    image an important part of the design.

    > You can see this problem with Firefox (1.0) but not with IE... I hope
    > it's not a bug of firefox.


    Problem also occurs in Opera. When Opera and Gecko agree and IE disagrees,
    the smart money is put on IE being the one in the wrong.

    Steve
     
    Steve Pugh, Nov 22, 2004
    #2
    1. Advertising

  3. Damien Debin

    Jan Faerber Guest

    Steve Pugh wrote:

    > On Mon, 22 Nov 2004 14:53:39 +0100, Damien Debin <> wrote:
    >
    >> I need some advice/help to put an image just above a dashed border,
    >> without any gap.


    > You need to set either
    > img {display: block;}
    > or
    > div {line-height: 0;}


    and what about

    div { height: 600px; }

    ???



    --
    Jan

    http://html.janfaerber.com
     
    Jan Faerber, Nov 23, 2004
    #3
  4. Damien Debin

    Steve Pugh Guest

    On Tue, 23 Nov 2004 01:03:30 GMT, Jan Faerber
    <> wrote:
    >Steve Pugh wrote:
    >> On Mon, 22 Nov 2004 14:53:39 +0100, Damien Debin <> wrote:
    >>
    >>> I need some advice/help to put an image just above a dashed border,
    >>> without any gap.

    >
    >> You need to set either
    >> img {display: block;}
    >> or
    >> div {line-height: 0;}

    >
    >and what about
    >
    >div { height: 600px; }


    Works sometimes - works if the images is big (i.e. bigger than the
    default line-height, which of course depends on ther user's default
    font size which is unknown to the author) and so works in this case;
    but won't work for small images.

    Steve
     
    Steve Pugh, Nov 23, 2004
    #4
    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. Kelwin Delaunay

    img alignment in xhtml strict and css

    Kelwin Delaunay, Apr 17, 2004, in forum: HTML
    Replies:
    4
    Views:
    10,854
    Kelwin Delaunay
    Apr 17, 2004
  2. Feliks Dzerzhinsky

    CSS/XHTML page border

    Feliks Dzerzhinsky, Sep 14, 2004, in forum: HTML
    Replies:
    7
    Views:
    7,118
    Jim Higson
    Sep 15, 2004
  3. Cal Who
    Replies:
    1
    Views:
    441
    Alexey Smirnov
    May 16, 2010
  4. Cal Who
    Replies:
    4
    Views:
    584
    Cal Who
    May 17, 2010
  5. Markus Fischer
    Replies:
    0
    Views:
    416
    Markus Fischer
    Nov 22, 2005
Loading...

Share This Page