Background Div Not 100 % in FF or IE7

Question

I have 2 divs - one semi transparent bg div and one opaque one over it. Here are the CSS snippets. ... Short version - the bg div will not stretch 100% of the way in FF or IE7 though works in IE8, IE6, Safari (Windows), and Chrome. I'm pulling my hair out because I have the html, body, parent divs etc all streching 100% of the height. PLEASE HELP!

#BACKROUND_DIV{
    position:absolute; 
    top:160px;
    left: 250px;
    margin:0;
    float:left;
    background-color:#06064a; 
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    width: 68%;
    _width: 100%; /* stupid IE */
    min-width: 630px;
    min-height: 100%!important;              
    height:     100%;
    padding: 0px;
    z-index:2;
    display: table;
    border:#F00 thin solid;
}


#CONTENT_DIV{
    width: 100%;
    background:transparent; 
    color:#FFF;
    padding: 10px;
    z-index:3;
    top: 0;
    position: relative; 
    margin: 0 auto;
    _height: 100%;
}

Answer 1

make sure "body" and "html" have height of 100% and top and bottom margin of 0. overflow:hidden may also be important.

but the stylesheet you've posted is a bit cluttered and has many browser specific settings. i might recommend creating a very simple version with bare minimum, and then slowly adding back in css and other elements until you cross the boundary where things stop working as you expect. at the very least when you post to SO, you should post the bare minimum thing that breaks, and try to post all relevant html and css so that you can get the help you want.

what's going on with the background_div having a top:160px? I hope you are not expecting the height to stretch 100% and go to the top in this case? Or are you expecting it to start at y=160 and stretch exactly to the bottom of the window but no further? Because I do not expect that to be the result in any browser-- it would probably hang off the end of the page with 160px worth below the bottom of the browser view.

Answer 2

What part of the div is not stretching 100%?

The height stretches 100% in IE7 on my computer.

For FF 3.0, I removed the display: table; and it stretched.

Answer 3

Without having the entire code of the page available, I'd say there are a few likely culprits:

1) Too many browser hacks there. Get rid of 'em. This can be done with perfectly valid CSS2.1 code (except for opacity, but that's not your problem here).

2) Display:table is changing your layout properties, and I'm not clear what purpose it's serving for you.

3) The _height is not being interpreted by any standards-compliant browser and so it's being thrown out, leaving you with no height set on #CONTENT_DIV.

Overall, you need to start clean and build this back up with the simplest code that should work. If you then have problems in, say, IE, I would recommend using Dean Edwards' IE7/IE8 javascript fixes to correct the CSS problems in IE.

Answer 4

This might be a long shot, and might change the paradym (what is failing), but you might have IE in quirks mode. Use this to get it out of that mode and retest.

div /* take IE out of quirks mode */
{
  zoom: 1;
}

Answer 5

It's not exactly the same, but I posted a similar question a while ago. Might want to check it out!

Answer 6

I ended up using a semi-transparent png. Thanks everyone!