Home/ Questions/Q 9123057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T06:14:52+00:00

I have this bare bones navigation that I am putting together and for some

  • 0

I have this bare bones navigation that I am putting together and for some reason I am getting about a 40px left margin before the first link starts. I dont have a left margin on the div so not sure why it is happening. Of course it wont look good to be completely flush against the left side of the screen but id like to control any margin size myself.

I could not use jsfiddle for this because inside jsfiddle the error is not there. it renders fine.

With that said, this is the html file:

<!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>Untitled Document</title>
<style type="text/css">
body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
}
#footer_enhanced {
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    line-height: 50px;
    float: left;
    background-color: #121212;
    z-index: 999;
    margin: 0px;
    left: 0px;
}
#navigation_enhanced {
    color: #000;
    margin: 0px;
    padding: 0px;
    height: 50px;
    float: left;
    clear: both;
}
#navigation_enhanced ul {
    list-style: none;
    margin: 0;
}
#navigation_enhanced li {
    float: left;
    line-height: 50px;
}
#navigation_enhanced li a {
    display: block;
    text-decoration: none;
    font-size: 1.125em;
    color: #FFF;
    margin-right: 0.375em;
    padding-right: 0.375em;
    padding-left: 0.375em;
    letter-spacing: -1px;
}
#navigation_enhanced li a:hover {
    color: #000;
    background-color: #fff;
}
.current {
    display: block;
    text-decoration: none;
    font-size: 1.125em;
    color: #000;
    background-color: #fff;
    margin-right: 0.375em;
    padding-right: 0.375em;
    padding-left: 0.375em;
    letter-spacing: -1px;
    list-style: none;
    float: left;
}
</style>
</head>
<body>
<div id="footer_enhanced">
<div id="navigation_enhanced">
<ul>
<li class="current">home</li>
<li><a href="#">cat2</a></li>
<li><a href="#">cat3</a></li>
<li><a href="#">cat4</a></li>
<li><a href="#">cat5</a></li>
</ul>
</div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The “unwanted” space doesn’t exist in a fiddle by default because they reset (incorrectly labeled as normalize) the css. By default, ul has a padding-left, but jsfiddle clears it.

    ul {
    padding-left: 0;
}
    • 0