Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

JQuery Menu falls behind a JQuery image gallery in IE7 only

Avatar of azlumiere
azlumiereFlag for United States of America asked on
CSSjQuery
5 Comments1 Solution894 ViewsLast Modified:
Hi Experts!

I could use some advice. I'm using the jQuery Multi Level CSS Menu #2- By Dynamic Drive along with a jQuery image gallery created by Mead Miracle: http://www.meadmiracle.com/SlidingGallery.aspx. In IE7 ONLY, the menu falls behind the image gallery.  You can see an example here:  http://dzinentertainment.com/

I thought this should be a fairly simple z-index issue, but I can't get this resolved. I pasted the CSS below that pertains to the menu. I looked around the forums here and tried some ideas that others have suggested with no luck. The gallery file makes numerous references to z-index so I'm not sure if the real fix would be there, but my jQuery knowledge is pretty limited.  

Here's what I have tried:
1. Changing the z-index here: .jqueryslidemenu{position:relative;z-index:25;} from 25 up to 9999999999
2. The gallery is  in a div #content .gallery - so I tried setting the position to relative and the z-index to -10, but when I set it to ANY negative number the gallery stops functioning. This DOES fix the problem in IE7 except that the gallery no longer works. :(
3. I made sure that #content .gallery came AFTER the styles for the menu
4. I tried playing around with zoom:100%
5. I tried adding position:relative;z-index:999 to several of the menu pieces, other than the main .jqueryslidemenu
6. I saw a post on EE about bgiframe: http://plugins.jquery.com/project/bgiframe
But it looked a little complicated to me, so I thought I'd check here first to see if anyone thought that might be an option to try.

So, I guess I wondered if anyone else had any ideas. I would really appreciate any thoughts. I can attach the jquery.slidingGallery-1.2.js if that would be helpful, but I wasn't sure if it was.

Might anyone have any thoughts? The menu works perfectly fine in FF, Safari, Chrome and IE8.
.jqueryslidemenu{
position:relative;
z-index:25;}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;}

.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;}

.jqueryslidemenu ul li a, .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color:#999999;}

.jqueryslidemenu ul li a:hover {
color:#777777;}

.jqueryslidemenu ul li a{
display: block;
padding: 10px 10px; 
text-decoration: none;
height:40px;
line-height:40px;
overflow:hidden;
padding:0 18px;}

* html .jqueryslidemenu ul li a{ 
display: inline-block;}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0px;
display: block;
visibility: hidden;}


.jqueryslidemenu ul li ul li{
display: list-item;
float: none;}

.jqueryslidemenu ul li ul li ul{
top:0px;}

.jqueryslidemenu ul li ul li a{
width: 160px;
padding: 6px 13px;
margin: 0;}

.jqueryslidemenu ul ul{
background:transparent url(images/drop.png) no-repeat scroll -1px 0;
padding-top:14px;
top:30px;
padding-bottom:2px;}

.jqueryslidemenu ul ul.menu_flip{	
background:transparent url(images/dropR.png) no-repeat scroll -1px 0;}

.jqueryslidemenu ul ul ul, .jqueryslidemenu ul ul.menu_flip ul{
background:transparent url(images/drop_sub.png) no-repeat scroll 0px -2px;
margin-left:-4px;
margin-top:-2px;
padding-top:2px;}

.jqueryslidemenu ul ul li a, .jqueryslidemenu ul ul li a:link, .jqueryslidemenu ul ul li a:visited {
height:100%;
line-height:20px;}

.jqueryslidemenuz ul li ul li a:hover, .jqueryslidemenu ul ul li a:hover{
margin:0 4px;
padding:6px 9px;
background:#222;color:#eee;}

.jqueryslidemenuz ul ul li ul li a:hover, .jqueryslidemenu ul ul ul li a:hover{
margin:0 1px;
padding:6px 12px;
width:155px;}

------------

#content .gallery{top:0px; left:0px; width:990px; height:300px;}
ASKER CERTIFIED SOLUTION
Avatar of remorina
Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answers