Jquery tools Overlay CSS Conflict, Image positioned under the overlay

Question

First here's what I'm using 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 than just a light box plugin. I have used the plugin across my entire website and would like to keep on using it.

I appreciate any input, thanks. Ami

Answer 1

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.