Member Avatar for shanenin

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
  • 204 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by FC Jamison

Dani AI

Generated

A few focused, practical notes that build on the existing replies from , and and explain why the UL can still sit away from the page edge even after changing the UL itself.

Browsers apply a user-agent stylesheet that often gives lists a left offset (margin or padding) and the BODY element a default margin. If margin:0 on the UL had no effect, the offset is probably coming from an ancestor (often BODY) or from quirks mode caused by a missing DOCTYPE. A standards DOCTYPE eliminates a lot of cross-browser surprises:

<!DOCTYPE html>

Simple diagnostics that reveal which element is responsible: use the browser Inspector (F12 / Inspect Element) and look at the computed box model for UL and its parents. A quick visual check can be done with temporary outline rules:

/* diagnostic only — add in devtools */
body, ul, li { outline: 1px dashed red; }

Once the source is identified, prefer robust fixes over hacks. Removing the body/UL offset at the source (standards DOCTYPE, clear BODY margin or UL padding) is better than using a negative margin. For horizontal navs, display:inline on LI works but can suffer from whitespace and limited box control; display:inline-block or floating each LI gives more predictable sizing and borders. If old IE support is required, floats are the most cross-browser-safe approach.

and were right to look at margins/padding; ’s negative-margin trick can work but is brittle. ’s dropdown suggestion is worth checking for a more complete nav pattern. ’s note about testing across browsers is important — confirm fixes in the target browsers and inspect computed styles to be sure the real culprit is fixed.

Recommended Answers

All 7 Replies

Member Avatar for narsto

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

Member Avatar for shanenin

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

Member Avatar for tgreer

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.

Member Avatar for azoapes

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.

Member Avatar for shanenin

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

Member Avatar for Member #114696

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

Member Avatar for FC Jamison

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.