Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 05-30-2007, 12:04 PM mysterious gap
angele803's Avatar
Perfectly Imperfect

Posts: 1,774
Name: Stephanie
Location: Oklahoma
Trades: 2
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!
angele803 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 05-30-2007, 12:33 PM Re: mysterious gap
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Last edited by LadynRed; 05-30-2007 at 12:34 PM..
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 05-30-2007, 12:36 PM Re: mysterious gap
pealo86's Avatar
Super Spam Talker

Posts: 849
Name: Matt Pealing
Location: England, north west
Trades: 0
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!
pealo86 is offline
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
Old 05-30-2007, 12:38 PM Re: mysterious gap
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Not necessary to remove the div at all. The storeNav is meant to hold an include so it needs to be there.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 05-30-2007, 01:13 PM Re: mysterious gap
angele803's Avatar
Perfectly Imperfect

Posts: 1,774
Name: Stephanie
Location: Oklahoma
Trades: 2
Quote:
Originally Posted by LadynRed View Post
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!

Last edited by angele803; 05-30-2007 at 01:15 PM..
angele803 is offline
Reply With Quote
View Public Profile
 
Old 05-30-2007, 03:33 PM Re: mysterious gap
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to mysterious gap
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.23743 seconds with 12 queries