[css-d] funny space on div in FF
Hello, I have a situation where I have a div id=content that follows a div id=navbar. FF shows a small space between the 2 div's, that is until I put a border around the div id=content. When I do, the div is pulled up flush with the top div with only the border in between. I've seen this behavior before but have never figured out why it happens. The reason it is a problem on this particular page is because I have a bg image that I need to be flush with the top div. You can see this behavior using FF at this address: http://tibbits.ca/test/Camprotary.ca/info.php If you use IE you can see that it looks the way I want it to. Have I made a mistake in the way I've coded this, or is FF behaving the way it is supposed to? I could put a border around it as a temporary fix, but then there would still be a 1px space between the top of the image (div id=content) and the top div (id=navbar). If anybody could point me in the right direction on this, I would much appreciate it. Thanks, Matt __ css-discuss [EMAIL PROTECTED] 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/
Re: [css-d] funny space on div in FF
On May 18, 2006, at 10:25 AM, Matt Tibbits wrote: I have a situation where I have a div id=content that follows a div id=navbar. FF shows a small space between the 2 div's, that is until I put a border around the div id=content. When I do, the div is pulled up flush with the top div with only the border in between. I've seen this behavior before but have never figured out why it happens. The reason it is a problem on this particular page is because I have a bg image that I need to be flush with the top div. You can see this behavior using FF at this address: http://tibbits.ca/test/Camprotary.ca/info.php it is a margin-collapse issue. The problem doesn't happen in IE because the container 'hasLayout' [1] which prevents the margin on the h1 from 'escaping'. Firefox, Safari, Opera, iCab, IE mac, and any browser that supports css 2.x reasonably all show this. Adding a border to the div in question fixes this as you discover; better could be: give the div a small padding (1px) or larger padding (1em) and then zero out the top margin on the h1. [1] http://www.satzansatz.de/cssd/onhavinglayout.html Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] 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/
Re: [css-d] funny space on div in FF
Matt Tibbits wrote:
I have a situation where I have a div id=content that follows a div
id=navbar. FF shows a small space between the 2 div's, that is until I
put a border around the div id=content. When I do, the div is pulled up
flush with the top div with only the border in between.
[ ... ]
http://tibbits.ca/test/Camprotary.ca/info.php
You're running into a problem with collapsing margins. Adjacent
vertical margins are combined into one, and placed at the top. When you
place the border there, the margins are no longer adjacent. It's the
margin from the H1 inside div#info whose margin is escaping. This can
be somewhat counterintuitive, but seems to be to spec:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
You can fix it simply with:
div#info h1 {margin-top: 0; padding-top: 1em;}
This reduces the offending margin to nothing and then adds back the
desired space as padding.
Cheers,
-- Scott Sauyet
__
css-discuss [EMAIL PROTECTED]
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/
