Hi ChuckB,
The space at the bottom is where your #container div ends. This space will be variable, depending upon what the visitors screen size is. You can set the #container to be 100% height, which should be what you're looking for:
BODY {
BACKGROUND-COLOR: black;
HEIGHT: 20px; height:100%; /* Important */
}
#container {
BORDER-BOTTOM: green 1px solid;
POSITION: relative;
BORDER-LEFT: green 1px solid;
MARGIN: 0px auto;
BORDER-TOP: green 1px solid;
BORDER-RIGHT: green 1px solid; height:100%; /* Important */
}
Hi ChuckB,
The space at the bottom is where your #container div ends. This space will be variable, depending upon what the visitors screen size is. You can set the #container to be 100% height, which should be what you're looking for:
BODY {
BACKGROUND-COLOR: black;
HEIGHT: 20px; height:100%; /* Important */
}
#container {
BORDER-BOTTOM: green 1px solid;
POSITION: relative;
BORDER-LEFT: green 1px solid;
MARGIN: 0px auto;
BORDER-TOP: green 1px solid;
BORDER-RIGHT: green 1px solid; height:100%; /* Important */
}
Hope this helps.
Thanks for the response...attempted it and it's still doing the same thing. In fact this is what I tried before and I get the same results. I also copied and paste your code.
I think that it has something to do with the background-position property for the #background id...if you notice the background is an image inside a <div> container....I probably could've just set it as the background for the <body>, but I just didn't do it that way...However, it should still work..I'm still playing around with it...
I tried to play around with it as much as I could this morning..it's still not doing anything...the min-height stuff isn't working at all...the only time I got something to happen is when I played around with background-position inside the 'bodybackground' id....this just got it to completely center it and that's all...
Just to clarify your problem, is it the height you need to be 100% of the screen, as you said in the first post, or do you need the background to fill the entire screen? If so, the background image would need to go in the main body style.
If so, the background image would need to go in the main body style.
Okay, you're right that's it...I tried to design it a little differently but to fill the entire screen it does have to be in the body tag..I think my issue of eliminating space underneath the two long rectangular graphics was a design issue.
It also seems that 'no matter what' some browsers will give you a little extra space because no matter what I did..even now after the changes you suggested..there's still a little extra space in Firefox, but none in IE....whatever I guess
Just to clarify your problem, is it the height you need to be 100% of the screen, as you said in the first post, or do you need the background to fill the entire screen? If so, the background image would need to go in the main body style.
but I wanted it to be coded better...the place where you see the 'interest' options like bicycling..etc, it wasn't efficient coding. So I wanted to include those options with the form above. Those options had their own separate forms and <div>'s. So I had to find a way to include those options in the same form tag with the form above it (Name, Email, Birth..).
I got rid of those two <div's> for both 'interest' selections and included them in the same table as the (Name, Email) form above them, but I created <table>'s within </table>'s...
Something happened when I deleted the <div>'s and created <table>'s. The <div>'s on the first link were floated...whatever happened I'm trying to figure out for future references, because the first link clearly shows that I didn't have to include the background image in the <body> tag to get rid of extra space underneath...what do you think?
Reply With Quote
Originally Posted by Andyram2k
Bookmarks