Question

So, I’ve spent countless hours attempting to prevent a slideshow within a div or iframe from inheriting the transparency from the pages css. I’ve attempted using z-index, absolute/ relative positioning…all to no evail. From what I understand from my research is iframes in firefox by default will inherit from the parent, but IE does not inherit and will use a white background by default; so I switched to using a div, with the same result. I’m using firefox for all my initial testing. What is hapening is the slidshow is inheriting the transparency from css, so yhat I am able to see the background image through the slideshow.

here is the relevant code:

CSS

* { margin: 0; padding: 0; }

html { 
    background: url(blue_water.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#Slideshow1 img {
    width:379px;
    z-index:12;
 }

#page-wrap {
    width: 660px;
    margin: 50px auto;
    padding: 15px; 
    background: white;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */

    -moz-box-shadow: 0 0 20px black;
    -webkit-box-shadow: 0 0 20px black;
    box-shadow: 0 0 20px black;
}

HTML

<div id="slideshow">
    <div style="float:right">
        <div style="margin: 0 auto; width: 400px; height: 310px; overflow:auto;">
            <object type="text/html" data="slideshow.html" style="width:100%; height:300px; z-index:12; margin:0;"></object>
        </div>
    </div>
</div>​

Answer 1

First to answer your question: why not place the slideshow div before the page-wrap div and use absolute positioning on the slideshow to move it wherever it needs to. That is:

<div class="relative position">
    <div class="slideshow"> <!--absolute position -->
    </div> <!-- end slideshow -->

    <div class="page-wrap">
        content
    </div> <!-- end page-wrap -->
</div> <!-- end relative position div -->

If you make the ‘relative position’ container div the same width, height, positioning as the page-wrap div, then you should be able to move the absolute div as if it were in the actual page-wrap div. You might have to z-index the absolute div above everything else.

Additionally, if this is your actual code I wouldn’t use internal or inline styling; I would put all my css in an external file. It’s faster and easier to understand.