[Solved] Strange CSS Problem (Unknown Margin)

[Reggie-Schultz]

Hi, this is my first post!

I am redesigning a website here: pureacademy.ca/new-site/

There is the weirdest thing happening at the very top; it seems there is a 2px stripe! I haven’t got a clue why this is happening and I am spinning my wheels going through my code to see what I’ve done wrong. I have a colour on the html tag. When I remove it then the background image fills in the space, but the graphics still begin that 2px below the top of the page leaving 2px of background above it.

Any help or suggestions are welcome! Thank you!

Reggie.

[christopher]

try putting this in your stylesheet –

*, html {padding:0; margin:0;}

Good luck,

Chris

[Reggie-Schultz]

@Christopher – Thank you, but no, it’s not the answer. I have a full set of resets in an imported css doc. I begin the entire document with everything already zeroed out… this is why this is such a mystery to me!

[jamygolden]

It’s actually quite simple.

Remove this line from your css, it’s right at the top:

Code:

html { background-color: #2a200e; }

[christopher]

"jamy_za" wrote:

It’s actually quite simple.

Remove this line from your css, it’s right at the top:

Code:

html { background-color: #2a200e; }

Reggie was saying he did that, but it still leaves a 2px gap b/w his signup image and the top of the viewport. I would try this, do as jamy_za said, then insert-

*, html (margin:0; padding:0;}

Then change "#sign-up a" {position:aboslute;…} to {position:relative;…}

[Reggie-Schultz]

@rob – thanks – I’m working on implementing the removal of several of the divs – you’re right! I can forget that divs are unnecessary much of the time. I’ll post again if your suggestions don’t prevail.

@chris – yup, you’re right with what you read. I’ll try the above to see if anything else shows up.

[Reggie-Schultz]

So, I’ve stripped out the unnecessary div’s (with the exception of the very bottom one that draws my bottom border) and have lightened my css files. The problem is still there. Strangest – thing – ever.

I know it’s got to be something simple, but my files validate, and my margins and padding are zeroed out. Any other suggestions?

(BTW -the reason I want the html background declared is so that the bottom of my page is dark brown when it is smaller than the browser window. Since I have eliminated that declaration you see it is just the background image repeating, and I wind up with a bottom border "stripe" rather than a nice dark region.)

[Reggie-Schultz]

Maybe this is a clue: it doesn’t seem to be happening in IE6 or 7. It is in IE8, FireFox, Safari, Opera, Chrome…

[Rob MacKay]

interesting, because I got it working fine with the code above…

But anyway – its your margin: 2px auto; in the #nav, take it to margin: 0px auto; and it works :)

[Reggie-Schultz]

@Rob – Thank you so much! So simple, yet so impossible for me to find. The #nav margin was the culprit. It’s been set to zero and the top margin is gone! YAYAYAY! :D

[Rob MacKay]

no probs :)

[Author]

Posts