0

This is a structure of my site:

<html>
   <body>
      <embed flash>
      <div id='dialog'>
          <div width="500px" height="300px"><iframe/></div>
      </div>
   </body>
</html>



 <style type="text/css">
        .hide { display: none; }
        .show { display: block; }
        iframe { border: 0; }
        #dialog { background-color: rgba(0,0,0,0.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }
            #dialog .dialog-inside { width: 650px; -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.54); -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.54); box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.54); margin: auto; overflow: hidden; border-radius: 5px; }
                #dialog .dialog-inside .dialog-header { position: absolute; right: 0; right: 1px; top: 3px; }
                #dialog .dialog-inside .dialog-header .close { width: 23px; height: 23px; background: url("Images/close.png"); background-position: 2px 2px; background-repeat: no-repeat; border: 1px solid transparent; cursor: pointer; }
                #dialog .dialog-inside .dialog-header .close:hover { background-color: #fdc985; border-color: #4040B1; }
                #dialog .dialog-inside .dialog-bottom-wrapper { position: absolute; bottom: 0px; right: 0; left: 0; height: 42px; background-color: #f8f8f8; }
                    #dialog .dialog-inside .dialog-bottom-wrapper .dialog-bottom { float: right; margin: 8px 5px; }
                    #dialog .dialog-inside .dialog-bottom-wrapper .dialog-bottom .btn { background: rgb(251,251,249); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiZmJmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top,  rgba(251,251,249,1) 0%, rgba(243,243,239,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,249,1)), color-stop(100%,rgba(243,243,239,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* IE10+ */ background: linear-gradient(to bottom,  rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbf9', endColorstr='#f3f3ef',GradientType=0 ); /* IE6-8 */ border: 1px solid #7f9db9; color: #333333; cursor: pointer; display: inline-block; margin-left: .5em; padding: 0px 12px; text-align: center; line-height: 20px; outline: none; border-radius: 3px; }
                        #dialog .dialog-inside .dialog-bottom-wrapper .dialog-bottom .btn:hover { background-color: #d1d1d1; border-color: #d1d1d1; color: #111; moz-transition: background-position 0.1s linear; ms-transition: background-position 0.1s linear; o-transition: background-position 0.1s linear; text-decoration: none; transition: background-position 0.1s linear; webkit-transition: background-position 0.1s linear; outline: none; }
            #dialog iframe { display: block; height: 114px; }

    </style>

The problem is dialog I set it position: absolute, left, top, bottom, right: 0, in Chrome, IE work fine, it's rendered full screen with black background. Opera, the dialog has width and height is fix with div child => it doesn't have fullscreen. In firefox, it like the same, but I hover on dialog in Inspect Mode, it show black background.

Anyone has the problem like that?

6
  • Post your CSS otherwise we are guessing as to what your are trying to do.
    – Marc Audet
    Jan 16, 2014 at 2:59
  • @MarcAudet: I uploaded my css
    – TPL
    Jan 16, 2014 at 3:12
  • You need SASS or the like desperately.
    – user229044
    Jan 16, 2014 at 3:27
  • @meagar: why do I need SASS? I don't understand what's your mean
    – TPL
    Jan 16, 2014 at 3:41
  • It would knock your incredibly dense blob of CSS down to something a fraction of its size.
    – user229044
    Jan 16, 2014 at 3:46

1 Answer 1

0

Try adding

height: 100%;
width: 100%;

on #dialog

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.