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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
imantasCommented:
#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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.