 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / March 2008Img - bottom margin mystery
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 > 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: [quoted text clipped - 10 lines] > 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. >> 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: [quoted text clipped - 15 lines] > > Make the img display: block. Or make the img vertical-align:bottom;  SignatureGus Many thanks for the answers. >Or make the img vertical-align:bottom; Seems to work for FF2 but not for IE7 AFAICS. JGD >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? .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 >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? >>Or make the img vertical-align:bottom; > [quoted text clipped - 6 lines] > (ie less tall) and not simply that the img is bottom-aligned rather > than top-aligned. That's exactly what happens. > 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. > 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> Signaturedorayme |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.