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 [css-d@lists.css-discuss.org]
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/
