Image placement problems

[fab0990]

Okay well heres my dilemma. I started reading up on css last night and I got a fair bit done so I decided to try and build a page today I have had lots of problems which are due to my inexperience but for the most part i have found ways round them, I wanted a centered background for my main text which I accomplished by setting an image as background and tiling it vertically I then wanted a header image that scrolls out as you scroll down but I could not figure out how to do this so I decided to add my header image to the top of my html document and not be part of the external css file. I got the image to the position i wanted by setting a left margin in the css file for it then tested it and was quite proud of what i had accomplished :D but then I tested in firefox and all was not as it should be :mad: the image was off by a couple of pixels. I checked both my html and my css files to check that they validate and both do! so the only thing I can think off is that ie or firefox automatically inserts a margin but I doubt this so if anyone could help me out I would be very happy.

PS. don’t flame me because i only started learning css the night before, in my experience the best way to learn is to just dive in and get stuck into it overcoming obstacles as they arise.

Ive hosted both the css and html file on my site you can check them here:

This is the html file the desired effect can be seen when viewed with internet explorer (http://www.fabs-site.co.uk/csstest/index.htm)

This is the css file so you can check if the is the problem (http://www.fabs-site.co.uk/csstest/1.css)

[silverbullet24]

try adding padding:0 and margin:0 to your body tag in css

[ray326]

WAG

#titlelayer
{
margin: 0 0 0 85px !important;
margin: 0 0 0 83px;
}

[fab0990]

Ahhh thank you very much for your replies Ray326 you fixed it :) but could someone explain the function of having 2 margin tags so that i understand where i went wrong

[spook]

Wel, I am a so called newbie too, But I believe I might be able to help you out.

Stop me if I am wrong, but if when you put in the images side by side it lefted a space inbetween?

I use to get that problem in Dreamweaver, until I figured out you can simple use it like a text doc. and delete that space.

I hope I have helped.
:D

[ray326]

could someone explain the function of having 2 margin tagsIt's a hack (actually I think this kind of thing is being called a "filter"). Versions of IE that don't understand !important also screw up the box model so one way to sort things out is to tell the real browsers the correct size and set it !important. That should override any other attempt to apply that particular style to that selector. Follow it up with the identical style incorrectly sized in a way that makes IE "do the right thing." It shouldn't apply that second style but it does and so your page looks the same in it as it does in a web browser.

[fab0990]

It's a hack (actually I think this kind of thing is being called a "filter"). Versions of IE that don't understand !important also screw up the box model so one way to sort things out is to tell the real browsers the correct size and set it !important. That should override any other attempt to apply that particular style to that selector. Follow it up with the identical style incorrectly sized in a way that makes IE "do the right thing." It shouldn't apply that second style but it does and so your page looks the same in it as it does in a web browser.
Thanks for youre help :) :)