[XHTML+CSS] margin between IMG and a border

[Damien Debin]

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

 

[Steve Pugh]

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

 

[Jan Faerber]

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

and what about

div { height: 600px; }

???

 

[Steve Pugh]

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