...

View Full Version : Popup DIV not layering correctly in IE compatibility view



surfbird0713
06-25-2012, 03:32 PM
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>

jonathansampson
06-25-2012, 04:15 PM
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.

surfbird0713
06-25-2012, 04:31 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum