Link to home
Start Free TrialLog in
Avatar of earwig75
earwig75

asked on

jQuery menu problem in an older browser

I need the below code to work in IE 11 with compatibility mode turned on.  Basically the problem is, <li> items with a <ul> below them do not show up on the page, they show up as white text on white. Examples from the menu below that don't work properly are "Jazz" "Rock" and "Pop". I tried messing around with the css, but I am not having any luck. Can someone assist?

<html lang="en">
<head>
  <title>jQuery UI Menu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#menu" ).menu();
  } );
  </script>
  <style>
  .ui-menu { width: 150px; }
  </style>
</head>
<body>

<ul id="menu">
  <li class="ui-state-disabled"><div>Toys (n/a)</div></li>
  <li><div>Books</div></li>
  <li><div>Clothing</div></li>
  <li><div>Electronics</div>
    <ul>
      <li class="ui-state-disabled"><div>Home Entertainment</div></li>
      <li><div>Car Hifi</div></li>
      <li><div>Utilities</div></li>
    </ul>
  </li>
  <li><div>Movies</div></li>
  <li><div>Music</div>
    <ul>
      <li><div>Rock</div>
        <ul>
          <li><div>Alternative</div></li>
          <li><div>Classic</div></li>
        </ul>
      </li>
      <li><div>Jazz</div>
        <ul>
          <li><div>Freejazz</div></li>
          <li><div>Big Band</div></li>
          <li><div>Modern</div></li>
        </ul>
      </li>
      <li><div>Pop</div></li>
    </ul>
  </li>
  <li class="ui-state-disabled"><div>Specials (n/a)</div></li>
</ul>
</body>
</html>

Open in new window

Avatar of Nicholas
Nicholas

Anything pre IE10 and even IE11 was so buggy with CSS/Jquery (ergo the numerous fixes to add) and now you are looking at supporting a browser that is 6 years old (minimum) explains why no replies yet

There is no reason to be supporting legacy browsers unless you are in a controlled environment in which case why bother using modern technologies?
Avatar of Michel Plungjan
Welcome to real life Member_2_7969240
It is only when you sit at home and write HTML for your friends you have told your site only supports latest Chrome that you can get away with not supporting legacy. In the real world, the CIO's cousin on IE8 can be the ONLY reason to be told to support it and MANY if not ALL corporate environments may have a roll out time of years and years since their homegrown software is not compatible with newer versions of certain browsers.
@earwig75 - Your page validates at w3org if I add a
<!DOCTYPE html>

Open in new window


Also note your have https:// on all but the css file - that will make it fail from file protocol
Avatar of earwig75

ASKER

Thank you for the replies. Yes, I work in a corporate environment and we have to support old browsers in compatibility mode.
I cannot test your page until tomorrow since I do not have MS at home and it is 1st of May and a corporate holiday ;)
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial