0

The following code works fine in IE 11, but when I test the page on IE8 the bottom of the Main_Box does not overlap the top of the Intro DIV.

If I remove the background colour from "Intro" I can see the bottom of the Main_Box behind it, but I cannot get it to display in front.

I thought it might be the bug referenced on this page...

Z-index in Internet Explorer not working

...so tried to wrap it in a Absolute DIV to reset the z-index, but to no avail.

    <div style="position: relative; z-index: 3000">
<section id="intro">

    <h1>
        EXAMPLES
    </h1>

    <div class="animation-container">
        <div id="object" class="animate fadeIn"></div>
    </div>

    <div id="intro-copy">
        <img src="./images/arrow.png" alt="Arrow" id="arrow" class="pulse" />
        <p>Scroll down</p>
    </div>
</section>
</div>

Working IE11 HTML:

<section id="main">

    <div class="Main_Box">
    <h10>
        “People often represent the weakest link in the security chain”
    </h10>

    <h2>
        Contact us today to see how we can help.
    </h2>
    </div>

</section>


<section id="intro">

    <h1>
        EXAMPLES
    </h1>

    <div class="animation-container">
        <div id="object" class="animate fadeIn"></div>
    </div>

    <div id="intro-copy">
        <img src="./images/arrow.png" alt="Arrow" id="arrow" class="pulse" />
        <p>Scroll down</p>
    </div>
</section>

CSS

#main{
height: 420px;
width: 100%;
position: relative;
top: 130px;
 }

.Main_Box {
border-width: 5.547px;
border-color: rgb( 255, 255, 255 );
border-style: solid;
border-radius: 10px;
background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(27,27,27) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(27,27,27) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(27,27,27) 100%);
box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
position: relative;
width: 70%;
height: 270px;
margin: 0 auto;
position: relative;
z-index: 9999;
padding: 30px;
}


#intro{
height: 650px;
width: 100%;
position: absolute;
background-color: #ffffff;
}

Any help greatly appreciated.

Here is a link to my Dev site:

http://goo.gl/NlAkiU

Thanks,

Community
  • 1
  • 1
user3580480
  • 442
  • 7
  • 14
  • 45
  • Already answered [here][1] and [here][2]. [1]: http://stackoverflow.com/questions/1290191/z-index-broken-in-ie8 [2]: http://stackoverflow.com/questions/1156192/internet-explorer-z-index-bug – Andrei Konstantinov Jun 17 '14 at 19:31
  • 1
    Your problem is that you're using IE8. I know that doesn't sound like much of an answer. But these are the reasons that most developers have abandoned support for that browser completely. – durbnpoisn Jun 17 '14 at 19:31
  • Are you using the [HTML5 Shim](https://github.com/aFarkas/html5shiv) or similar in your page? HTML5 elements, like `
    `, [aren't recognized by IE8](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section#Browser_compatibility) without some help.
     – Jonathan Lonowski Jun 17 '14 at 19:35
  • Thanks, but I have added some scripts to the HTML head to "fix" the HTML 5 elements – user3580480 Jun 17 '14 at 19:37

1 Answers1

0

Try assigning z-index at the section level; #main and #intro are siblings, and consequently are far more likely to be in the same stacking context as far as legacy browsers are concerned.

#main { z-index: 9999; }
Ruud Helderman
  • 10,563
  • 1
  • 26
  • 45