I am unsure why this is happening as nothing in the developer tools is showing the body going over top of the white space. The only thing that shows over the white space is when I hover my mouse over the html in my source code, in the developer element tool.
I have the body margin set to 0, so I cannot figure out why I have a white space there.
Anyone have any ideas what is causing it?
<body>
<header class="header">
<div class="header_wrap">
<span class="nav-btn"></span>
<ul class="nav_list">
<a href="/"><li>Home</li></a>
<a href="Spray-Foam-Insulation-Material-Suppliers"><li>Spray Foam Insulation</li></a>
<a href="Portable-Spray-Foam-Kits"><li>Portable Spray Foam Kits</li></a>
<a href="Polyurea"><li>Polyurea</li></a>
<a href="Personal-protective-equipment"><li>Personal Protective Equipment</li></a>
<a href="Spray-Foam-Equipment-Financing"><li>Financing</li></a>
<a href="Contact-us"><li>Contact us</li></a>
</ul>
</div>
</header>
<div id="lower-header">
<div id="logo-wrap">
<a href="/"><img src="http://sprayfoamequipmentinsider.com/images/SFEI Logo & CSS/Spray Foam equipment insider 3.jpg" id="header-logo1"></a>
<a href="PMC-spray-foam-equipment"><img src="http://sprayfoamequipmentinsider.com/images/Contractor Images/top ad.png" id="header-logo2"></a>
</div>
<div id="topnav">
<ul>
<a href="Spray-Foam-Parts-Repairs-Techs"><li class="last">TECH/PARTS/REPAIRS</li></a>
<a href="Spray-Foam-school"><li>SPRAY FOAM SCHOOL</li></a>
<a href="Used-For-sale-Spray-Foam-Insulation-Rigs-Machines"><li>USED/BUY/SELL</li></a>
<a href="Spray-Foam-Rigs"><li>SPRAY FOAM RIGS</li></a>
<a href="Spray-Foam-equipment"><li>SPRAY FOAM EQUIPMENT</li></a>
</ul>
</div>
<br class="clear" />
</div>
body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#666666; background-color:#FFFFFF;}
.header {
margin: 0;
background-color: #333;
height: 50px;
}
.header_wrap {
text-align: center;
margin: 0 auto;
position: relative;
}
.nav-btn {
display: none;
}
.nav_list {
text-decoration: none;
background: #333;
color: #FFF;
list-style: none;
position: relative;
z-index: 1;
}
.nav_list > a {
display: inline-block;
padding: 15px 12px;
text-decoration: none;
transition: ease-in-out .5s;
}
.nav_list > a:first-child {
padding-left: 0px;
margin: 0;
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.1em;
color: #FFF;
}
#topbar {
display:block;
position:relative;
width:960px;
margin:0 auto;
}
/* ----------------------------------------------Header------------------------------------- */
#lower-header {
margin: 0 auto;
padding: 10px 0 20px;
z-index: 1;
color: #666666;
background: #000000;
border-bottom: 1px solid #363636;
width: 100%;
overflow: hidden;
}
#logo-wrap {
width: 960px;
margin: 0 auto;
}
#header-logo1 {
float: left;
width: 400px;
height: 93px;
}
#header-logo2 {
float: right;
width: 310px;
height: 75px;
}
#header-logo1, #header-logo2 {
border: none;
}
/*#lower-header h1, #header p, #header ul{margin:0; padding:0; list-style:none; line-height:normal;}*/
#topnav {
float: left;
padding-top: 22px;
width: 100%;
text-align: center;
font-size: 1.1em;
background: #000000;
font-family: Georgia, "Times New Roman", Times, serif;
}
#topnav li {
display: inline-block;
padding: 10px 12px 0 12px;
border-top: 2px solid transparent;
}
#topnav li:hover {
border-top: 2px solid #0C3;
color: #0C3;
}
#topnav a li {
color: #FFF;
line-height: 1.3em;
text-decoration: underline;
}
It's probably the default margins on ul.nav_list that are interfering by collapsing with its ancestors (up to and including body). Zeroing out those margins should fix it.