2

Update:

I've added a bounty to this. To claim it, I need a version of the code below that does NOT exhibit the symptoms I describe.

Here's a simple test case. In Chrome, Firefox, and IE8 with compatibility mode off, this works as expected. However, turn on compatibility mode (toggle Tolls->Compatibility View) there's a glitch with the way some of the menu block show & hide.

To see the issue:

Save the example to a file, and view it via web browser (note that if you simply load it from a file, you can't turn on compatibility view - it has to be delivered from a web server).

Move the mouse from "Here" to "There" to "Everywhere", then down so that "No" is highlighted, and the 3rd level menu is displayed. Move the mouse out to the left. Only the top menu is displayed.

Now repeat the steps. When you hit "Everywhere" the 2nd time, the 3rd level menu block is shows, but with nothing in it.

Is there any way to prevent this from happening, even in Compatibility View?

Sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   <title>test</title>
<style>
#navRaw, #navRaw ul{
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-position: outside;
   position: relative;
   line-height: 26px;
}
#navRaw a{
   display: block;
   padding: 0px 5px;
   color: #000;
   text-decoration: none;
   background-color: silver;
      line-height: 28px !important;
}
#navRaw a:hover{
   background-color: #ccc;
   color: #fff;
}
#navRaw li{
   float: left;
   position: relative;
}
#navRaw ul{
   position: absolute;
   display: none;
   top: 28px;
}
#navRaw li ul a{
   width: 220px;
   height: auto;
   float: left;
}
#navRaw ul ul{top: auto;}
#navRaw li ul ul{
   left: 230px;
   margin: 0px 0 0 0px;
}
#navRaw li:hover ul ul, #navRaw li:hover ul ul ul, #navRaw li:hover ul ul ul ul{ display: none;}
#navRaw li:hover ul, #navRaw li li:hover ul, #navRaw li li li:hover ul, #navRaw li li li li:hover ul{ 
   display: block;
   border: 1px solid Black;
}
</style>
</head>
<body>
   <ul id="navRaw">
      <li><a href="#"><b>Here</b></a></li>
      <li><a href="#"><b>There</b></a></li>
      <li><a href="#"><b>Everywhere</b></a>
         <ul>
            <li><a href="#"><b>Yes</b></a></li>
            <li class="showsub"><a href="#"><b>No</b></a>
               <ul>
                  <li><a href="#"><b>Why</b></a></li>
                  <li><a href="#"><b>Why not</b></a></li>
               </ul>
            </li>
            <li class="menusep"><a href="#"><b>Perhaps</b></a></li>
         </ul>
      </li>
   </ul>
</body>
</html>
chris
  • 36,094
  • 53
  • 157
  • 237

5 Answers5

1

Out of curiosity, why not just disable compatability mode with the x-ua-compatible meta tag?

BenB
  • 116
  • 1
  • 7
  • Presumably he actually wants it to work in older browsers, not just disable compatibility mode for newer ones. – Aaronaught Aug 15 '11 at 15:07
  • I would generally prefer to have users upgrade their browser, but in the case of IE, since it won't install on XP and so many people still have that, it's effectively not a free upgrade. So for now, no choice but to accommodate older browsers. – Chains Aug 15 '11 at 15:27
  • @BenB: Can't do that, because then much of the site stops functioning properly. This in an intranet app, and they are typically slow in rolling out browser upgrades. – chris Aug 15 '11 at 15:59
1

I need a version of the code below that does NOT exhibit the symptoms I describe.

SOLUTION

http://jsbin.com/oketat/

EMENDED CSS

#navRaw li:hover > ul, #navRaw li li:hover ul, #navRaw li li li:hover ul, #navRaw li li li li:hover ul{ 
   display: block;
   border: 1px solid black;
}
#navRaw li:hover ul li ul li a {background-color:transparent}  
#navRaw li li:hover ul li a {background-color:silver !important}
Knu
  • 14,806
  • 5
  • 56
  • 89
0

The nav works as expected in IE9 for me. In Browser Mode:IE7 i can re-create the error you are describing. Basically you need a CSS based multi-level drop-down nav that works in IE7+?

Can you just check out other existing examples that work and apply your nav items to that? http://www.stunicholls.com/menu/hover_drop_1.html

http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html

phteven
  • 1,383
  • 2
  • 16
  • 29
  • I'd like something that works in IE7+, but I'd really like to understand why it's NOT working in compatibility mode. – chris Aug 12 '11 at 17:18
0

Certain conditions cause IE-7 to render in IE-5 mode. This (below) isn't recommended as a general practice, but if you want to prevent that, you can try this:

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" >
Chains
  • 12,541
  • 8
  • 45
  • 62
0

Your original question is how/why does IE suck... I won't go into that hellhole but I'll tell you that it is relatively simple to trigger layout/display bugs in the 'earlier' versions. IE9 is going into the right direction though.

As for working code, I can't exactly tell what you did wrong in this specific case, but it's likely a combination of one or more edge case bugs and styles IE isn't comfortable with on certain elements.

I rebuilt the menu from scratch since that way I know exactly what I am doing/introducing with every step... It's just lots of experience and searching/reading about those rare IE bugs to be able to do this, it's boring.

WORKING CODE

http://jsfiddle.net/r52D6/69/

Disclaimer: This is not extensively tested but should work fine unless in quirks mode, ofcourse it also works in real browsers.

BTW you can activate compatibility mode on your local PC by using IE's developer tool (f12). I also made sure that the bug in the old code could be reproduced in jsfiddles environment before starting. Keep in mind that jsfiddle has a normalizing script and not all actual applied styles are in my own code, but I trust you can handle that.

sg3s
  • 9,411
  • 3
  • 36
  • 52