Take the 2-minute tour ×

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;

.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 */

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

        /* Older than Firefox 0.9 */

        /* 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.

share|improve this question
Could it be a zIndex issue? I don't see you specifying it at any point... –  Xander Jul 11 '11 at 17:52
I prefer to answer questions where i can check out the problem myself or where its easy to jsfiddle the code. Also i dont know what the problem could be right off the bat. –  Joonas Jul 11 '11 at 17:52
Side-note: In some places you're using background: and in other places you're using background-color:. I'd stick with the latter. –  Sparky Jul 11 '11 at 17:56
I would only use background-color with emails but otherwise there is no reason to use it. Plus background is shorter. @Kvass i have a bit of a dyslexia plus i dont quite understand your id's and classes, would you mind pointing out which one is the element that gives you trouble? –  Joonas Jul 11 '11 at 18:11
@Kvass I really couldnt connect the dots with the code, but i hope this little example helps. jsfiddle.net/SNpR8 ( as this currently is, it should work in all the major browsers and ie6+ ) –  Joonas Jul 11 '11 at 19:27

4 Answers 4

up vote 2 down vote accepted

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 :D )


share|improve this answer
unfortunately though it appears to work in JSFiddle this didn't solve the problem in FireFox -- the iframe is still being scrunched at the top, while it is supposed to span the full length of the page this is a picture of how it appears: i1197.photobucket.com/albums/aa428/doodledude111/… –  Kvass Jul 11 '11 at 22:22
Compare that picture with the desired display: i1197.photobucket.com/albums/aa428/doodledude111/… –  Kvass Jul 11 '11 at 22:24
What the heck.. i thought i made it in firefox.. I gotta check it out tomorrow. –  Joonas Jul 11 '11 at 22:55
I really appreciate your help btw –  Kvass Jul 12 '11 at 1:40
the issue resolved itself in ff5 for some reason, but i upvoted for the time u took to help me out anyway –  Kvass Jul 12 '11 at 4:42

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!

share|improve this answer

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.

share|improve this answer

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:


It worked in Chrome, FF, IE, and IE quirks mode.

share|improve this answer

Your Answer


