Horizontal List Menu Align text

Hi EE,

I am using a list for my horizontal menu.
In CSS I have set the height of the list to 35px in order to allow for touch screens.  I also have a background image for each list a item, that makes it look more like buttons.
Problem is, when I use padding to get my text to align vertically, margin doesn't seem to work, the sub menus items are spaced according to the padding top and bottom.
What can I do to get this to display properly?

Thanks

#navbar{margin:0; padding:0;}
#navbar li{list-style:none; float:left; font-family:Verdana; font-size:.85em;  font-weight:bold}
#navbar li a{display:block; padding:11px 8px 11px 8px;  height:35px;  border-spacing:2px; background-repeat:no-repeat;  background-image:url("/images2020/MenuButt.png"); color:White;  text-decoration:none}

#navbar li ul{display:none; width:10em;}
#navbar li:hover ul{display:block; position:absolute;}
#navbar li:hover li{float:none}
#navbar li:hover li a{ border-bottom:1px solid #fff; color:White; height:35px;  border-spacing:2px;}
#navbar li li a:hover{ height:35px; }

<ul id="navbar" >
	                  <li><a href="../Default.aspx">Home</a></li>
	                  <li><a href="Client_Services.aspx" title="Click for daily services">Services</a></li>
	                  <li><a href="#" title="Add/Edit Schedules">Scheduling</a>
	                      <ul>
		                     <li><a href="AddEdit_Schedule.aspx" title="Click to add schedules and check availability">Add Schedles</a></li>
		                     <li><a href="Stylist_Availability.aspx" title="Click to find availability">Availability</a></li>
		                     <li><a href="stylist_schedule.aspx" title="Click to schedule using outlook like schedule. Must use a mouse">Drag/Drop Scheduling</a></li>
	                      </ul>
	                  </li>
	                  <li><a href="Client_Details.aspx" title="Click for client details">Clients</a></li>
	                  <li><a href="Setup.aspx" title="Click to edit any of your default settings/values." >Setup</a></li>
	                  <li><a href="Stylist_Portfolio.aspx" title="Click to manage portfolio." >Portfolio</a></li>
	                  <li><a href="#" title="Click for inventory options.">Inventory</a>
		                  <ul>
			                  <li><a href="Inventory.aspx" title="Click to Receive Inventory Orders">Inventory</a></li>
			                  <li><a href="Inventory_Order.aspx" title="Click to View/Add/Edit Current Inventory Orders">Ordering</a></li>
			                  <li><a href="Inventory_Receiving.aspx" title="Click to Receive Inventory Orders">Receiving</a></li>
		                  </ul>
	                  </li>
	                  <li><a href="#" title="Click to view what clients see.">Views</a>
		                  <ul>
			                  <li><a href="../Bio.aspx"title="Click to view your portfolio/bio as clients see it.">Portfolio</a></li>
			                  <li><a href="#" title="Click to view client what clients say.">Reviews</a></li>
		                  </ul>
	                  </li>
	                  <li><a href="#">Support</a>
		                  <ul>
			                  <li><a href="../Contact_Us.aspx">Contact Us</a></li>
			                  <li><a href="../About.aspx">About Us</a></li>
			                  <li><a href="../Links.aspx">Links</a></li>
		                  </ul>
	                  </li>
	                 
                  </ul>                
                
                </td>

Open in new window

MenuImage.png
SheritlwAsked:
Who is Participating?
 
imantasConnect With a Mentor Commented:
#navbar{margin:0; padding:0;}
#navbar li{list-style:none; float:left; font-family:Verdana; font-size:.85em;  font-weight:bold;  background-image:url("/images2020/MenuButt.png");}
#navbar li a{display:block; padding:11px 8px;  height:35px;  border-spacing:2px; background-repeat:no-repeat; color:White;  text-decoration:none}
#navbar li ul{display:none; width:10em;}
#navbar li:hover ul{display:block; position:absolute;}
#navbar li:hover li{float:none}
#navbar li:hover li a{ border-bottom:1px solid #fff; color:White; height:35px;  border-spacing:2px;}
#navbar li li a:hover{ height:35px; }

Open in new window


But please note that your "/images2020/MenuButt.png" must be at least 57px of height (35 (height) + 2 * 11 (padding)). If you want total height of the button to be 35px, then discount padding when declaring its height: 35 - 2 * 11 = 13 px of height. I'm not sure but borders may also be not counted to total height, so you should also discount that.

Hope this helps.
0
 
imantasCommented:
It's because you put a padding to the LI element, while the background is inside A (anchor) element, which is inside the LI. You should apply padding to the anchor element or apply the background to LI instead of A. Hope you get the idea.
0
 
SheritlwAuthor Commented:
Could you provide an example?

#navbar{margin:0; padding:0;}
#navbar li{list-style:none; float:left; font-family:Verdana; font-size:.85em;  font-weight:bold}
#navbar li a{display:block; padding:11px 8px 11px 8px;  height:35px;  border-spacing:2px; background-repeat:no-repeat;  background-image:url("/images2020/MenuButt.png"); color:White;  text-decoration:none}

#navbar li ul{display:none; width:10em;}
#navbar li:hover ul{display:block; position:absolute;}
#navbar li:hover li{float:none}
#navbar li:hover li a{ border-bottom:1px solid #fff; color:White; height:35px;  border-spacing:2px;}
#navbar li li a:hover{ height:35px; }
0
 
SheritlwAuthor Commented:
That worked!  Thanks so much.

#navbar{margin:0; padding:0;}
#navbar li{list-style:none; float:left; font-family:Verdana; font-size:.85em;  font-weight:bold;  background-image:url("/images2020/MenuButt.png");}
#navbar li a{display:block; padding:10px 8px 11px 8px;  height:13px;  border-spacing:2px; color:White; background-repeat:no-repeat;   text-decoration:none}
#navbar li ul{display:none; width:10em;}
#navbar li:hover ul{display:block; position:absolute;}
#navbar li:hover li{float:none}
#navbar li:hover li a{ border-bottom:1px solid #fff; color:White; height:13px;  border-spacing:2px;}
#navbar li li a:hover{ height:13px; }

Open in new window

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.