How to get fancybox above navigation menu?

Ok I have added a screen shot below with my source code and css. Basically you can see by the screen shot that my menu is above my fancybox image. Why is this and how can I fix this?

Thanks,
Tony
index.html
main.css
Screen-shot-2010-01-06-at-10.39..png
LVL 8
askurat1Asked:
Who is Participating?
 
s8webConnect With a Mentor Commented:
Try adding z-index:1; to

.navMenu { width: 516px; height: 20px; position: absolute; bottom: 8px; left: 28px; }

Like this:

.navMenu { width: 516px; height: 20px; position: absolute; bottom: 8px; left: 28px; z-index:1}

0
 
s8webCommented:
Is your menu flash?
0
 
Tony O'ByrneSenior Web DeveloperCommented:
It's tough to diagnose this without being able to use Firebug...  From the image I can't tell how much of the picture is being covered.  It could be something as simple as the white border on top pushing things down, or it could be a little more difficult in the positioning.

Have you got this online anywhere?
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
s8webCommented:
Never mind, I see that it isn't. Quaoar is right, it would be better if we could troubleshoot the output. The first thing that comes to mind is stack order (z-index). Try increasing the z-index values in fancybox.
0
 
askurat1Author Commented:
0
 
Tony O'ByrneSenior Web DeveloperCommented:
@s8web: I did think of that, but then the issue becomes the images hiding the menu
0
 
Tony O'ByrneSenior Web DeveloperCommented:
There's something dynamically changing the position of the large image container.  When you resize the window, the picture moves around - that's what's causing the issue.  You need to look into keeping the position right where it needs to be.  I would suspect there's a fancybox option for this, but I've never used it before so I don't know for sure.

This is what's being changed (the style is being dynamically updated):
<div id="fancy_outer" style="left: 382px; width: 780px; height: 529px; display: block; top: 0px;">
0
 
s8webCommented:
That is the design of a modal window.

One layer is going to have to be on top of the other. You could move the image up with negative margin, but you're bordering on exceeding the display size of viewers that have their res set at 1024x768.

If it were me, I would reduce the size of the images.
0
 
s8webCommented:
The container is going to change to match the dimensions of the image. The fancybox js and css will attempt to keep the image centered.
0
 
askurat1Author Commented:
I understand that I could resize the image or put a negative margin but the real issue the the fact that fancybox blacks out everything on the page except for the image being viewed but its not blacking out my menu. Even if i resize it still shows the menu without being blacked out.
0
 
s8webCommented:
Actulaay, don't do that. Wrong div, sorry.
0
 
s8webCommented:
It's this that's causing the problem:

#mainHeader { width: 984px; position: absolute; overflow: hidden; z-index: 9998; bottom: 0; clear: both; margin:0; padding:0; height:75px; background:url(../images/layout/overview-gallerybottom20090106.jpg) no-repeat 0 0; }

Z-index is set to 9998 which is much higher than fancybox (100 I think) change 9998 to 1 and see what happens.

Sorry about the prior confusion.
0
 
askurat1Author Commented:
Thank you! Yes it was the wrong div but it helped me find my answer. I put it in the mainHeader and it worked.
0
 
askurat1Author Commented:
Yea I got it.

Thanks,
Tony
0
 
s8webCommented:
Good deal, thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.