CSS Forum

**msaz87** · 08-01-2009, 03:26 AM

Hi all,

I'm trying to figure out what I'm doing wrong with this Z-Index bug in Internet Explorer...

I have three layers going, one of a rotating background picture, a slightly opaque background on top of that and finally a text layer with a DIV button on top of that.

The z-indexes work fine in Safari and FF, but in IE the DIV button shows up all white instead of as it should (shade of blue with white text).

The CSS:

Code:

div.slidercontent {
    position: absolute;
    float: left;
    color: #fff;
    padding: 10px;
    z-index: 2;
    width: 368px;
}

div.slidertransbox {
    position: absolute;
    float: left;
    padding: 10px;
    color: #fff;
    height: 120px;
    width: 368px;
    background-color: #000;
    border: 1px solid black;
    filter:alpha(opacity=80);
    opacity:0.8;
    z-index: 1;
}

The HTML:

HTML Code:

<div class="contentdiv" style="background-image: url('rotate/rotate.php')">

    <div class="slidercontent">
    
        <span style="font-weight: bold; font-size: 20px">West Valley Leagues</span><br/>
        FastAction is heading west with two all-new leagues in Avondale to choose from!
        <br/>
        <br/>
        <div align="center">
        <div class="button">
    
        <a href="leagues.php">
        <span style="font-size: 14pt;">VIEW LEAGUES</span>
        </a>
        
        </div>
        </div>
    
    </div>    


    <div class="slidertransbox"></div>
    
    <br />
    
</div>

The link:
http://www.fasports.com/az/phx -- the DIV scroller has two examples of it if you let it run through

Any help is appreciated... thanks in advance!

**wayfarer07** · 08-01-2009, 07:53 AM

Here's a simple example that explains the IE z-index bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

**LadynRed** · 08-01-2009, 10:50 AM

Yes, IE's 'stacking order' nonsense is a real pain.

I'll say that you've got some inconsistencies in your code, like this:

Code:

div.slidercontent {
    position: absolute;
    float: left;

That just isn't going to work, you can't have the div set to absolute and then try to float it, the 2 do NOT work together, it's one or the other.

On the div with the opacity set, anything that is INSIDE or a child of that div will inherit that opacity and there's no way to change that.

**msaz87** · 08-02-2009, 03:18 AM

What I can't seem to figure out is that it doesn't exactly seem to be a stacking issue. I'm sure it is -- but the button is still stacked in the order I want, it's just not applying the proper CSS to style it how I want and make it readable.

I tried removing the inconsistencies in the code, but that didn't seem to do anything.

I originally had the DIVs set up so the button and the text were inside the opaque DIV, but like you said, it inherited that quality and I wanted the text and button to pop out more.

Any ideas?

Thanks!

**LadynRed** · 08-02-2009, 10:48 AM

You've got a lot of validation errors there, and TWO <html> tags, you should fix those errors first.