CSS Menu Left Padding

Hi,
I am using the List-o-Rama to get me started with CSS nav - which uses UL/LI -- however this makes the whole navigation indent in, a gap which I want to get rid of.

How can I get my UL/LI, or whole container, to left align?

Below is my code;
/* CSS Document */
 
#navlist ul
{
	border: 0;
	margin: 0;
  	padding: 0;
	list-style-type: none;
}
 
#navlist li
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;		
	text-decoration:none;
	display: inline;
	float:left;
	width: 100px;
	vertical-align:middle;
 	color: #999999;
	padding: 5px;
	
	background-color:#FF00FF;
}
 
#navlist a { 
	
}
 
#navlist a:link, #navlist a:visited
{
	color: #999999;
	text-decoration: none;
}
 
#navlist a:hover
{
	color: #99CCFF;
	text-decoration: none;
}
 
 
 
--------------------------------
//THIS IS THE HTML
--------------------------------
  <tr bgcolor="#EEEEEE">
    <td colspan="2">
     <div id="navcontainer2">
	<ul id="navlist">
		<li><a href="index.php" title="home">home</a></li>
		<li><a href="products.php" title="products">products</a></li>
		<li><a href="myAccount.php" title="my account">my account</a></li>
		<li><a href="about.php" title="about">about</a></li>
		<li><a href="contact.php" title="contact">contact</a></li>
	</ul>
     </div>
 
  </td>
  </tr>

Open in new window

LVL 1
jset_expertAsked:
Who is Participating?
 
B_DorseyCommented:
try changing #navlist ul to just #navlist
0
 
B_DorseyCommented:

add "margin-left:0px" to "#navlist li"
0
 
jset_expertAuthor Commented:
Tried that already....doesn't seem to work???

I also tried "margin-left:-30px" but it puts all links 30px to the left.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
B_DorseyCommented:
get rid of width:100px?
0
 
jset_expertAuthor Commented:
No that won't work. The space to the left is in addition to the 100px.

As you can see from the code, I have see the background color of the button to pink. The space to the left is grey (background color of the cell).

I'm pretty sure it has something to do with using a bulleted list, but I not sure how to fix it!
0
 
jset_expertAuthor Commented:
hey, that did the trick!

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.