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 to the CF scene
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS breaks page in IE9 and Opera

    Hello,
    I'm having a strange issue. I've got a modal dialog box and have styled it using CSS. It works perfectly in Safari and Firefox but the positioning elements of the CSS cause the entire page to break in Opera and IE (links don't work, menus, etc.). As soon as I remove the code below from my modal CSS, the page works fine (the modal obviously doesn't appear where I want it but everything else is fine).

    Code:
    /* Container */
    .modal {
    /* Overlay page content */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }
    I can't figure out what's happening. Any ideas? Thanks so much for any help!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    That CSS is overlaying the entire browser viewport so that anything outside the element with class="modal" will be inaccessible - is that what you are expecting?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello,

    Thank you for the reply! Yes, I essentially gray out the entire screen when the modal is invoked. The rest of the CSS code for this class is:

    Code:
    /* Transition opacity on open */
    -webkit-transition: opacity 500ms ease-in;
    -moz-transition: opacity 500ms ease-in;
    -o-transition: opacity 500ms ease-in;
    transition: opacity 500ms ease-in;
    /* Hide for now */
    opacity: 0;
    pointer-events: none;
    So it starts out hidden and only appears when invoked. Is it possible that Opera/IE are somehow blocking out everything else because they think the modal is still in front even when it's hidden?

    Thank you!
    Jason


  •  

    Posting Permissions

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