What's preventing 100% height?

[titangf]

Hello one and all. I've been working on a template design that requires that the height be 100%. And for the most part it works, except in Firefox. Could anyone help with the solution? I'm a little perplexed as to why firefox doesn't like this code (if you could explain this too I would be ever so grateful). The gap occurs at the bottom of the page and happens in Firefox.

[a href=\"http://www.tornadopixel.com/MountainEast/template4.htm\" target=\"_blank\"]The template I've been working on...[/a]

Thanks, in advance, for any help that you can provide.

[Zane]

you need to merge your background into one image

you just need a line about 1024px wide
and maybe 5px tall

then you can do this

[code]    body{
        font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
        font-size:0.5em;
        margin:0px;
        padding:0px;
        text-align:center;
        background-image: url("background.jpg");
                background-repeat: repeat-y;
        align:left;
    }[/code]

[titangf]

Is this problem being caused because I don't have one primary background image? Because honestly, my first instinct is to start looking at the DIV and Table. But that's just me.

I can't do what your suggesting because I want the dropshadows on both sides of the main content window to stay where they are. If I combined all background images it won't be viewable at different monitor resolutions. I'm trying to leave in some flexibility to the design for resizing issues.

[ccm84]

Its actually a pretty simple fix. In CSS & HTML there is no standard for making a page 100%. There are two easy ways to do this.

The invalid way, but works fine:
html,body{
margin:0;
padding:0;
height:100%;
border:none
}

The valid way, which works if you use a table to contain:
#fullheight{height:100%}
<table id="fullheight">

Then you would use any of the filler spaces with teh fullheight id tag aswell.

httpdotdone

[titangf]

imchase... The code that you suggested:
[code]
//this is your code
html,body{
margin:0;
padding:0;
height:100%;
border:none
}

//what was already there
body{
    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    font-size:0.5em;
    margin:0px;
    padding:0px;
    text-align:center;
    height:100%;
    align:left;
    background-image: url("images/background.jpg");
        background-repeat: repeat;
}
[/code]

I have already done to my html page. (excluding the html in the css style sheet, which I tested and I can't see any difference) I looked over what you were saying and the code you've suggested has already been done.
[code]
#fullheight{height:100%}
<table id="fullheight">  [/code]

This you suggested doesn't seem stream lined in my mind and is more work into it than just putting down height = 100% manually.