Jquery tools Overlay CSS Conflict, Image positioned under the overlay
- by Ami Mahloof
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
