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">&nbsp;
    <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">&nbsp;
    </div>
    <div id="footer">&nbsp;
    </div>


</div>
</div>




</div>

3 answers

danwellman 5600
2
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; }
Answered almost 10 years ago by danwellman
  • in this instance that won't be enough - the nav ul still has it's default margins and padding. Tony Crockford almost 10 years ago
  • 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 danwellman almost 10 years ago
  • ul's come with default padding too, IIRC 40px according to Safari Tony Crockford almost 10 years ago
  • I guess it varies with browser, does safari pad the left? danwellman almost 10 years ago
0
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/

Answered almost 10 years ago by Tony Crockford
-1
points

The HTML code is incorrect, there is one extra </div>.

Answered almost 10 years ago by Divya Manian