HighDots Forums  

Img - bottom margin mystery

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Img - bottom margin mystery in the Cascading Style Sheets forum.

Reply
 
Thread Tools Display Modes
  #1  
Old   
John Dann
 
Posts: n/a

Default Img - bottom margin mystery - 03-30-2008 , 11:52 AM






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



Reply With Quote
  #2  
Old   
Ben C
 
Posts: n/a

Default Re: Img - bottom margin mystery - 03-30-2008 , 12:14 PM






On 2008-03-30, John Dann <news (AT) prodata (DOT) co.uk> wrote:
Quote:
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.


Reply With Quote
  #3  
Old   
Gus Richter
 
Posts: n/a

Default Re: Img - bottom margin mystery - 03-30-2008 , 02:12 PM



Ben C wrote:
Quote:
On 2008-03-30, John Dann <news (AT) prodata (DOT) co.uk> wrote:
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


Reply With Quote
  #4  
Old   
John Dann
 
Posts: n/a

Default Re: Img - bottom margin mystery - 03-30-2008 , 03:40 PM



Many thanks for the answers.

On Sun, 30 Mar 2008 15:12:55 -0400, Gus Richter
<gusrichter (AT) netscape (DOT) net> wrote:

Quote:
Or make the img vertical-align:bottom;
Seems to work for FF2 but not for IE7 AFAICS.

JGD


Reply With Quote
  #5  
Old   
John Dann
 
Posts: n/a

Default Re: Img - bottom margin mystery - 03-30-2008 , 03:47 PM



On Sun, 30 Mar 2008 21:40:21 +0100, John Dann <news (AT) prodata (DOT) co.uk>
wrote:

Quote:
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?


Reply With Quote
  #6  
Old   
dorayme
 
Posts: n/a

Default Re: Img - bottom margin mystery - 03-30-2008 , 06:53 PM



In article <0ggvu31c6pp0pe355anqqo97a5l4t2t1ot (AT) 4ax (DOT) com>,
John Dann <news (AT) prodata (DOT) co.uk> wrote:

Quote:
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


Reply With Quote
  #7  
Old   
John Dann
 
Posts: n/a

Default Re: Img - bottom margin mystery - 03-31-2008 , 04:20 AM



On Sun, 30 Mar 2008 15:12:55 -0400, Gus Richter
<gusrichter (AT) netscape (DOT) net> wrote:

Quote:
Or make the img vertical-align:bottom;
Just as a follow-up point here:

This solution works OK but I'm slightly surprised that an equivalent
space doesn't then appear at the top of the box (ie what one might
think of as an ascender space). It's as if by using
vertical-align:bottom then the bounding box is actually made shorter
(ie less tall) and not simply that the img is bottom-aligned rather
than top-aligned. Is this just how the browser engines are designed to
work, ie the process is not symmetrical top-to-bottom?


Reply With Quote
  #8  
Old   
Ben C
 
Posts: n/a

Default Re: Img - bottom margin mystery - 03-31-2008 , 05:18 AM



On 2008-03-31, John Dann <news (AT) prodata (DOT) co.uk> wrote:
Quote:
On Sun, 30 Mar 2008 15:12:55 -0400, Gus Richter
gusrichter (AT) netscape (DOT) net> wrote:

Or make the img vertical-align:bottom;

Just as a follow-up point here:

This solution works OK but I'm slightly surprised that an equivalent
space doesn't then appear at the top of the box (ie what one might
think of as an ascender space). It's as if by using
vertical-align:bottom then the bounding box is actually made shorter
(ie less tall) and not simply that the img is bottom-aligned rather
than top-aligned.
That's exactly what happens.

Quote:
Is this just how the browser engines are designed to work, ie the
process is not symmetrical top-to-bottom?
It is all in the CSS 2.1 specification but it's a bit of a nightmare.

That's why I suggested display: block. It also expresses more clearly
what you want since in your example there is no text nearby, you just
want the imgs to display like blocks.


Reply With Quote
  #9  
Old   
Michael Fesser
 
Posts: n/a

Default Re: Img - bottom margin mystery - 03-31-2008 , 07:06 AM



..oO(John Dann)

Quote:
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


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.