Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2012
    Location
    South Carolina
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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>

  • #2
    New Coder
    Join Date
    Jun 2012
    Location
    Atlanta, Georgia, United States
    Posts
    34
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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/cookwa...0002&langId=-1 since the text and banner follow your code and copy.
    Last edited by jonathansampson; 06-25-2012 at 05:25 PM.

  • #3
    New Coder
    Join Date
    Jun 2012
    Location
    South Carolina
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •