CSS Forum

**k3exige** · 08-09-2009, 05:00 PM

Alright so here, you'll see my problem:
http://exige.atbhost.net/extempus

And here's the respective code:

Code:

#container {
    background: url(images/bg2_05.gif) no-repeat top center;
    margin: 0;
    padding: 0px;
    width: 100%;
    height: 672px;
    overflow: hidden;}
    
    #layout {
        width: 689px;
        text-align: left;
        position: absolute;
        top: 134px;
        left: 50%;
        margin-left: -344px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        }
    
    #contentarea {
        background: #FFF url(images/bgcontent.gif) repeat-y;
        width: 689px;
        min-height: 465px;
        height: auto;
        margin: 0px;
        padding: 0px;
        overflow: visible;
        }

Code:

<div id="layout"><img src="images/bartop2.gif" width="689" height="41" alt="Top"/><div id="contentarea">
          <div id="contentleft">
              <?php includes here
                        ?> 
          </div>
          <div id="contentright">
            <?php includes here
            ?>
          </div>
        </div>

So what am I doing wrong and is it fixable?

If you need all the code, download here:

http://exige.atbhost.net/extempus/index.txt
http://exige.atbhost.net/extempus/style.css

**LadynRed** · 08-09-2009, 05:04 PM

I don't see any height issues in Firefox, so is the problem in IE ??
FYI, IE6 does NOT support min/max width/height. You will need conditional comments and separate CSS file for the rules needed to make IE6 work, and in this case, that means feeding it a fixed height.

**k3exige** · 08-09-2009, 05:20 PM

Oh, what Firefox are you on? When I view the homepage in Firefox 3 (latest update) it shows a background break. Here's the CSS for IE, but I just want to get the background to stretch from the top to the bottom without that break. Are you sure it's not there?

Code:

    /* for Internet Explorer */
    /*\*/
    * html #contentarea {
    height: 465px;
    }
    /**/

**chrishirst** · 08-09-2009, 05:26 PM

Use conditional comments NOT ridiculous "hacks"

**k3exige** · 08-09-2009, 05:42 PM

Alright, well either way, if I delete this, it still doesn't work in Firefox. What would the solution be?

**chrishirst** · 08-09-2009, 05:53 PM

What background break?

Google Chrome,
IE8,
FF3,
Opera 9.6,
SeaMonkey 1.17.
at 1280x800 on Windows 7.

Don't see any "breaks" anywhere

**k3exige** · 08-09-2009, 07:35 PM

****. I'm on windows 7 as well. Here's an image on FF3:

http://exige.atbhost.net/extempus/screen1.jpg

**LadynRed** · 08-09-2009, 08:35 PM

Change the overflow:hidden on #contentarea to overflow: auto; and the background will extend as you need it to.

**k3exige** · 08-09-2009, 10:11 PM

Oh, yeah that was it. I changed the overflow: visible to auto under #contentarea and #container. Thanks.