Page 1 of 1

Floated image sits 1 line above top of paragraph

Posted: Thu Jul 15, 2010 9:04 am
by batfastad
Hi everyone
This is a very strange one.

I have an image that I want to have floated to the left or right of some text. The text is all contained within paragraph <p> tags.
But when I float the image, the top of the image appears about 1 line height above the top of the first paragraph.

Here's the example...
http://thenetzone.co.uk/cssfail/imgfloat-table.html
Now what's strange is that this only seems to happen in FF on WinXP (3.6.6)
When viewed in IE7, the top of the image and the top of the paragraph are perfectly in line with each other.

But... If I remove the layout table, then it works fine in both FF and IE7!
http://thenetzone.co.uk/cssfail/imgfloat.html

Anyone got any ideas what's going on there?

I could solve this by adding 15px of border-top or padding-top to the image, which would push the actual top of the image level with the top of the paragraph... but that's a bit of a fudge.
Or I could place the image inside the paragraph tag but then for long images such as this one the next paragraph will be booted way down.

Any ideas?

Cheers, B

PS: I'm aware tables are terrible for layout and I've not actually used them for years! But our content management system sends out e-mail newsletters and the most consistent way to get our layout working across e-mail clients has been to use tables for the layout :(

Re: Floated image sits 1 line above top of paragraph

Posted: Thu Jul 15, 2010 9:47 am
by batfastad
Ok it seems like Firefox is adding a default margin-top of 1em, setting that to 0 seemed to fix it!
Hope this helps someone out

Cheers, B