CSS Problem with IE 7 or 8 which is working fine in all other browsers

Question

Hello All...

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

It looks like your a tags within .navigation may be behaving as inline, it could be picking up and showing the whitespace. Why not style your .navigation links using the same float technique as those in .subnavigation?

.navigation li a { float: left; padding: 4px 5px; }

Answer 2

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