Question

My CSS code below is working fine in Chrome, but isn’t working in Firefox. I think it might just be a syntactical difference but I can’t figure out what is going on. Are there any mistakes in my CSS code below?

#framed_source {
    background-color: white;
    display: block;
    height: 97%;
    width: 100%;
    padding: 0px;
}

#grey_cover {
    position: fixed;
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    top: 0px;
    left: 0px;
    background-color: #3F3F3F;
    /* Transparency is applied through the transparent class */
}

#popup_window {
    background: #D0E9F3;
    visibility: visible;
    border: 1px solid #666;
    padding-top:20px;
    padding-bottom:20px;
    padding-right:20px;
    padding-left:20px;
}

.with_frame {
    position: absolute;
    width: 600px;
}

#popup_window_content {
    overflow: auto;
    color: #1F313E;
    font-family: Calibri;
    max-height: 200px;
}

.transparent {
        /* Required for IE 5, 6, 7 */
        /* ...or something to trigger hasLayout, like zoom: 1; */
        width: 100%; 

        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=50);

        /* Older than Firefox 0.9 */
        -moz-opacity:0.5;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 0.5;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any?
        /* Opera 9+, IE 9+ */
        opacity: 0.5;
}

Basically I have a popup window that is displaying on top of an iframe. In Chrome it does this correctly, in FF it displays the popup beneath the iframe. Any ideas? I think it has to do with absolute / relative positioning.

Picture of Firefox — Incorrect CSS
Picture of Chrome — Correct CSS

I also created a JSFiddle for this CSS with the corresponding HTML. I am trying to get the blue box appearing below the frame to appear centered in front of the frame.

Answer 1

So, in the end this is what was wrong.

1. Having <iframe> above the popup in the html structure somehow messed up with the positioning of the popup.
2. Since html and body were just hanging out there, they didnt stretch all the way to the bottom and restricted iframe from going further as its height was set with percentage.. ( This is something i do remember fixing at some point.. but it was already past midnight when i was checking into it, so who knows where that disappeared 😀 )

http://fiddle.jshell.net/CH6ny/6/