Topic: Images causing gaps between elements

Hi there chaps!

It's been a while since I was on this end of a thread in the CSS part of the Asylum but I've got a niggly problem that I feel the collective here could give me great insight into.

If you will, please direct yourself to www.varenne.co.uk and notice that in teh left hand column there is a large 368x368 image and just underneath a navigation module.

The navigation is described using the unordered list element, and that aside there's not much going on here to make this part of the site special. The problem I'm having is that on Firefox there always seems to be a 1px or so gap between the large page image and the navigation. I've tried playing around with padding and margins, and as you'll notice if you look at the code I removed all carriage returns in an attempt to remove that line, this fixed it for IE which previously was just as bad.

Any clues, hints, or slander?

TIA,

Cheers,

img {
	vertical-align: bottom;
}

edit:
Here's the relevant literature (in case someone wants to bite my head off again for being glib or something):
http://www.w3.org/TR/REC-CSS2/visuren.html#inline-formatting
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

(Edited by reisio on 06-06-2005 11:21)

Hahah well said...

But thanks! That was exactly the trick I needed, seems strange that having a centered image adds padding to the bottom, I noticed that aligning the image 'top' also worked that same way.

I owe you a beer!

Cheers,

I dunno... those links seemed awful glib to me...

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

/me cires
edit: and misspells

(Edited by reisio on 06-07-2005 05:22)