[olePigeon]

ClickWidget: Welcome

Could someone take a look at my code? I'm very new to CSS and I can't figure out why the top margin is still there. I thought I set everything correctly.

I would like the background image to be flush with the top of the browser window.

[besson3c]

Originally Posted by olePigeon 

ClickWidget: Welcome

Could someone take a look at my code? I'm very new to CSS and I can't figure out why the top margin is still there. I thought I set everything correctly.

I would like the background image to be flush with the top of the browser window.

You need to set the margin and padding of the html tag to 0, or else use a CSS reset library. Your body tag doesn't start at the top of the page like you want. You can see this for yourself using the Webkit inspector.

[andi*pandi]

You can also set div#main to something like:

margin: 0 auto;
padding: 20px 0 0 0;

and that also takes care of it. Even if I add margin: 0 and padding: 0 to html as Besson suggests, that gap was still there.

There's also a trick with height:100% that you can check out.

There's more than one way to get it done, but I'd recommend putting the stripey pattern as a repeat-y for #main, and putting the other face/deco stuff as the background-position: top for #content. It will help your height issue. I don't think you need position: relative for this layout.

[olePigeon]

Thanks for the tips, I'll try them out.

I'm going to change the face. Someone told me it looked like Elvis, and now that's all I see. It was originally a statue from some office building that I used as a template. I think I'll get rid of the hair bun.

[olePigeon]

I started to reconstruct the HTML/CSS from the beginning, stepping through to see what was happening. Turns out it was my <p> tag. I moved the text-indent from the #content to the P tag, and added the margin properties. That seems to have fixed it.

p {
text-indent: 20pt;
margin: 0;
padding: 0;
}