Question

I have two issues with my menu in ie8. If you visit this link http://betapwr.pokerworldratings.com/ in ie8 you’ll see that the menu doesn’t drop down under the “rooms” tab. I placed “overflow:visible” on everything containing it but no dice. the second problem is with a search bar that should be visible on the right which is missing. i checked the elements and didn’t see anything wrong with “display”. You can see the proper setup in Chrome. What am I missing?

Answer 1

First off, your top menu is a all out of whack because you’re not properly nesting your list items. You currently have this:

<li class="drop-work"><a href="#">Rooms</a>
   <ul>
      <a href=""><li>Room 1</li></a>
      <a href=""><li>Room 2</li></a>
   </ul>
</li>

You’re nesting some a tags as children of your list tag and that is not proper markup, so you can fix that part by formatting your submenu the right way:

Fixed

<li class="drop-work"><a href="#">Rooms</a>
   <ul>
      <li><a href="">Room 1</a></li>
      <li><a href="">Room 2</a></li>
   </ul>
</li>

Next, the html5.js shiv you’re including in the header of your document is not found so your header and footer HTML5 tags are not actually being shivved properly in IE.

Now, your top menu works fine in IE8 but it looks bad in IE8 in compatibility mode, you can fix that by setting your list items to display:inline instead of display-block by using a css hack, like so:

.admin-menu ul li {
display:inline; / this will target IE7 */
}

And then to stretch your #admin-bar to the left and right of your document you can modify your rule to the following:

#admin-bar {
    overflow:visible;
    position: fixed;
    top:0;
    right:0;
    left:0;
    z-index: 99999;
    background:url(images/top-menu.png) repeat-x #000;
    background-image: -moz-linear-gradient(top,#0078CE 0,#006AAD 100%);
    background-image: -ms-linear-gradient(top,#0078CE 0,#006AAD 100%);
    background-image: -o-linear-gradient(top,#0078CE 0,#006AAD 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0078CE),color-stop(100%,#006AAD));
    background-image: -webkit-linear-gradient(top,#0078CE 0,#006AAD 100%);
    background-image: linear-gradient(to bottom,#0078CE 0,#006AAD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0078CE',endColorstr='#006AAD');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0078CE', endColorstr='#006AAD')";
    border-bottom:3px solid #005991;        
}