I am trying to make a navigation bar using a list. Since a list is indented by default, I can't seem to get my list all the way to the left. I have looked at examples of this, but am not sure how they are doing it. Below is what I have

<html>
  <head>
	<title>test4</title>
	<style type="text/css">
	  ul { list-style-type: none;
		   float: left; }
	
	  li { display: inline;
		   padding: 2px;
		   border-style: solid;
		   border-left-width: 0px;
		   border-top-width: 1px;
		   border-bottom-width: 1px;
		   border-right-width: 1px;}
		   
	   li.first { border-left-width: 1px; }
	
	</style>
  </head>
  <body>
  <ul>
	<li class="first">first</li><li>second</li><li>third</li><li>fourth</li>
  </ul>
  </body>
</html>

I am trying to make a navigation bar using a list. Since a list is indented by default, I can't seem to get my list all the way to the left. I have looked at examples of this, but am not sure how they are doing it. Below is what I have

<html>
  <head>
    <title>test4</title>
    <style type="text/css">
      ul { list-style-type: none; margin: 0;
           float: left; }
 
      li { display: inline;
           padding: 2px;
           border-style: solid;
           border-left-width: 0px;
           border-top-width: 1px;
           border-bottom-width: 1px;
           border-right-width: 1px;}
 
       li.first { border-left-width: 1px; }
 
    </style>
  </head>
  <body>
  <ul>
    <li class="first">first</li><li>second</li><li>third</li><li>fourth</li>
  </ul>
  </body>
</html>

<!-- set ul margin to 0 -->

I tried that, but does not seem to have any effect. I still am about 6 characters from the left margin.

When dealing with "spacing" issues in CSS, always check to ensure that both the margin and the padding properties are properly set for all elements, including all parent/container objects and so on all the way up the tree. In fact, it's best to set margin and padding both to "0" to establish a baseline or "natural" position for everything, and then adjust as needed.

You can always set margin-left for the UL to a negative value... around -40 does it for FireFox. Use JavaScript to vary the margin-left when a user runs IE/FF and that actually makes a solution.

Thanks for the help. I did not even think to check the padding property.

Member Avatar for GreenDay2001

be careful with margin and padding property and try with different browsers.

Take a look at my dropdown tutorial in the tutorials ssection of this site.

It uses list items and contains comments which will tell you what each CSS entry does.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.