Question

I have a wordpress blog with a menu I wanted to style as a superfish dropdown menu and I followed this tutorial: http://kav.in/wordpress-superfish-dropdown-menu

So far the menu looks great but I need it to be centered instead of aligned left. Here is my code:

#navwrap {
    float:              left;
    width:              100%;
    background:         url(images/bg.png) repeat transparent;
    text-transform:     uppercase;   
    font-size:          12px;
    height:             40px;
}
.sf-menu {
    float:              left;
    width:              100%;
    text-align:center;
}
.sf-menu li {
    background:         transparent;
}
.sf-menu a {
    padding:            0px 15px;
    text-decoration:    none;
    line-height:        40px;
}
.sf-menu ul li a {
    padding:            0px 15px;
    text-decoration:    none;
}
.sf-menu li li {
    background:         #611718;
    text-align: left;
}

The items in my menu have of course variable width.

I don’t have the html without all the sf classes but it’s a simple list more or less like this:

 <div id="navwrap">

    <ul class="sf-menu">

    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a>
        <ul>
            <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        </ul>
    </li>
   </ul>
 </div>

Edit: I found a way to center it but it doesn’t work in IE7.

Ok, I tried an approach I found searching on google and it seemed to work until I checked IE7, looks like inline-block is making the menu break completely:

#navwrap .sf-menu {
   text-align: center;
}
#navwrap .sf-menu li {
   display: inline-block; 
   float: none;
}
#navwrap .sf-menu li a {
   display: inline-block;
}

This is the page I’m working on: http://hermandaddelcalvario.org/wordpress/ You can check the top menu in IE7 as it breaks.

Answer 1

IE7 does not like inline-block for elements that are originally block-level elements.
But you are not using any margin on the lis, so why not use display: inline; instead? I think it would not make any difference whatsoever.

It seems that using inline makes the menu disappear.
Removing the float: left; seems to fix that.

(Why is the menu floated, anyway? It does not seem to make any difference.)