CSS Trouble: border on a div is too short

Border does not reach the top of the div

[ginko]

Hello everyone,

This is my first post here on WebmasterWorld.com. I've often been able to find excellent advice just by searching previously. But this time, I'm stumped.

I have a div which extends through the main part of the body and it should have a 1px border running on the left and right side of this div (called "main"). However, the border stops short at the top in Mozilla. It needs another couple of pixels to read the bottom of the "navcontainer" div. I've zeroed the margins for both the "navcontainer" and "main" divs. I've zeroed the margins for the header div (which is above the navigation one) and for content and menu divs, which fall below. But the border still does not reach the top.

Here is my (messy) css and part of the index that deals with this problem:

index:

<div id="main">
<div id="menu">
div id="menutitle">
Random Photo</div>
<div id="rotate"><a href="#"><img src="rotate.php" alt="A Random Image" /></a></div>
</div>
</div>

css:

body {
font-family : Verdana, sans-serif;
background-color: #ffffff;
text-align: center;
font-size:12px;
color: #000000;}

#navcontainer {
margin-top: 0;
background-color: #A00703;
padding: 3px;
border-bottom: 4px solid #ECB306;
}

#main {
margin-top: 0;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
min-height: 100%;
}

#menu {
position: relative;
float: left;
width: 180px;
left: 20px;
padding: 0px;
background-color: #fff;
text-align: left;
color: #666;
font-size: 95%;
line-height: 105%;
margin-top: 0;
}

#content {
width: 400px;
margin-left: 280px;
background-color: #fff;
text-align: left;
margin-top: 0;
}

The navcontainer contains the navigation for the side and uses lists. As they are contained within the navcontainer div, do the margins there also need to be zeroed?

I hope somebody understands what I mean here. If you'd like to check what the page looks like right now, please see look at <No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

Thanks for any help!

[edited by: SuzyUK at 9:49 am (utc) on Feb. 13, 2005]

[SuzyUK]

Hi ginko - Welcome to WebmasterWorld!

It sounds very much linke it might be collapsing margins [w3.org]

See: this thread msg #31 {part 9) [webmasterworld.com] for an overview.. vertical gaps in borders (or background color) is an indicator..

if you put * {padding: 1px 0;} at the top of your stylesheet and the "gaps" close then it is. If that does work then you might like to find the affected div ~ "main"? ~ and try putting the padding on just it.

if not the give us a shout back
Suzy