Center Spry Menu Bar

[FrontPage97]

I am trying to center a spry menu inside a DIV.
I've got the DIV's margin left auto and margin right auto, but the spry menu keeps aligning to the left. I probably need to be changing something in the Spry Menu Bar .css file.....

@charset "UTF-8";

ul.MenuBarHorizontal
{
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
}

ul.MenuBarActive
{
    z-index: 1000;
}

ul.MenuBarHorizontal li
{
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 9em;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    float: left;
}
.contrainer {
    background-color: #03C;
    height: auto;
    width: 700px;
    margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
}

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

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
    left: auto;
}

ul.MenuBarHorizontal ul li
{
    width: 8.2em;
}

ul.MenuBarHorizontal ul ul
{
    position: absolute;
    margin: -5% 0 0 95%;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
    left: auto;
    top: 0;
}

ul.MenuBarHorizontal ul
{
    border: 1px solid #CCC;
}

ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
    background-color: #33C;
    color: #FFF;
}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
    background-color: #33C;
    color: #FFF;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

ul.MenuBarHorizontal iframe
{
    position: absolute;
    z-index: 1010;


    filter:alpha(opacity:0.1);
}

@media screen, projection
{
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
        display: inline;
        f\loat: left;
        background: #FFF;
    }
}

 

[chrishirst]

We have gone through this before for you I believe.

text-align: center; will centre inline child elements of a block level parent.

margin:0 auto; will set block level child elements that are set with a width of less than 100%, to be horizontally central in a block level parent.



AND by the way, setting display: inline AND floating an element can have unpredictable results.