I'm trying to create a framework for a design that has hidden tabs that will scroll-out on rollover. I've got the following HTML:
<div style="width:600px; height: 400px;background-color: #CCCCCC; margin: 0 auto;" >
<div style="position: relative;width: 400px; background-color:#99CC99; padding: 20px; z-index: 0">
<div style="position: relative;" id="box1">
<p>Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, ullamco laboris nisi in reprehenderit in voluptate. Sed do eiusmod tempor incididunt mollit anim id est laborum. Duis aute irure dolor consectetur adipisicing elit, cupidatat non proident. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p>
<p>Mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Velit esse cillum dolore consectetur adipisicing elit, qui officia deserunt. Sunt in culpa. In reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>
<p>Ut labore et dolore magna aliqua. Excepteur sint occaecat sunt in culpa consectetur adipisicing elit. Eu fugiat nulla pariatur. Ut enim ad minim veniam, qui officia deserunt sed do eiusmod tempor incididunt.</p>
<p>Quis nostrud exercitation sunt in` culpa ut labore et dolore magna aliqua. Duis aute irure dolor cupidatat non proident, excepteur sint occaecat. In reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.</p>
</div>
<div style="position:absolute; top: 0px; left: 360px; z-index: -1" id="box2">
<div style="width: 200px; height: 80px; background-color:#CCCC99; ">Duis aute irure dolor cupidatat non proident</div>
</div>
<div style="position:absolute; top: 50px; left: 340px; z-index: -1" id="box3">
<div style="width: 200px; height: 100px; background-color:#996699">
Quis nostrud exercitation sunt in culpa</div>
</div>
</div>
</div>
Which works fine in Firefox, in that Box1 appears in front of Box2 and Box3 when rendered, but in IE Box2 and Box3 are still appearing above Box1. Any ideas why, and how I can fix this without changing the basic structure?
Start Free Trial
