CSS working for chrome but not for firefox - css

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.
Having <iframe> above the popup in the html structure somehow messed up with the positioning of the popup.
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 :D )
http://fiddle.jshell.net/CH6ny/6/

Answer 2

I don't exactly know why, but when I upgraded to Firefox 5 the issue resolved itself. Thank you everyone for all your time anyway!

Answer 3

To get something to appear on top of another, you will need to set the z-index values and I think also set the position.
For the element that you want to be on top, set the z-index value like this:
#idOfTopElement {
z-index: 1;
}
#idOfNextElement {
z-index: 2;
}
You might need to add position: relative; or position: absolute; to one or both of those depending on what position you are using, but I can't remember for sure.

Answer 4

If you are not completely against a javascript/jQuery solution, here is an option that might work. I chose to do the top and left adjustments onload, but it would make more sense to do it when you call the creation of the popup_window:
http://jsfiddle.net/CH6ny/4/
It worked in Chrome, FF, IE, and IE quirks mode.