Multi Level CSS Menu #2 IE8 Menu Problems

[onestcoder]

Hello everyone! Thank you for the chance to resolve this issue. I have done research on all over the web to find a definitive solution for the issues that Multi Level CSS Menu #2 has with IE8, and have not been successful.

I have experienced 2 major issues:

1) the sub menu's text doesn't appears. The sub menus are blank, however if you turn on compatibility mode the menu text appears.

2) In compatibility mode when you first hover over the top level of the menu the 3rd level appears over top the 2nd level covering the 2nd level until you hover over the second level and then the menu corrects itself.

Basically, many others and I would like to come up with a IE8 CSS hack for Multi Level CSS Menu #2.

Can anyone help resolve the Multi Level CSS Menu #2 issues with IE8?

[jscheuer1]

If you mean:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

It works fine here in IE 8 under Windows XP. Are you experiencing these problems on that demo page? If so, it may be your browser settings or possibly the OS. Please specify.

Or, if the demo page works OK, then it's probably the implementation on your page. In which case, please provide a link to it.

Or, if you mean a different Dynamic Drive menu, please post a link to its demo page.

[onestcoder]

The website is http://www.chemtranusa.com

It works fine in IE9, Firefox, and Chrome

[jscheuer1]

It's Cufon. I was going to say get rid of it, which might not be such a bad idea - it adds little to the page other than loading time and bandwidth. But then I started playing around with it a little. This seems to work and will not change what other browsers are doing with the page.:


<script type="text/javascript">
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if (/MSIE 8/.test(navigator.userAgent))
Cufon.replace('h1')('h2')('h3')('h4')('h5')('#myslidemenu a',{hover: 'true'})('a.button', {hover: 'true'})('.nivo-caption p')('span.price')('span.month');
else
@end @*/
Cufon.replace('h1')('h2')('h3')('h4')('h5')('#myslidemenu a',{hover: 'true'})('#myslidemenu li li a',{textShadow: '1px 1px #ffffff',hover: 'true'})('a.button', {hover: 'true'})('.nivo-caption p')('span.price')('span.month');

</script>

and (at the end of the page where it was just):


<script type="text/javascript"> Cufon.now(); </script>

Make that:


<script type="text/javascript">
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if (/MSIE 8/.test(navigator.userAgent))
Cufon.replace('#myslidemenu li li a',{textShadow: '1px 1px #ffffff',hover: 'true'});
else
@end @*/
Cufon.now();
</script>

All other browsers will see these as javascript comments. IE will read the code inside them, executing the line within the comment block if they are IE 8, the line outside if they are not.

As I say all other browsers will ignore them, executing just as they already have - the net effect for all IE as well, except for IE 8, which will execute only the first part of each script - the parts inside the comment blocks.

Works here in IE 8 under Windows XP.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If there are still problems, we can just get rid of Cufon for IE 8 altogether.

[onestcoder]

John you are a rockstar!!! I will test it out and get back to you.

[onestcoder]

Ok, i want to make sure I understand you.

You want me to change:



<script type="text/javascript">

Cufon.replace('h1')('h2')('h3')('h4')('h5')('#myslidemenu a',{hover: 'true'})('#myslidemenu li li a',{textShadow: '1px 1px #ffffff',hover: 'true'})('a.button', {hover: 'true'})('.nivo-caption p')('span.price')('span.month');

</script>


To:



<script type="text/javascript">
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if (/MSIE 8/.test(navigator.userAgent))
Cufon.replace('h1')('h2')('h3')('h4')('h5')('#myslidemenu a',{hover: 'true'})('a.button', {hover: 'true'})('.nivo-caption p')('span.price')('span.month');
else
@end @*/
Cufon.replace('h1')('h2')('h3')('h4')('h5')('#myslidemenu a',{hover: 'true'})('#myslidemenu li li a',{textShadow: '1px 1px #ffffff',hover: 'true'})('a.button', {hover: 'true'})('.nivo-caption p')('span.price')('span.month');

</script>


and then change:


<script type="text/javascript"> Cufon.now(); </script>

To:


<script type="text/javascript">
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if (/MSIE 8/.test(navigator.userAgent))
Cufon.replace('#myslidemenu li li a',{textShadow: '1px 1px #ffffff',hover: 'true'});
else
@end @*/
Cufon.now();
</script>

[jscheuer1]

That's right. Works here.