Main background is showing through footer and headers rounded corners

[pandaking]

Hi,My problem is that the image which gets repeated up and down my page is peeking through from behind my footer and header.You can see the problem clearly by visiting my website and scrolling down to the bottom / up to the top:http://red88music.co.ukI have tried putting padding and margins on just about everything to no avail.Any ideas?Thanks,Panda

[newseed]

There's just too much stuff to go through to determine the problem and fix. I would suggest making a backup copy and then strip everything out that has nothing to do with the structure of your layout (i.e. unlink all styles sheets, remove non-structure styles). This includes stripping out any contents within your html (i.e. h1, h2, etc. p, span, etc.)When you do this, do them one at a time or a small portion at a time and then check the results. Once you see it bumps the header up, you can then determine what part of the last code you removed that is the cause.

[pandaking]

There's just too much stuff to go through to determine the problem and fix. I would suggest making a backup copy and then strip everything out that has nothing to do with the structure of your layout (i.e. unlink all styles sheets, remove non-structure styles). This includes stripping out any contents within your html (i.e. h1, h2, etc. p, span, etc.)When you do this, do them one at a time or a small portion at a time and then check the results. Once you see it bumps the header up, you can then determine what part of the last code you removed that is the cause.

Hi newseed,Well I have tried moving things and I can "bump the header up" as such, but the #page background just extends with it.I think I know what the problem is however:Because the #header and #footer are all in the #page div, and the #page div has the repeating background then it just repeats behind them.(I applogise for my lack of being able to explain things very clearly).Solutions I can think of?:

• Find a way of having the background image of #page start to display x pixels down. Like position the background image (not sure if this is possible).
• Move the #Header and the #Footer out of the #Page div, and then they won't have the background behind them.
• Hide the #Header and #Footer, and just insert images above and below the page

What do you think?Thanks again newseed...

[aspnetguy]

Without looking at the code it appears that you have applied the main background to the page body. Since you have margins above your header and below your footer this is why the background shows. It would be best to apply a structure somthing like below

body---content wrapper (apply main bg to this)------header------content------footer

This way you would apply the top and bottom margins to the wrapper and the bg would stay within the wrapper. Does this help?

[pandaking]

Hi aspnetguy,Ahh yes - thanks for the clarification.Small problem:I was toying around with this idea earlier, and here are the results -Original: http://red88music.co.uk/Red_88v1.htm

<div=id"page">	<div=id"Header"></div>	<div=id"Footer"></div></div>

Edited Header (Which works): http://red88music.co.uk/Red_88v2.htm

<div=id"Header"></div><div=id"page">	<div=id"Footer"></div></div>

Edited Header & Footer (All goes wrong): http://red88music.co.uk/Red_88v3.htm

<div=id"Header"></div><div=id"page"></div><div=id"Footer"></div>

I can't work out why the last one just kills the page?Thanks for all the help so far btw...

[aspnetguy]

I ran the last page through the w3c validator and it says you have some open and closing tag mismatchs on some (or one) of your divs. Look at this closely.I like to do the follow to help me see where each opening an closing tag is.

<div id="one">  <div id="two">  </div><!--/#two--></div><!--/#one-->

when you have really large and complicated nested tags this can help alot to spot problems.

[pandaking]

I ran the last page through the w3c validator and it says you have some open and closing tag mismatchs on some (or one) of your divs. Look at this closely.I like to do the follow to help me see where each opening an closing tag is.

<div id="one">  <div id="two">  </div><!--/#two--></div><!--/#one-->

when you have really large and complicated nested tags this can help alot to spot problems.

I am doing that now, but a search in notepad found 32 "<div" and 32 "</div", so I think there's enough of each.Can opening/close mismatches mean anything else other than divs?Also, when I open up the file in dreamweaver, it's like the #page div just isn't expanded...

[aspnetguy]

I am doing that now, but a search in notepad found 32 "<div" and 32 "</div", so I think there's enough of each.Can opening/close mismatches mean anything else other than divs?Also, when I open up the file in dreamweaver, it's like the #page div just isn't expanded...

There may be the right number of open and closing divs but they could be closing in the wrong order. Check all your tag openings and closings.

[aspnetguy]

also try removing bits of text and other content to work with the skeleton of your layout to simplify things.

[pandaking]

There may be the right number of open and closing divs but they could be closing in the wrong order. Check all your tag openings and closings.

Ok, I think that's all the commenting for the divs: http://red88music.co.uk/Red_88v4.htmThanks very much mate

[aspnetguy]

Ok, I think that's all the commenting for the divs: http://red88music.co.uk/Red_88v4.htmThanks very much mate

it looks like you don't have a closing tag for <div id="page">

[pandaking]

it looks like you don't have a closing tag for <div id="page">

OK, I messed up the commenting a little Try this one: http://red88music.co.uk/Red_88v5.htmCheers!

[pandaking]

Well we are getting there! :)I had a go editing the style.css, and if I made the #page div have a set height then the background image would work fine.So the only question now is - why does the #page div not automatically expand with all the content which is "supposedly" in it?Link: http://red88music.co.uk/Red_88v6.htmStyle.css: http://red88music.co.uk/style.css

[aspnetguy]

you need to add a clearing break after your sidebar. In Firefox a floated element will not stay inside it's parent element. Try this.

</div><!--/#sidebar--><br style="clear:left"/>

[pandaking]

you need to add a clearing break after your sidebar. In Firefox a floated element will not stay inside it's parent element. Try this.

</div><!--/#sidebar--><br style="clear:left"/>

YOUR A GENIUS! Now just to implement it into my actual page and I am nearly done.Thank you so much for all your wonderful help. You have taught me some great techniques for finding problems.I really appreciate your time, thanks again...