Menubar submenu centering problems

Question

I just downloaded the spry widgets today to use the menubar
in a webpage. I need the menu items to be centered but the submenus
to be on the left. Unfortunately while it works in Firefox it does
not work in IE7. In IE the menu items on top are centered but the
submenus shift over to the right with the left edge of the submenu
directly under the center of it's parent menu item. I checked the
Menu
Bar Styling Examples thread but nothing I tried seemed to work
(ironically i accidentally commented out the ul.MenuBarHorizontal
li.MenuBarItemIE css and it did align correctly in ie even though
it caused other problems)
Here's the html code I'm using in the page that contains the
menubar along with any css for the menu bar in the actual page:
quote:
<style type="text/css">
ul.MenuBarHorizontal li
width: 103px;
text-align:center;
font-size:11px; border:none;
ul.MenuBarHorizontal ul li
width: 150px;
text-align:left; font-size:11px; border:none;
ul.MenuBarHorizontal a
text-align:center; background-color:#9ACABE; color:#FFFFFF;
font-weight:bold; font-family:arial;
ul.MenuBarHorizontal ul a {
text-align: left;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003377;
text-decoration:underline;
</style>
****START OF HTML CODE****
<td valign="middle" height="25px" align="center"
bgcolor="#9ACABE">
<table cellpadding=0 cellspacing=0 width="100%"
align="center">
<tr valign="middle" align="center">
<td align="center" valign="middle">
<!-- START OF MENUBAR -->
<ul id="menubar1" class="MenuBarHorizontal">
<li><a href="about.html">ABOUT
US</a></li>
<li><a class="MenuBarItemSubmenu"
href="services.html">SERVICES</a>
<ul>
<li><a href="itServices.html">Information
Technology</a></li>
<li><a
href="consultServices.html">Consulting</a></li>
<li><a href="accountServices.html">Customer
Support</a></li>
<li><a href="softwareEngineering.html">Software
Engineering</a></li>
<li><a href="immunization.html">Immunization
Registry</a></li>
<li><a
href="products.html">Products</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu"
href="alliances.html">ALLIANCES</a>
<ul>
<li><a
href="customers.html">Customers</a></li>
<li><a
href="partners.html">Partners</a></li>
<li><a
href="affiliates.html">Affiliates</a></li>
</ul>
</li>
<li><a href="news.html">NEWS &amp;
EVENTS</a></li>
<li><a
href="contact.html">CONTACTS</a></li>
</ul>
<!--Initialize the Menu Bar widget object-->
<script type="text/javascript">
var menubar1 = new Spry.Widget.MenuBar("menubar1",
{imgDown:"", imgRight:""});
</script>
</td>
</tr>
</table>
</td>
Here's a copy of the SpryMenuBarHorizontal.css file I have:
quote:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release
1.5 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, an auto width box
with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a
higher z-index, but they are initially off the left side of the
screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to auto so it comes onto the
screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
/*background-color: #33C;*/
color: #FFF;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal
a.MenuBarSubmenuVisible
/*background-color: #33C;*/
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
/*background-image: url(SpryMenuBarDown.gif);*/
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
/*background-image: url(SpryMenuBarRight.gif);*/
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
/*background-image: url(SpryMenuBarDownHover.gif);*/
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
/*background-image: url(SpryMenuBarRightHover.gif);*/
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe*/
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f/loat: left;
background: #FFF;
If I can get this last issue working I'd be all set with the
website. If anyone has any suggestions I would greatly appreciate
it. Thanks.

Answer 1

All you have to do is remove the text-align:center that you
added to this rule:
ul.MenuBarHorizontal li
width: 103px;
text-align:center;
font-size:11px; border:none;
In the Menu Bar Styling Examples, we don't change the
text-alignment of the li, we change the alignment of the link
elements which are the actual menu items.
--== Kin ==--