David and Phillippe,
The div#layout_AdBox p { margin-bottom: 0; } takes care of the problem. What I
don't understand is that it appears that my blue <div> is the object with the
margin-bottom as the gap that appears is on the outside of the blue div. How
does the margin-bottom:10px; on my <p> tags make a gap outside of the div?
Angela
>-----Original Message-----
>From: [email protected] [mailto:[email protected]
>discuss.org] On Behalf Of David Hucklesby
>Sent: Tuesday, August 07, 2012 6:56 PM
>To: [email protected]
>Subject: Re: [css-d] odd space appearing in IE8
>
>On 8/7/12 4:05 PM, Angela French wrote:
>> http://sbctc.edu/indexTESTAD.aspx
>>
>> There is an odd gap under the blue div that has the text in it that reads
>> "One System. 34 Colleges....." You can see the grid image that is a
>> background image for the content grid. I can fix it by dropping the
>> same gradient that is in my blue div in the content div also, but I'd
>> rather figure out what is causing the gap. It does not appear in IE7
>> or other browsers.
>>
>
>Yes. Webkit only AFAICT.
>
>The gap is the margin-bottom of 10px on the <p> that's poking through.
>
>You have several options:
>
>1. Add div#layout_AdBox { overflow: hidden; } 2. Add div#layout_AdBox {
>padding-bottom: 1px; } 3. Add div#layout_AdBox p { margin-bottom: 0; }
>
>Explanations:
>1. Overflow other than the default "visible" makes it a new block-formatting
>context. This behaves somewhat similarly to old IE "has Layout" property that
>your min-height declaration gives IE 7.
>
>2. The extra padding acts as a "fence" to contain the margin.
>
>3. This should be obvious. :)
>
>P.S. You can use other properties than "overflow" for #1:
> <http://www.css-101.org/block-formatting-contexts/index.php>
>--
>Cordially,
>David
>____________________________________________________________________
>__
>css-discuss [[email protected]] http://www.css-
>discuss.org/mailman/listinfo/css-d
>List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-
>discuss.org/policies.html
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
