CSS Forum

**angele803** · 05-30-2007, 12:04 PM

I am working on this site. Someone else did most of the coding. I am trying to work out some bugs and put all of our content into the new layout. I am having a problem with a weird white gap above the main navigation.
Here is a link to one of the pages: http://www.motorxtremes.com/corp/aboutus.html

The code:

Code:

<body>
<div id="container">

	<div id="topnav"><!--#include virtual="/ssi/companyLinks.txt"--></div>
	
	<div id="header"><img src="/images/logo_black.gif" alt="Logo" border="0" /></div>
	<div id="nav"><!--#include virtual="/ssi/productLinks.txt"--></div>
	<div id="storeNav"></div>


<div id="sidebar">
	<h2>Top Sellers</h2>
	<ul>
		<li>Sicilian 150</li>
		<li>Tornado 200</li>
		
		</ul>

	<h2>Learn About Us</h2>
	<a href="#">Company</a>
	</div>
	<div id="content">
	<h1>About Us</h1>
	 <p>MotorXtremes is an importer of motor sport vehicles including <a href="../adultatvs/index.html">ATVs</a> (4-wheelers), <a href="../dirtbikes/index.html">Dirt Bikes</a>, <a href="../scooters/index.html">Scooters</a> and <a href="../motorcycles/index.html">Motorcycles</a>. We import these units and sell directly to the consumer via the Internet out of our warehouse as well as our retail stores located in Oklahoma City, OK. We visit China regularly to find the best quality products available. We feel after 4 years we have found the best for you and combining these great products with our service we have become the #1 spot for ATVs and scooters on the web.</p><br />
      <p>After 4 years running strong we have served over 20,000 customers nationwide during this time. We could go on and on about how great we are and we do feel we are the best in the business but if you truly want to experience a good online transaction go check out our feedback under the <a href="fans.html">Raving Fans</a> section. </p><br  />
      <p>As you can see we want you to know who we are and put a face to the names of the people that will make your transaction a success. We are proud of several things we've done, however, we are extremely proud of the fact that we have continued to pursue excellence in how we treat our customers in helping them the best we can. We're not perfect but we continue to get better and better and give you the service that is required to get our customers to come back for more products we offer.&nbsp; Word of mouth is the best form of advertising and the least expensive one at that!</p><br />
    <p>Thanks and please feel free to call our toll free number at 866-693-4110 or email us at <a href="mailto:sales@motorxtremes.com">sales@motorxtremes.com</a> for any questions you may have. Call now so we can help. Take a look at whom you're dealing with by clicking on the following <a href="corp.html">employees pictures.</a></p>
	</div>	


<div id="footer">
	<h6>&copy; 2006. Motorxtremes, LLC. </h6>
      <ul>
        <li><a href="http://www.motorx1.web.cedant.com/mm5/merchant.mvc?Screen=CTGY&amp;Store_Code=MOTW&amp;Category_Code=A7">ATVs</a></li>
        <li><a href="http://www.motorx1.web.cedant.com/mm5/merchant.mvc?Screen=CTGY&amp;Store_Code=MOTW&amp;Category_Code=S3">Scooters</a></li>
        <li><a href="http://www.motorx1.web.cedant.com/mm5/merchant.mvc?Screen=CTGY&amp;Store_Code=MOTW&amp;Category_Code=M0">Motorcycles</a></li>
        <li><a href="http://www.motorx1.web.cedant.com/mm5/merchant.mvc?Screen=CTGY&amp;Store_Code=MOTW&amp;Category_Code=DBY">Dirt Bikes</a></li>
      </ul>
	</div>
	
	
	


</div>
	
</body>

The CSS:

Code:

body {
	margin:0;
	padding: 0px;
	background: #999999;
	font: small "Lucida Grande", Verdana;
}

h1 {
	color: #2a73f8;
	font: normal 200% "Georgia", Times, serif;
	padding-bottom: 0.5em;
	text-transform: capitalize;
	padding-top: 0.5em;
	margin: 0;

}

p {
	margin: 0;
	padding: 0;
}

h2 {
	margin-left: 0;
	margin-bottom: 2px;
	margin-right: 0;
	margin-top: 2px;
	color: #247bec;
	padding: 0;
	font-size: 110%;
	font-weight: normal;
}

h4 {
	font-size:110%;
	color:#000000;
	margin: 0px;
	padding: 0px;
 } 
 
#container{
	margin:auto;
	width: 899px;
	background: white;
	}
	
#container #header{
	margin: 0;
	background:#000000; 
	height: 70px;
	width:100%; 
}

#container #nav {
     font-size:90%;
     margin:0;
     padding: 0;
     width:auto;
     height:26px;
     background: black;
}

#container #nav ul{
	margin-left:1em;
	margin-top: 0;
	padding:0;
	list-style:none;
	}
	
#container #nav ul li {
	border-right: #CCC solid 1px;
	padding-left: .7em;
	padding-bottom: 5px;
	padding-right: .7em;
	padding-top: 3px;
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 4px;
	margin-top: 5px;
	background-color: #E1E1E1;
	float:left;
	display:block;
	}
#container #nav ul li:hover {
	background-color: white;
	}
#container #nav a {
	color: #252525;
	text-decoration: none;
	}
#container #nav a:hover {
		color: #3b61f8;
	}
#storeNav {
	margin: 0px;
	padding: 0px;
	width: 900px;
	height: 22px;
	background: #CCCCCC url(../images/bar_shade.png) repeat-x top;
}
#storeNav ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#storeNav ul li {
	margin: 0px;
	padding-top: 4px;
	padding-bottom: 4px;
	float: right;
	border-left: thin solid #CCCCCC;
}
#storeNav ul li:hover {
	background: white url(../images/bar_shade_hover.png) repeat-x top;
	padding-top: 4px;
	padding-bottom: 4px;
	}
#storeNav a {
	font: normal 12px Tahoma;
	color: #0066CC;
	text-decoration: underline;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 4px;
	padding-top: 4px;
	font-weight: bold;
}
#storeNav a:hover {
	color: black;
	text-decoration: none;
	font-weight: bold;
}

#container #topnav{
	font-size: 80%;
	height: 34px;
	background: black;
	overflow:auto;
	}

#container #topnav ul{
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 0;
	margin-top: 2em;
	padding:0 .2em;
	list-style:none;
	}
	
#container #topnav ul li{
	margin-right: 1em;
	padding:0 .2em;
	float:right;
	display:block;
	}
#container #topnav a {
	text-decoration: none;
	color: gray;
	}
#container #topnav a:hover {
	color: white;
	}
#container #sidebar {
 	padding-right: .5em;
 	float:right;
 	color: #333333;
 	min-height: 400px;
	width:180px;
 	padding-bottom: 1em;
 	padding-top: .5em;
 	padding-left: .7em;
 	margin-top: 1em;
 }
#container #ads {
	float: left;
	width:15%;
	padding-right: .5em;
 	color: #333333;
 	min-height: 400px;
 	padding-bottom: 1em;
 	padding-top: .5em;
 	padding-left: .5em;
 	margin-top: 1em;

	}
#container #content {
 	float:left;
 	width:630px;
 	margin-top: 1em;
 	margin-left: .5em;
 	text-align:left;
	padding-left: .5em;
	padding-bottom: 60px;
 }
#container #scooter_content {
 	float:left;
 	width:680px;
 	margin-top: 1em;
 	margin-left: .5em;
 	text-align:left;
	padding-left: .5em;
	padding-bottom: 60px;
	background: url(../images/scooter_index.jpg) no-repeat left top;
 }

 .scooter_index {
 	float:left;
 	width:60%;
 	margin-top: 1em;
 	margin-left: .5em;
 	text-align:left;
	padding-left: .5em;
	padding-bottom: 60px;
	background: url(../new_images/sc_index.jpg) no-repeat top;
 }
 

#container #gutter {
	width: 20px;
	float:left;
}
#footer {
	background:#000000 no-repeat;
	margin: 0px;
	padding-left: 6px;
	height: 50px;
	width: 894px;
	clear: both;
	color: gray;
}
#footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
#footer ul li {
	float: left;
	margin-right: 1.5em;
	padding: 0;
	}
#footer h6 {
	font-family: Georgia;
	margin-left: 1em:
	margin-top:.3em;
	padding: 0;
	}
#footer a {
	color: gray;
	text-decoration: none;
	}
#footer a:hover {
	color: white;
	}

I thought it was some kind of margin somewhere, but I cant find anything.

Thanks for any help you can give me!

**LadynRed** · 12:34 PM

Hey Stephanie,
You're getting the lovely margin collapse - which is NOT a bug, but it can be annoying. Simple fix though. Add this to #nav:
padding-top: 1px;

Gap goes away.

Here's a bit more on what Margin Collapse:
http://www.complexspiral.com/publica...psing-margins/
http://www.andybudd.com/archives/200...gin_for_error/

By the way, I noticed you've got a lot of rules like this: #content #header -- you really don't need to do that, the #header on it's own is specific enough.

**pealo86** · 05-30-2007, 12:36 PM

try removing this:
<div id="storeNav"></div> near the top, as theres nothing inside it.

I keep getting the same sort of problems constantly, ive only recently started learning CSS, i didnt know it was so stressful!

**LadynRed** · 05-30-2007, 12:38 PM

Not necessary to remove the div at all. The storeNav is meant to hold an include so it needs to be there.

**angele803** · 01:15 PM

Quote:

Originally Posted by LadynRed

Hey Stephanie,
You're getting the lovely margin collapse - which is NOT a bug, but it can be annoying. Simple fix though. Add this to #nav:
padding-top: 1px;

Gap goes away.

Here's a bit more on what Margin Collapse:
http://www.complexspiral.com/publica...psing-margins/
http://www.andybudd.com/archives/200...gin_for_error/

By the way, I noticed you've got a lot of rules like this: #content #header -- you really don't need to do that, the #header on it's own is specific enough.

Thank you so much! That works perfectly. That is so strange. Thank you for the links to the explanation too. I am about to go read those. I really appreciate it.

I didn't think we needed to be so specific with the rules like "#content #header blah blah blah." When I started on the CSS, I wasnt that specific. Then the guy working on this with me took over the CSS and added all of that. I guess he wants to be thorough! lol!

Thank you for your help too KkillgasmM. I need that div there for the reason LadynRed said. It will hold an ssi in the future. But I appreciate you trying to help me!

**LadynRed** · 05-30-2007, 03:33 PM

Yes, margin collapse had me pulling hair a few times too, and it's not a bug !

Quote:

I guess he wants to be thorough!

Actually, all he's doing is adding more work ! That and he may not understand specificity very well.