Jquery tools Overlay CSS Conflict, Image positioned under the overlay

Posted by Ami Mahloof on Stack Overflow See other posts from Stack Overflow or by Ami Mahloof
Published on 2009-09-12T18:27:42Z Indexed on 2010/04/16 17:23 UTC
Read the original article Hit count: 644

Filed under:
|
|

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

© Stack Overflow or respective owner

Related posts about jquery-tools

Related posts about css-layout