Floated image sits 1 line above top of paragraph
Posted: Thu Jul 15, 2010 9:04 am
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
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