0

My horizontal menu is displayed vertically in IE6 (it works fine for IE9 or firefox). After some researched it seems display:inline-block is the problem. But I tried and error many times still mess up. Could you please advice me how to modify?

the HTML:

<!DOCTYPE html >
<html dir="ltr" lang="zh-TW">
    <head><link rel="stylesheet" type="text/css" href="style.css"/></head>
    <body>
        <div id="s4-workspace">
            <div id="s4-bodyContainer">
        <div>
                <div>
                  <table cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td nowrap="nowrap">
                        <div class="abcde-topmenu" data-name="TopNavigationNoFlyoutWithStartNode">
                            <div id="DeltaTopNavigation" class="s4-tn ms-displayInline ms-dialogHidden">
                                <div class="menu">
                    <div id="zz12_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
                        <ul id="zz13_RootAspMenu" class="root ms-core-listMenu-root static">
                            <li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Item 1</span></span></a>
                            <ul class="static">
                                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href=""><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Item 2</span></span></a></li>
                                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href=""><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Item 3</span></span></a></li>
                            </ul>
                            </li>
                        </ul>
                    </div>
                                </div>              
                </div>
                        </div>
                        </td>
                    </tr>
                </table>      
              </div>
            </div>
        </div>
       </div>
    </body>
</html>

the Stylesheet:

.block{display:block}
.abcde-topmenu .s4-tn li.static .menu-item {background:url(top_menu_item.png) no-repeat -15px 5px ;  width:152px; _width:170px; height:30px;_height:40px;text-decoration: none }
.abcde-topmenu .s4-tn li.static a.selected {background:url(top_menu_item_o.png) no-repeat -15px 5px ;}
.abcde-topmenu .menu a.menu-item span.menu-item-text{ color:#fff; font-size: 14px; height: 30px;  text-align: center;line-height: 35px; line-height: 35px\9; *line-height: 35px; _line-height: 35px;}

.ms-core-listMenu-horizontalBox LI{
    display: inline-block;
    *display: inline;
    float:left;

}
.ms-core-listMenu-horizontalBox UL{
    display: inline-block;
    *display: inline;
    float:left;

}

.s4-tn li.static > .menu-item{
display:inline-block;
vertical-align:middle;
float:left;

}
.s4-tn li.dynamic > .menu-item{
display:block;
}

.menu .menu-item,
.menu .menu-item .additional-background,
.menu .menu-item .additional-background .menu-item-text
{
display:block;
}

Thank you!

Dhruvin Sukhadiya
  • 372
  • 2
  • 16
Mark
  • 283
  • 3
  • 22
  • As you can see, I have already use the trick "*display: inline;" in the css. Maybe I don't get the idea. I hope expert here can give me some insight. – Mark Jun 17 '14 at 08:06
  • You haven't set the `zoom` to `1` (to provide `hasLayout`) – Robby Cornelissen Jun 17 '14 at 08:08
  • After add line zoom:1 right after *display: inline, the menu changed. Item2 and item3 buttons are listed horizontally but listed under Item1 button. – Mark Jun 17 '14 at 08:24
  • Did you specify it on the `UL` element as well? If so, try removing the `float`s – Robby Cornelissen Jun 17 '14 at 08:27
  • Thanks. After remove the float and add the "zoom:1" line to .menu-item class it seems ok now – Mark Jun 18 '14 at 01:28

0 Answers0