Joel
0
Why isnt the nav totally on the left? Why is there a gap?
<style type="text/css">
<!--
#wrapper{
background:#CCC;
width:960px;
}
#header{
background:#F00;
width:960px;
height:100px;
}
#nav{
background:#0F0;
height:30px;
}
#nav ul li{
margin:0px;
padding:0px;
list-style:none;
float:left;
}
#nav ul li a{
text-decoration:none;
margin:0px;
padding:0px;
}
#content{
background:#00F;
}
#footer{
background:#0FF;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
<div id="body">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</div>
</div>
3 answers
danwellman
3775
2
points
points
browsers add margin and padding to the body of a page by default, you can probably fix this just by setting:
body { margin:0; padding:0; }
- in this instance that won't be enough - the nav ul still has it's default margins and padding.
- the ul will have margin-top and margin-bottom by default but not margin-left or margin-right, the poster asked why the nav wasn't totally at the left
- ul's come with default padding too, IIRC 40px according to Safari
- I guess it varies with browser, does safari pad the left?
Tony Crockford
5195
0
points
points
to fix the nav position as far left as it can be you need to remove the browser default padding and margin on the ul i.e.
#nav ul{
margin: 0;
padding: 0;
}
you should read up on reset stylesheets, using one before you start your coding can save a lot of frustration - but make sure you know how it works first.
start with the master:
http://meyerweb.com/eric/tools/css/reset/
