Simple CSS question about positioning

Factual Questions
1

Easy question, I think: I have an image that I want to stretch across the length of the screen, but I’m having an issue that should be easy to fix, but I can’t figure out how and can’t find the answer online. Basically, when I use the below code, it by default places the image not at the upper left edge despite my explicit instructions (!), but a few (~8) pixels away from the edge. How do I get it to stop doing that? And can I do it without using negative numbers in the top and left tags?


div.top {background-image:url('background.gif');
	position:relative;
	width:100%;
	height:136px;
	top:0px;
	left:0px;}
2

That’s either the margin or the padding of the body, IIRC.

3

Is it doing it in Firefox and IE or just one? If so which version are you testing it on.

You might also want to look around Dynamic Drive forums they are very helpful and experts

4

You are using position:relative, which makes your div be positioned relative to everything else on the page. The body and html elements have inherent margins and padding. If this is the very top element on the page, you can just make CSS rules for body and html that make the margin:0 and padding:0.

If there are elements coming before this one, it gets complicated. Changing your position to position:absolute will make your div leave the flow of the page - BUT only until the next highest element with position on it. So if div.top is within div.containTop and div.containTop has position on it, div.top will position itself at top:0 left:0 of div.containTop. But if there is no position on any elements containing div.top then it will position itself according to body.

5

Great, that worked. Thanks!

6

And different browsers have different default values in CSS. A very popular method is to use CSS reset code that zeros out all default CSS values, regardless of the browser. You can then apply values so that your page looks almost identical in any of the Tier 1 browsers.
Here’s a very good explanation of CSS reset. The only caveat is you really need intermediate to advanced web/CSS skills. And I don’t mean being proficient at Wordpress or other Easy-Bake Oven web tools. I’m talking working at pure code level skill.