By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,705 Members | 2,017 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,705 IT Pros & Developers. It's quick & easy.

Img - bottom margin mystery

P: n/a
Don't know whether anyone might be willing to take a look at a little
CSS problem that's stumping me. There's a page fragment at:

http://www.weatherstations.co.uk/default_test.htm

and the item giving the problem is the clouds image (which has
deliberately been duplicated as a further check.)

The question is why there seems to be a bottom margin of white space
to the clouds image (in IE7 and FF2.0.12 at least) when AFAICS all
the relevant margins, padding etc are set to zero in the stylesheet.

I'd like to try to understand what's generating this specific problem
if anyone can offer an explanation please.

JGD
Mar 30 '08 #1
Share this Question
Share on Google+
6 Replies


P: n/a
On 2008-03-30, John Dann <ne**@prodata.co.ukwrote:
Don't know whether anyone might be willing to take a look at a little
CSS problem that's stumping me. There's a page fragment at:

http://www.weatherstations.co.uk/default_test.htm

and the item giving the problem is the clouds image (which has
deliberately been duplicated as a further check.)

The question is why there seems to be a bottom margin of white space
to the clouds image (in IE7 and FF2.0.12 at least) when AFAICS all
the relevant margins, padding etc are set to zero in the stylesheet.

I'd like to try to understand what's generating this specific problem
if anyone can offer an explanation please.
It's because imgs are display: inline, so they sit on the baseline like
text, with a bit of space below them for descenders.

Make the img display: block.
Mar 30 '08 #2

P: n/a
Ben C wrote:
On 2008-03-30, John Dann <ne**@prodata.co.ukwrote:
>Don't know whether anyone might be willing to take a look at a little
CSS problem that's stumping me. There's a page fragment at:

http://www.weatherstations.co.uk/default_test.htm

and the item giving the problem is the clouds image (which has
deliberately been duplicated as a further check.)

The question is why there seems to be a bottom margin of white space
to the clouds image (in IE7 and FF2.0.12 at least) when AFAICS all
the relevant margins, padding etc are set to zero in the stylesheet.

I'd like to try to understand what's generating this specific problem
if anyone can offer an explanation please.

It's because imgs are display: inline, so they sit on the baseline like
text, with a bit of space below them for descenders.

Make the img display: block.
Or make the img vertical-align:bottom;

--
Gus
Mar 30 '08 #3

P: n/a
Many thanks for the answers.

On Sun, 30 Mar 2008 15:12:55 -0400, Gus Richter
<gu********@netscape.netwrote:
>
Or make the img vertical-align:bottom;
Seems to work for FF2 but not for IE7 AFAICS.

JGD
Mar 30 '08 #4

P: n/a
On Sun, 30 Mar 2008 21:40:21 +0100, John Dann <ne**@prodata.co.uk>
wrote:
>Seems to work for FF2 but not for IE7 AFAICS.
Whoops - too quick off the mark! It worked immediately on a page
refresh in FF2, but not immediately in IE7. But when I closed IE7
fully and reopened it then it did work. Is the cache for the CSS file
more persistent in IE7 than the cache for the html file?
Mar 30 '08 #5

P: n/a
In article <0g********************************@4ax.com>,
John Dann <ne**@prodata.co.ukwrote:
The question is why there seems to be a bottom margin of white space
to the clouds image (in IE7 and FF2.0.12 at least) when AFAICS all
the relevant margins, padding etc are set to zero in the stylesheet.

I'd like to try to understand what's generating this specific problem
if anyone can offer an explanation please.

<http://tinyurl.com/2x3t8f>

--
dorayme
Mar 30 '08 #6

P: n/a
..oO(John Dann)
>Whoops - too quick off the mark! It worked immediately on a page
refresh in FF2, but not immediately in IE7. But when I closed IE7
fully and reopened it then it did work. Is the cache for the CSS file
more persistent in IE7 than the cache for the html file?
Sometimes you have to force IE to really reload all external resources.
A simple ctrl-r doesn't work always, sometimes you have to press ctrl
and hit the refresh button in the toolbar. At least it worked this way
in IE 6.

Micha
Mar 31 '08 #7

This discussion thread is closed

Replies have been disabled for this discussion.