Navigation bar vertical padding problem

harvs899 · 11-04-2012, 01:01 AM

Basically I have a div with ID 'mainnav', inside this I have an unordered list with ID of 'unorderednav', problem being: if I set mainnav's height to auto, then I go to set the top and bottom padding of the mainnav, when it isn't set there is no space obviously, however when it is set regardless of the values there is a big space between the unorderednav and the top and bottom of mainnav

Pictures to illustrate;
http://www.sendspace.com/filegroup/I...rQ1XHhBX%2F63g

Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home - William Holstein Professional Tree Services</title>
    <link rel="stylesheet" type="text/css" href="theme.css"/>
	<script src="jquery.js" type="text/javascript"></script>
    <script src="animations.js" type="text/javascript"></script>
</head>

<body>
	<div id="pagewrap">
    	<header id="pageheader">
            <h1 id="firstline">William Holstein<br/>
            <span id="secondline">Professional Tree Services</span></h1>
            <p id="numberhead">Tel: 0000 000000 Mob: 00000000000</p>
            <hr id="headersplit"/>
        </header>
        <div id="slideshow">
            <div>
                <img src="images/image1.jpg"/>
            </div>
            
            <div>
                <img src="images/image2.jpg"/>
            </div>
            
            <div>
                <img src="images/image3.jpg"/>
            </div>
            
            <div>
                <img src="images/image4.jpg"/>
            </div>
            
            <div>
                <img src="images/image5.jpg"/>
            </div>
            
            <div>
                <img src="images/image6.jpg"/>
            </div>
            
            <div>
                <img src="images/image7.jpg"/>
            </div>                                                          
		</div>
        <nav id="mainnav">
            <ul id="unorderednav">
                <li class="leftmost"><a href="" class="current">Home</a></li>
                <li><a href="About.html">About</a></li>
                <li><a href="Services.html">Services</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="Contact.html">Contact</a></li>
            </ul>
        </nav>
	</div>
    <footer id="mainfooter">
    </footer>
</body>

</html>

Code:

@charset "utf-8";
body{
	background-color: #333;
	font-family: Verdana, Geneva, sans-serif;
	padding: 0px;
}

#pagewrap {
	border-top-left-radius: 20px;
	background-color: #999;
	margin-top: 2px;
	margin-right: auto;
	margin-bottom: 15px;
	margin-left: auto;
	height: 1200px;
	width: 980px;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	-moz-box-shadow:    0px 0px 20px #111;
	-webkit-box-shadow: 0px 0px 20px #111;
	box-shadow:         0px 0px 20px #111;
}
#firstline{
	font-size: 47px;
	text-align: right;
	float: right;
	color: #333333;
	text-shadow: 1px 1px 5px #111;
	font-weight: normal;
	margin-bottom: 10px;
}
#secondline{
	font-size: 16px;
	letter-spacing: 6px;
	text-shadow: 1px 1px 5px #111;
}
#numberhead{
	color: #666666;
	position: relative;
	top: 80px;
	font-size: 12px;
}
#headersplit{
	width: 100%;
	color: #DDADDD;
	border: 0px;
	border-top: 1px solid #888888;
}
#slideshow{ 
    margin: 20px auto; 
    position: relative; 
    width: 940px; 
    height: 400px; 
    padding: 0px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
	-moz-box-shadow: 0px 0px 20px 1x #777777;
	-webkit-box-shadow: 0px 0px 20px 1px #777777;
	box-shadow: 0px 0px 20px 3px #777777;
}

#slideshow > div{ 
    position: absolute; 
}
#mainnav{
	display: block;
	margin-left: auto;
	margin-right: auto;
        /*
        padding-top: 5px;
        padding-bottom: 5px;
        */
	width: 940px;
	height: auto;
	background-color: #555555;
	font-size: 14pt;
	font-family: Georgia, "Times New Roman", Times, serif;

}
#unorderednav{
	width: 740px;
	margin-left: auto;
	margin-right: auto;
}
#unorderednav li{
	display: inline;
	padding: 0px 40px;
	border-right: 1px solid #cccccc;
}
#unorderednav .leftmost{
	border-left: 1px solid #cccccc;
}
#unorderednav li a{
	text-decoration: none;
	color: #CCCCCC;
}

#mainfooter {
	width: 980px;
	text-align: center;
	color: #888888;
	margin-right: auto;
	margin-left: auto;
	font-size: 13px;
	margin-bottom: 0px;
}

Excavator · 11-04-2012, 04:42 AM

Hello harvs899,
It's kind of difficult to explain what you're seeing but you've run into the uncollapsing border bug.

By adding padding, you reveal the default 18px top and bottom margin on all ul's. Try making your CSS look like this -

Code:

#mainnav {
	display: block;
	margin: 0 auto; 
  padding: 5px 0; 
	width: 940px;
	background-color: #555555;
	font-size: 14pt;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#unorderednav {
	width: 740px;
  margin: 0 auto;
}

That last line, margin: 0 auto; does away with the default top/bottom margin.

...
You should also look into clearing floats here. Your <header> has uncleared floats.
Try adding this to your CSS -

Code:

hr {clear: both;}

harvs899 · 11-04-2012, 02:55 PM

Ok thank you that worked! Now for the problem of evenly spacing the items but I want them all to take up the full bar, similar to this but they would take up the whole bar http://www.sendspace.com/file/y9noiy, any ideas?