JavaScript book dropdown menu and IE7

[raybiss]

Hi,

I've been using the script (dropdownMenu.js) that's found in the JavaScript Anthology book for a while and it was working fine.

Now when using IE7, the second sub level popup menu first appeared with a large offset to the right of it's parent.

I've been able to edit the menu script to identify IE7 and have the menu appear at the appropriate location but I'm still left with two more problems.

- The first sub level menu links appears above the second sub level menu.
- I get a stack overflow when moving the cursor back onto a parent menu.

Any idea where could I get a copy of the script that works with the latest browser versions? Maybe the CSS needs to be modified as well?


Regards,
Raymond

[awestmoreland]

One of the first things that I noticed about the drop menus on some of my existing sites was that the offsets had changed. This was down to IE7 dealing with the !important declaration correctly. Due to browser differences, I had specified different offsets for non-IE v IE browsers differently by declaring the same value twice, but the first time with the !important declaration.

If this is your problem, then here's how I got around it temporarily:

This:

#myDrop{
   position: absolute;
   left: 10px !important;  /* non-IE */
   left: 20px;  /* IE only */
 }

Becomes:

#myDrop{
   position: absolute;
   left: 10px;  /* non-IE */
   left: 20px !important!;  /* IE only */
 }

Note the trailing exclamation point in the second example and bear in mind that this isn't standards-compliant and should be replaced as soon as you can:


Andy

[felgall]

You should move any specifa IE6 and IE7 stylesheet entries into separate stylesheets and use IE conditionals in the HTML to determine which browser it is so as to include them.

<link rel="stylesheet" href="master.css" type="text/css">
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css">
<[endif]><[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css">
<[endif]-->

[Kravvitz]

awestmoreland, please, please do not recommend CSS hacks that don't validate, especially ones that haven't been thoroughly tested.

I just ran some tests and found out that in addition to IE4-7/Win, NS6.0-7.1, Safari, and Konqueror apply that hack. It causes Opera to totally ignore the rule. Using it is an extremely bad idea.

I second Stephen's recommendation of conditional comments.

[awestmoreland]

Thanks Stephen, that did the trick nicely.

Am I right in thinking that the entire rule is replaced and in doing so drops any values not specified in the browser-specific rule?

For instance, I have the following in my global stylesheet:

#myDiv{
    position: absolute;
    left: 100px;
    top: 100px;
  }

And in my IE-specific stylesheet (referenced after the global stylesheet):

#myDiv{
    left: 50px;
     top: 50px;
   }

This seems to "lose" the position: absolute property when viewing in IE.


Thanks,

Andy

Edit: Just realized that this is way outside the scope of this question and in the JS forum. I'm happy to re/move it if required.

[Kravvitz]

The whole rule should not be overridden. Just the declarations that have different values.

Could you post a link to the page in question?

Yes, this thread would be more appropriate for the CSS forum.