Jump to content


Photo

What's preventing 100% height?


  • Please log in to reply
4 replies to this topic

#1 titangf

titangf
  • Members
  • PipPipPip
  • Advanced Member
  • 58 posts
  • LocationColorado, USA

Posted 28 April 2006 - 07:52 PM

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.
[!--coloro:#3366FF--][span style="color:#3366FF"][!--/coloro--][a href="http://www.csszengarden.com/" target="_blank"]css zen garden - beautiful design with the programmer in mind[/a][!--colorc--][/span][!--/colorc--]

[!--coloro:#3366FF--][span style="color:#3366FF"][!--/coloro--]Time is the invention of man to gauge what his achievements have been before he fades to dust.[!--colorc--][/span][!--/colorc--]

#2 Zane

Zane
  • Administrators
  • Advanced Member
  • 4,134 posts

Posted 28 April 2006 - 09:14 PM

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

    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;
    }

btn_donate_SM.gif Want to thank me? Contribute to my PayPal piggy-bank
 

172938.png

#3 titangf

titangf
  • Members
  • PipPipPip
  • Advanced Member
  • 58 posts
  • LocationColorado, USA

Posted 28 April 2006 - 09:34 PM

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.
[!--coloro:#3366FF--][span style="color:#3366FF"][!--/coloro--][a href="http://www.csszengarden.com/" target="_blank"]css zen garden - beautiful design with the programmer in mind[/a][!--colorc--][/span][!--/colorc--]

[!--coloro:#3366FF--][span style="color:#3366FF"][!--/coloro--]Time is the invention of man to gauge what his achievements have been before he fades to dust.[!--colorc--][/span][!--/colorc--]

#4 ccm84

ccm84
  • New Members
  • Pip
  • Newbie
  • 2 posts

Posted 02 May 2006 - 06:26 PM

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

#5 titangf

titangf
  • Members
  • PipPipPip
  • Advanced Member
  • 58 posts
  • LocationColorado, USA

Posted 02 May 2006 - 07:06 PM

imchase... The code that you suggested:
//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;
}

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.
#fullheight{height:100%}
<table id="fullheight">  

This you suggested doesn't seem stream lined in my mind and is more work into it than just putting down height = 100% manually.
[!--coloro:#3366FF--][span style="color:#3366FF"][!--/coloro--][a href="http://www.csszengarden.com/" target="_blank"]css zen garden - beautiful design with the programmer in mind[/a][!--colorc--][/span][!--/colorc--]

[!--coloro:#3366FF--][span style="color:#3366FF"][!--/coloro--]Time is the invention of man to gauge what his achievements have been before he fades to dust.[!--colorc--][/span][!--/colorc--]




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users