Sent by Big John on 22 November 2002 03:03
Anthony Baker wrote:
> Am having a problem with a CSS layout. It's essentially three DIVs
> that are stacked, one atop the other. The first two line up exactly
> bottom to top on both IE 6.0 for PC and Mozilla 1.1 for the PC, but
> the third DIV does not. On IE 6.0, there is a 2-pixel gap that is
> introduced between them, though they line up perfectly on Mozilla.
>
> If I introduce a "margin-bottom:-2px" into the second DIV, they will
> line up under IE 6.0, but it tweaks Mozilla.
> www.lifemoxie.com/home_02.php
> www.lifemoxie.com/code/css/layout.css
IE is placing the images on the baseline of their 'line boxes'.
There's a similar effect in Moz when viewing images in table cells.
The reason there is no gap between the first two blocks is that
the top block is taller than the image(s), allowing the top block
BG to mask the space. The gap down below is really the bottom bit
of the second block (below its baseline), and is transparent.
If the second block had a BG, the gap would assume that color.
The fix is to make the images 'display: block', then there can be no
line box, and so no baseline to cause trouble.
This will make the top images stack up, so to get them side by side
again, float them left.
HTH
Big John
=====
"What the world needs is a good bug ring"--Big John
<http://users.rraz.net/mc_on_the_rocks/testpage/pie.html>
__________________________________________________
Do you Yahoo!?
Yahoo! Mail Plus – Powerful. Affordable. Sign up now.
http://mailplus.yahoo.com
_______________________________________________
css-discuss [EMAIL-REMOVED]]
http://two.pairlist.net/mailman/listinfo/css-discuss
Sponsored by www.westciv.com - CSS resources | software | learning
