Jquery tools Overlay CSS Conflict, Image positioned under the overlay

Question

First here's what I'm usingh and trying to do:

the minimal setup for this effect: flowplayer.org/tools/demos/overlay/index.html

then the Apple Leopard Preview Effect: flowplayer.org/tools/demos/overlay/apple.html

Now here's the page I'm having the issue with http://gentle-mist-64.heroku.com/pictures

My Issue: when I click on an image the picture shows under the overlay and to the right side,

This has to be a conflict between my CSS positioning to the the plugin positioning.

when I try this on a blank page with no layout, it works just fine.

my layout css:

    body{
 background: url('/images/background.jpg');
}

#image_stage{
 position: relative;
 top: 30px;
 margin: auto;
 margin-top: 75px;
 background-color: white;
 width: 900px;
 height: 520px;
}

#image_inside_stage {
 float: left;
 margin-top: 7px;
 margin-left: 27px;
}

#logo{
 position: absolute;
 left: 725px;
 top: 4px;
}

#see_through_box {
 position: absolute;
 background-color: black;
 opacity: 0.66;
 -moz-opacity: 0.66;
 filter:alpha(opacity=66);
 width: 665px;
 height: 432px;
 margin: 45px;
 z-index: 99;

 -moz-border-radius-topleft: 15px;
 -moz-border-radius-topright: 0;
 -moz-border-radius-bottomleft: 0;
 -moz-border-radius-bottomright: 15px;

 -webkit-border-top-left-radius: 15px;
 -webkit-border-top-right-radius: 0;
 -webkit-border-bottom-left-radius: 0;
 -webkit-border-bottom-right-radius: 15px;
}

.inner_content{
 position: absolute;
 top: 75px;
 left: 75px;
 z-index: 99;
 color: whitesmoke;
}

Anyone Please Help, I want this plugin to work, this is so much better then just a light box plugin, I have used the plugin acros my entire website and would like to keep on using it.

I Appreciate any input Thanks Ami

Answer 1

Could you try moving photo0 and photo1 to not be within your other divs, but instead so they're not going to be affected by any parent/inherited styles? perhaps down just before the closing </body> tag?

Good luck!

Answer 2

Thanks for that clue! I had a similar issue and ultimately found that jquery tools was writing out the overlay image at the bottom of the body, which meant it was getting slightly different styling than the div, which was being created in a different spot. Looking at the javascript that places the image there, I did the same thing with my overlay div

$('body').append($('#mortgage_card'));

Answer 3

I found out that entirely for jquery tool, it is very important NOT to place the jquery tools element in a parent element that is absolutly positioned.

you can simply put the window, scrollable, or whatever out side the absolute parent.

best to position with floats were you can.

Answer 4

If you want to keep your elements positioned, you can actually solve it by moving the overlay element, as suggested by Funka. See this answer:

http://stackoverflow.com/questions/1851656/jquery-overlay-wrong-positioning/2729471#2729471