JQuery Menu IE7 Problem

[schofio]

Hi all,

I am using this menu (http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2) on my site. It works fine in all other browsers, including IE6 and IE8 beta, but in IE7 the menu does not stretch to fill the whole space, only the top line stretches. When I change the menu's width in the CSS, it is only the line that extends.

Here is the page it is used on. (http://www.thedentalimplantclinic.com/newdic/index.htm)

Also, again only in IE7, the menu sometimes moves up 1px when the page loads, and then back down again when you hover over it. Any ideas?

Thanks in advance for your help!

Oli

[Snookerman]

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, states that the credit notice inside script must stay intact. Please reinstate the notice first.

Regarding your problem, this conditional statement is wrong:

<![if !IE 6]>
It should be:

<!--[if !IE 6]>
Try changing that and it might fix your problem.

Good luck!

[schofio]

It is in the script, which is external, but I will put it back in the main page.
I have changed that, but it is not referring to code that has any effect on the menu, and has not solved the problem. Any other ideas?

EDIT: Actually, when I changed it the whole page stopped working in IE7, and Firefox printed the conditional comment in the top left corner of the screen.

[Snookerman]

I just noticed you are using a not (!), in that case the conditional comments should look like this:

<!--[if !(IE 6)]>

<![endif]-->
This might cause the problem since the code is meant for all browsers except IE6 and IE7 might need it.

[schofio]

This (http://www.thedentalimplantclinic.com/newdic/index2.htm) is what happens when I change that conditional comment.

The menu problem is not fixed, and it doesn't work in Firefox.

I don't think the IE6 conditional comments are the problem.

EDIT: That's because I don't want the not command. I now have that conditional comment sorted out on the original page, but the menu still isn't working.

[schofio]

My original conditional comment comes straight from http://www.dynamicdrive.com/style/csslibrary/item/css-drop-shadows/.

Anyway, I've messed around with all the conditional comments, an nothing has changed about the menu. Can anyone help with that?

[Snookerman]

Actually I'm positive that the conditional comments are your problem, if you remove all of them, the menus stretches in IE7 just like in Firefox. I suggest you take a look at why you need them and consider removing the unnecessary ones.

[Snookerman]

I think this will fix everything, remove this entirely:

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu {
height: 1%;
}
/*Holly Hack for IE7 and below*/
</style>
<![endif]-->
Then remove the conditional comments only for this:

<![if !IE 6]>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.shiftcontainer {
position: relative;
left: 5px; /*Number should match -left shadow depth below*/;
top: 5px; /*Number should match -top shadow depth below*/;
margin-top: 5px;
}
.shadowcontainer {
width: 840px; /* container width*/;
background-color: #d1cfd0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.shadowcontainer .innerdiv {
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/;
top: -5px; /*shadow depth*/;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>
<![endif]>

Good luck!

[schofio]

That's great, thanks. It now works in IE7.

However, removing that conditional comment means it doesn't work in IE6. any way around that?

Here is the changed page:

http://www.thedentalimplantclinic.com/newdic/index2.htm

EDIT: The solution seems to be to remove:


<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu {
height: 1%;
}
/*Holly Hack for IE7 and below*/
</style>
<![endif]-->

But leave the seemingly incorrect conditional comments. If I make the IE6 comment correct, it doesn't work in Firefox. I I leave it how DD originally put it, it works in FF, IE6, IE7 and IE8.

[Snookerman]

Try adding this:

<!--[if lte IE 6]>
<style type="text/css">
html .jqueryslidemenu {
height: 1%;
}
/*Holly Hack for IE6 and below*/
</style>
<![endif]-->
Good luck!

[schofio]

Sorry snookerman you've misunderstood me - After your revisions it's not the menu but the drop shadow that doesn't work. If I leave in the original (incorrect) conditional comments, as described in my last post, it seems to work.

Thanks for your help!

[Snookerman]

Yeah, I just noticed too, if you leave them it works (it didn't the first time I tested it) so I guess it's working fine in all browsers now.
If there aren't any other issues, you can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif then click Go Advanced and add the Resolved prefix to the thread title.
This will let other users know the problem has been solved.

Good luck with your site!

[schofio]

Cheers for that :-)
I've thanked you twice, your advice was so concise and useful.
I've set it to resolved.