Popup DIV not layering correctly in IE compatibility view

Happy Monday yall,

I have a banner on a website, and a DIV that pops up when the banner is clicked. It works fine in all browsers, except when I view in IE compatibility view, the pop-up DIV falls behind some content that is below the stripe.

The content that the DIV is falling behind is somewhere else in the CMS that I do not currently have access too, so at this time I can only make changes to the code that affect the DIV area.

When I remove "position: relative" from the sitestripe div, it corrects the issue, but then of course the pop-up DIV doesn't sit in line as it should if the window is resized or the browser is zoomed in/out.

Any ideas? My IE Developer Toolbar won't work (showing up as Enabled but Not Available when I go to manage add-ons - any ideas on that?!) so it's hard to troubleshoot at this time.

Also - if you zoom in or out with the browser, the content of one of the DIVs spills out, I'm guessing because I have a specified height/width. Is setting it as a percentage the best way to ensure the content stays in the box regardless of how the user is zoomed in or out?


Thanks!

Code as entered into CMS:

<style type="text/css">
body { margin: 0px;
padding: 0px;
}
#sitestripe {
padding: 10px 0px 0px 0px;
width: 980px;
height: 70px;
margin: 0px auto;
}

#detailsBox { position: absolute;
top: 70px;
left: 300px;
width: 300px;
height: 85px;
padding: 10px;
background: #ffffff;
border-width: 1px;
border-style: solid;
border-color: #6D6E71;
display: none;
font: 11px Helvetica,Arial,sans-serif;
color: #6D6E71;
text-align: justify;
z-index: 1000001;
}

#detailsBox a { font: 11px Helvetica,Arial,sans-serif;
color: #6D6E71;
position: absolute;
top: 5px;
right: 10px;
}

#detailsBox2 { position: absolute;
top: 70px;
left: 655px;
width: 300px;
height: 115px;
padding: 10px;
background: #ffffff;
border-width: 1px;
border-style: solid;
border-color: #6D6E71;
display: none;
font: 11px Helvetica,Arial,sans-serif;
color: #6D6E71;
text-align: justify;
z-index: 1000001;
}

#detailsBox2 a { font: 11px Helvetica,Arial,sans-serif;
color: #6D6E71;
position: absolute;
top: 5px;
right: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#openDetails").click(function() {
$("#detailsBox").css('display', 'block')
});
$("#close").click(function() {
$("#detailsBox").css('display', 'none')
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#openDetails2").click(function() {
$("#detailsBox2").css('display', 'block')
});
$("#close2").click(function() {
$("#detailsBox2").css('display', 'none')
});
});
</script>
<div id="sitestripe">
<a id="openDetails" href="#"><img src="/wcsstore/CVWEB/images/home/shippingbannerwithbowlgwpfinal_01.gif" border="0" alt="Spend $150 and get a Cherry Multi Bowl FREE" height="60" width="716"/></a><div id="detailsBox"><a id="close" href="#">close</a><br/>
Pop up text 1</div><a id="openDetails2" href="#"><img src="/wcsstore/CVWEB/images/home/shippingbannerwithbowlgwpfinal_02.gif" border="0" alt="Flat Rate Shipping on Orders $49.99 and higher" height="60" width="264"/></a><div id="detailsBox2"><a id="close2" href="#">close</a><br/>
popup text 2
</div>
</div>

Does your page look correct when IE is in a recent standards mode, and not in Compat View? This feature is meant for sites that rely on older browser functionality to be rendered properly - you're not necessarily supposed to target Compat View.

Also, could you setup your code in an example with http://jsfiddle.net? This will make troubleshooting far easier. That, or link us to the live site. I'm assuming the page is live at http://cookware.lecreuset.com/cookware/TopCategoriesDisplay?storeId=10151&catalogId=20002&langId=-1 since the text and banner follow your code and copy.

That is where the current (incorrect) banner is live. I think I just fixed it though- i added position: relative and z-index: 1000000 to the sitestripe div and it's now displaying correctly in all browsers in the staging environment.

woot woot!

next time i will reference the link you posted when trying to troubleshoot...still learning the ropes around here and trying to figure out the best way to get help.