Jump to content

Archived

This topic is now archived and is closed to further replies.

titangf

What's preventing 100% height?

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.