How to get fancybox above navigation menu?

Is your menu flash?

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?

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.

Here is a demo: http://www.acelogisticsllc.com/vCard-gallery-maps/

@s8web: I did think of that, but then the issue becomes the images hiding the menu

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;">

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.

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.

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.

Actulaay, don't do that. Wrong div, sorry.

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.

Thank you! Yes it was the wrong div but it helped me find my answer. I put it in the mainHeader and it worked.

Yea I got it.

Thanks,
Tony

Good deal, thanks for the points.