2

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.

Elaine Marley
  • 2,143
  • 6
  • 50
  • 86
  • So you **do** have it working, just not on IE7. You are asking the wrong question then. ;) – ANeves Sep 20 '11 at 09:50
  • That was an edit of what I found after researching for this. I should have stated so, will edit the question again – Elaine Marley Sep 20 '11 at 09:53
  • 1
    So work on fixing it on IE now. Add a CSS that only affects `IE<=7`. Also, the problem is that IE7- refuses to display as `inline-block` elements that are originally `block` elements. Sorry that I don't have the time to look into this. – ANeves Sep 20 '11 at 09:58
  • Well I'm in no hurry, I will play with IE7 only statements to see what I can do, if you can look at it later or any other day please do. Thanks for the input. – Elaine Marley Sep 20 '11 at 10:43
  • Ye, if I had a working example of your problem it would be easier. How to add a IE7- only CSS: `` – ANeves Sep 20 '11 at 10:51
  • 1
    You can check it here: http://hermandaddelcalvario.org/wordpress/ tho I'm playing with the ie7 thing atm – Elaine Marley Sep 20 '11 at 10:57

2 Answers2

2

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.)

ANeves
  • 6,219
  • 3
  • 39
  • 63
  • the menu is floated because that's the css of superfish (I supposed it was doing something). If I change the inline-block to inline then the drop down menu breaks, the items will act as inline elements and go one after the other. I guess I'd have to hack that or something. – Elaine Marley Sep 21 '11 at 08:39
  • Nvm that last comment, it's working now, thanks a lot for your time. – Elaine Marley Sep 21 '11 at 08:52
0

You could try something like this:

.wrapper{
    position: relative;
    left:     50%;
    width:    100%;

}

#navwrap {
    float:              left;
    width:              100%;
    background:         url(images/bg.png) repeat transparent;
    text-transform:     uppercase;   
    font-size:          12px;
    height:             40px;
    position:           relative;
        left:           -25%;
}

And have #navwrap inside .wrapper. The list won't be truly centred, but it's as close as you'll get, really.

daveyfaherty
  • 4,585
  • 2
  • 27
  • 42