0

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>
6
Contributors
7
Replies
8
Views
10 Years
Discussion Span
Last Post by FC Jamison
0

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 -->

0

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

0

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.

0

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.

0

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

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.