title: Horizontal menu buttons listed vertically in IE6
body: <p>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?</p>
  
  <p>the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html &gt;
  &lt;html dir="ltr" lang="zh-TW"&gt;
      &lt;head&gt;&lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;&lt;/head&gt;
      &lt;body&gt;
          &lt;div id="s4-workspace"&gt;
              &lt;div id="s4-bodyContainer"&gt;
          &lt;div&gt;
                  &lt;div&gt;
                    &lt;table cellpadding="0" cellspacing="0" width="100%"&gt;
                      &lt;tr&gt;
                          &lt;td nowrap="nowrap"&gt;
                          &lt;div class="abcde-topmenu" data-name="TopNavigationNoFlyoutWithStartNode"&gt;
                              &lt;div id="DeltaTopNavigation" class="s4-tn ms-displayInline ms-dialogHidden"&gt;
                                  &lt;div class="menu"&gt;
                      &lt;div id="zz12_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"&gt;
                          &lt;ul id="zz13_RootAspMenu" class="root ms-core-listMenu-root static"&gt;
                              &lt;li class="static selected"&gt;&lt;a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="" accesskey="1"&gt;&lt;span class="additional-background ms-navedit-flyoutArrow"&gt;&lt;span class="menu-item-text"&gt;Item 1&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class="static"&gt;
                                  &lt;li class="static"&gt;&lt;a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href=""&gt;&lt;span class="additional-background ms-navedit-flyoutArrow"&gt;&lt;span class="menu-item-text"&gt;Item 2&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="static"&gt;&lt;a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href=""&gt;&lt;span class="additional-background ms-navedit-flyoutArrow"&gt;&lt;span class="menu-item-text"&gt;Item 3&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                                  &lt;/div&gt;              
                  &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;      
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
         &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the Stylesheet:</p>
  
  <pre><code>.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 &gt; .menu-item{
  display:inline-block;
  vertical-align:middle;
  float:left;
  
  }
  .s4-tn li.dynamic &gt; .menu-item{
  display:block;
  }
  
  .menu .menu-item,
  .menu .menu-item .additional-background,
  .menu .menu-item .additional-background .menu-item-text
  {
  display:block;
  }
  </code></pre>
  
  <p>Thank you!</p>