Sent by Zoe M. Gillenwater on 25 August 2006 14:02
ibn Ezra wrote:
> On Aug 24, 2006, at 23:10 PM, ibn Ezra wrote:
>
>> Hi,
>> I have two images stuffed inside a div that has a 4px border applied
>> top and bottom:
>>
>> Page Example:
>> http://covenantwoods.com/beta/index.php
>>
>> CSS:
>> http://covenantwoods.com/beta/_stylesheets/base.css
>>
>> Looks as expected in Firefox 1.5 (Mac/Win), Opera 9 (Win), Safari 2
>> (Mac) and validates at W3C... but IE 6 is adding an extra 4px of
>> whitespace between the bottom border and the images inside the div.
>> I've been so busy learning the CSS standards that I haven't gotten my
>> head around IE's particular way of looking at the CSS universe and
>> I'm not sure where to begin looking.
>>
>>
>
> Hmm,
> Well it's nice to know that I found my own answer to the problem! I
> had a single space between the opening and closing brackets of the
> div and the img link. Fixed!
>
> This:
> <div id="banner"><img src="/beta/images/banner-a_home.jpg" alt="Image
> of Couple" width="194" height="144" /><img src="/beta/images/banner-
> b_home-us.jpg" alt="Image of Leaves" width="610" height="144" /></div>
>
> Instead of this:
> <div id="banner"> <img src="/beta/images/banner-a_home.jpg"
> alt="Image of Couple" width="194" height="144" /> <img src="/beta/
> images/banner-b_home-us.jpg" alt="Image of Leaves" width="610"
> height="144" /></div>
>
> I thought that whitespace in the xhtml had no semantic meaning unless
> it was either within a tag or inside quotes. What gives with IE 6?
>
James,
The gap probably occurred because images are inline content and sit on
the baseline of their line box. Space can be seen beneath them to allow
room for descenders of letters to display. Perhaps getting rid of the
whitespace convinced IE that there would be no text in that box with the
image and it was safe to let it sit on the bottom. The usual CSS fix for
this problem is to apply either display: block or vertical-align: bottom
to the images. See
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
for more info on this.
On a bit of list business, please be sure to trim quoted material to
which you are not directly replying out of your replies to the list.
This is required by the list policies. We'd also appreciate it if you
refrained from top posting, as it disrupts the flow of conversation, but
this is not required. I've taken the liberty of fixing both your quoting
and posting order in my reply here.
Thanks,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
