Jump to content

Background doesn't extend all the way down


blowfly123

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?

Link to comment
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.

Link to comment
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.

Link to comment
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
Link to comment
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.

Link to comment
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.

Link to comment
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...