Background doesn't extend all the way down

[blowfly123]

Note: If you quote code or anything please XXX out the URL or any identifying info so google doesn't index this thread for the site's content. Thanks in advance.

 

Here's the site: http://tinyurl.com/d7lqoh

Here's the CSS: http://tinyurl.com/c6t3o2

 

Right now I have the following pertinent CSS;

 

html>body, html>body #wrap {
   height: 101%;
}


html {height:101%}

body {  margin:0 auto; height:100%}

#columncontent{margin:0 auto; width:800px; height:101%;   background:url(img/gradient-bg-col.jpg); background-repeat:repeat-y; top:98px; left:426px; }

 

I've tried setting those heights to auto as well but that makes the background just a thin strip at the top. Thoughts?

[falkencreative]

You'll need to post a correct link to the HTML - the link you posted doesn't work.

 

Off the top of my head, either you'll need to add a clearing div, or possibly overflow:auto -- I'd have to look at the page itself to be sure.

[blowfly123]

Yikes, appears tinyurl doesn't like question marks.

 

Ok go here: http://tinyurl.com/bdau48 and then choose "Programs and Services" to see the problem (or add ?cat=14 to the URL)

[falkencreative]

If your remove "height:101%" and add "overflow:auto" that fixes it on Firefox 3. I'd suggest making that change and then checking IE.

[blowfly123]

You the man! Thanks!

 

(I love this site )

[blowfly123]

Although actually now pages that are shorter than the browser window shrink down to the minimum height... (go to the "contact" page)

What can I do to make sure it stretches at a minimum to the bottom of the screen?

[virtual]

In Firefox3 on a Mac your header is several pixels over to the left and the top navigation links overflow onto the background. I think you need a little more padding-left on your vertical navigation, it is very close to the edge.

 

I can see you are working on it as I write.

[blowfly123]

In Firefox3 on a Mac your header is several pixels over to the left and the top navigation links overflow onto the background. I think you need a little more padding-left on your vertical navigation, it is very close to the edge.

 

I can see you are working on it as I write.

 

Thanks. That's already on the mental to do list. The background/page height thing is what's driving me nuts right now.

[PicnicTutorials]

Not only take away height 101 percent (phones broken - can't get to characters), but also add min-height 100 percent to the wrap.

 

Basically, read this, it will all become clear. http://www.visibilityinherit.com/code/height-stickyfooter-centered.php

[blowfly123]

Thanks for that. I have to say, this is one of those issues that I just can't figure out. That tutorial works great if your content is exactly one

 

and nothing else. I'm going to try to take the whole damn thing apart and put it back together again I guess. It just doesn't want to do it.

[PicnicTutorials]

That tutorial works great if your content is exactly one

 

and nothing else.

 

Yeah what was that guy thinking? Who has only one "p" and nothing else! Duhh...?

[blowfly123]

Hehe, I wasn't saying that the tutorial is BAD! Just that I tried to implement it and everything went crazy. That's why I said I was gonna spend time taking the whole thing apart and reworking it.

[PicnicTutorials]

That 80px of bottom padding can be applied to anything that's just above the footer. A div, the last "p" in the html. Or another 80px height div altogether (AKA a clearer div). Using padding is a way to avoid adding another unnessesary div.

[blowfly123]

I was thinking about trying that. Glad to see that it's the right way to go.

 

btw as always I really appreciate your assistance (and everyone else's).

[blowfly123]

I completely rebuilt the site using Eric's tutorial as a guideline and I think it all works now; I haven't tried IE 6 yet :mad: but on mac and PC safari and firefox plus opera and ie7 it looks good to me. If anyone wants to give it the once over and tell me what you think that would be sweet! Thanks!

 

http://tinyurl.com/bdau48

 

The only thing that i did differently is put the header outside the wrap because it has a different width and it was just simpler that way. The only bad effect of that that I can see is that it pushes the footer down below the bottom of the screen (because the overall height is now header + 100%) but I'm not too worried about that.)

Edited February 20, 2009 by blowfly123

[virtual]

On your home page the header is not in the same place as on the other pages. It's about 10px to the left.

 

In IE6, the overall design holds together, but the 3 text boxes go straight down the page and onto the background. They also have a border around them which doesn't match the page colour, and the text flows out of the boxes. If you don't have IE6 to test on you can go to this address, ip info.info/net renderer/ (remove spaces) which will show you a screen shot in whichever browser you pick.

[blowfly123]

I've been working on ie6 and may have fixed it since you saw it (i have to run intoo a different room to reload it each time i make a change)

 

as for the header thing, i see that. i'll do that next... thanks!

[blowfly123]

actually i think the header thing might be an optical illusion based on the jagged edges and the lack of a scrollbar on the frontpage.

 

edit: yeah, it is. if i set html height to 101% so there's a scrollbar on the frontpage then you see the header doesn't move. I think i'll try to move the flash movie over to compensate instead of messing with the header.

[PicnicTutorials]

Just use

 

html overflow-y: scroll

 

that will put a perma bar