Question

I have created a menu and submenu bar for my web app. Now with the css classes that I have applied in is working perfectly in mozilla, chrome,safari. But it’s not working fine at all with IE 7 or 8.

The HTML code for the generation of menu is as follows :

<div id="menu">
  <ul class="navigation" id="navigation_menu">
    <li class="navigation_active navigation_first">
      <a href="/Profiler/dashboard/loadDashboard">Dashboard</a>
    </li>
    <li>
      <a href="/Profiler/users/showSearch">Users</a>
    </li>
    ......
  <ul class="subnavigation" id="subnavigation_menu">
    <li class="subnavigation_active subnavigation_first">
      <a href="/Profiler/dashboard/loadDashboard">Master Dashboard</a>
    </li>
    <li>
      <a href="/Profiler/dashboard/loadSecurityDashboard">Security Dashboard</a>
    </li>
    ....
</div>

Now my css classes are as follows :

.navigation {
    list-style-type: none;
    clear: both;
    padding-left: 0px;
border-bottom:1px hidden #d8d8dc; background:#333333 url(../images/menu_main.png) repeat 0px 0px;
margin-top: 0px;
    overflow: hidden; /* Clearing floats */
}

.navigation li {
    float:left; list-style-type: none;
}

.subnavigation {
    list-style-type: none;
    clear: both;
    margin-top: 0px;
    background-color:#ffffff;
    border-bottom:1px solid #000000;
}
.subnavigation li {
    float:left; list-style-type: none; 
}
.subnavigation li a {
    float:left; margin-right:10px; padding:4px 5px; font-size:75%; font-weight:bold; color:#434343
}

Now the menu that is generating in mozilla and other browsers where it’s looks pretty is as follows :

And in IE 7 or 8 it’s looks like as follows :

I am not getting the exact issue with the IE.. Any help would be highly appreciated…

Answer 1

Have you got a CSS reset? Looks like IE might have some default margins or something. Try:

.navigation ul li { margin: 0; }

…before your other margin settings.

Oh and you closed your tags, right? Sorry, just doesn’t show up in the code.

As babtek said, .navigation and .subnavigation may be using display:inline. The lack of white background in the subnavigation sounds like and indication of this….not sure though. 🙂 (still pretty noob).