asked on

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

imantas

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.

Sheritlw

ASKER

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

ASKER CERTIFIED SOLUTION

imantas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sheritlw

ASKER

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