quote:

To conclude try messing with this (done off top of my head so no guarantees:)

display: block;
margin: 0;
border: 0;
padding: 0;

quote:

ORIGINAL: Giomanach

Mhaircaish, you are almost right my furry friend, you missed the px off, and for total lack of margins you need:

margin: 0px 0px 0px 0px;

Dan

Signature self-censored to protect the sensibilities of the thin-skinned .

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower

(in reply to Giomanach)

quote:

ORIGINAL: gorilla

Your problem lies with how line height is interpeted. you also need to remember that IMG is an inline element.


For example in Mozilla in 'standards (i.e. non-quirks) mode', the line-height of a parent block level element specifies a 'minimal' line height for any inline content. Ergo IMG will have a line-height of at least that of it's parent.

If the image is smaller than the line-height, then there will be space above the image. However, this is normally only a problem for very small images, and can be got round by specifying a line-height of zero on the parent element. Moreoever inline elements are (by default) vertically aligned on the baseline of a line box.

On the other paw, IE, when rendering a block level elememt will, if the block element contains only inline replaced elements such as IMGs will (by default) align them with the bottom of the line box.

You can try explicitly specifying 'vertical-align:bottom;' on the IMG it should lose any bottom space. I don't guarantee this will work as I've had variable results to put it mildly.

Some reading material for you:

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-line-height

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

Of course you can then have the problem of what do you to allow space for descender strokes to be rendered correctly for example in a <td> or <layer> one possible solution is this:

{ vertical-align: bottom; }

But that can lead to huge cross browser problems. You have to remember that layers were a proprietary "extension" dreamed up by some whizz kid in Netscape who should have (IMO) been immediately defenestrated before word got around about them. Alas that didn't happen, what also didn't happen is that support for has never really been fully integratred into the spec. Where line-height is greater than image height you may have to use

display: block;


To conclude try messing with this (done off top of my head so no guarantees:)

display: block;
margin: 0;
border: 0;
padding: 0;


Eric Meyer has done some work on this, and written one of his usual very clear articles about how this particular box model works, link to it is here:

http://www.meyerweb.com/eric/css/inline-format.html

Finally I have to ask - In the interests of avoiding weeping, wailiing, gnashing of teeth, and loud utterings of naughty words, why not just use lists and set the bullet type?

Mhaircaish