Gary, On May 5, 2007, at 2:05 PM, Gary Benson wrote:
> Ok, so I'm trying to make a box with rounded corners by using > images for the top and bottom edges, but I'm getting big gaps > between the images and the <div> they surround. Check out > http://www.relaxshiatsu.co.uk/ to see what I mean. The HTML > looks like this: > > <div id="contentHead"></div> > <div id="content"> > <!-- stuff goes here --> > </div> > <div id="contentFoot"></div> > > The top and bottom <div>s are where the images are (in CSS). > Weirdly, the space is only present if I have block-level markup > like <p> in the content <div> -- the space disappears if I just > have this: > > <div id="contentHead"></div> > <div id="content"> > blah blah blah > </div> > <div id="contentFoot"></div> > > It's as though the <p>'s margin has extended beyond the <div> > it's in. But that doesn't happen, right? Sure it does. See these articles (and the wiki) about collapsing margins. <http://www.456bereastreet.com/archive/200408/ css_autoheight_and_margincollapsing/> and <http:// www.complexspiral.com/publications/uncollapsing-margins/> Your h1 and p elements have default margins applied. The div they live in has none. Since the div has no border/padding to keep the margins from 'touching', the h1 and p margins become the margins for the div. You can stop this effect by adding 1px padding or border to the div. #content { padding: 1px 10px; } hth -- Roger Roelofs ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
