Extra Space w/ Background Image

@ChuckBJul 19.2009

Hello..

If you look at this link: ~~[url]~~http://ibtestsite.info/Bookclub%28AJAX2%29%28f%29.html[/url]

you’ll see that I have my #container outlined in green..

Right now I’m trying to figure out how to get rid of this extra space underneath the container (or some of the extra space)..any suggestions?

to post a comment

CSS

10 Comments(s) _↴

@Andyram2kJul 20.2009 — #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;

[B]height:100%; /* Important */ [/B]

}

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

[B]height:100%; /* Important */ [/B]

}

Hope this helps.

@ChuckBauthorJul 21.2009 — #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;

[B]height:100%; /* Important */ [/B]

}

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

[B]height:100%; /* Important */ [/B]

}

Hope this helps.[/QUOTE]

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.

@Andyram2kJul 21.2009 — #Rightio, try this:

HTML {

MIN-HEIGHT: 100%;

HEIGHT: 100%;

}

BODY {

BACKGROUND-COLOR: black;

HEIGHT: 100%;

MIN-HEIGHT: 100%;

}

#container {

BORDER-BOTTOM: green 1px solid;

POSITION: relative;

BORDER-LEFT: green 1px solid;

MARGIN: 0px auto;

HEIGHT: 100%;

BORDER-TOP: green 1px solid;

BORDER-RIGHT: green 1px solid;

}

Hope this helps ?

@ChuckBauthorJul 22.2009 — #Sorry Andyram2k...

still nothing...?

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...

@Andyram2kJul 22.2009 — #Ah, just spotted something in your CSS..

BODY {

BACKGROUND-COLOR: black;

HEIGHT: 100%

MIN-HEIGHT: 100%;

}

Make sure you end with a ;

BODY {

BACKGROUND-COLOR: black;

HEIGHT: 100%[B];[/B]

MIN-HEIGHT: 100%;

}

This should hopefully work for you now ?

@ChuckBauthorJul 22.2009 — #It's still there....

I changed the body background color to 'none'..I want the image to cover the entire background...so I'll still play around with it..

@ChuckBauthorJul 22.2009 — #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...

@Andyram2kJul 22.2009 — #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.

@ChuckBauthorJul 23.2009 — # If so, the background image would need to go in the main body style.[/QUOTE]

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 :rolleyes:

@ChuckBauthorJul 23.2009 — #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.[/QUOTE]

Okay..check this out....

with this link: http://ibtestsite.info/Bookclub%28AJAX2%29%28d%29.html

everything fits perfectly...

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..).

so in this link: http://ibtestsite.info/Bookclub%28AJAX2%29%28f%29.html

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?

Also in #CSS _↴

first css site...advice/feedback please...Inherited Properties http-equiv ... charset=

Success!

Help @ChuckB spread the word by sharing this article on Twitter...

Tweet This

Extra Space w/ Background Image

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Extra Space w/ Background Image

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴