Jump to content
Stef's Coding Community
blowfly123

Background doesn't extend all the way down

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Hehe, I wasn't saying that the tutorial is BAD! :P 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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by blowfly123

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...