Hello, I am having a problem with css that I have never had before and for the life of me cannot figure out what is wrong. I have an overall background image that I define in the body tag and another image I need centered in the page in the background of the header. I can do this no problem with a number of different ways, but in the end I decided to use position absolute (I also tried a number of different options all with the same effect). Here is the html code for my page so far (only the body): <body> <div class="header"> </div> <div class="container"> <div class="navigation">Test</div> </div> </body> HTML: And the CSS: * { margin: 0; padding: 0; border: 0; } body { background: #f2f2f2 url('images/bg.gif') repeat-x; } .header { background: url('images/header.png') no-repeat; width: 1068px; height: 250px; left: 50%; margin-left: -534px; position: absolute; z-index: -1; } .container { width: 906px; margin: auto; } .navigation { margin-top: 165px; } HTML: Now for some reason, the entire background image for the header uses the margin-top from the navigation and I have not idea why since they are completely seperate. It displays as it should in the dreamweaver designer, but has a 165px margin on the top when testing in all browsers. Is there something stupid I am just completely missing or is this just weird. P.S. Switching to "padding-top" instead of "margin-top" solves the problem, but seems weird that I should have to do that.
Thanks for the response, but I'm curious as to why margin-top wouldn't work here? The two div's seem to be completely independent of each other.
Try defining the margin-top in the header div. Also, try using some sort of dev tools to test your sites in your browser and adjust css (I use Chrome inspect element), rather than relying on Dreamweaver display which is not always accurate.
The header has no top value ( top: 0; ). I've always read that when you absolutely position an element, you should give it both vertical and horizontal values.
I actually ended up not using a padding or margin at all, but that sounds like it would have fixed my problem. Thanks.
Just came here to say that your code wont validate if you're only planning on using the classes of 'header' and 'navigation' just once. Classes are meant for repeated calls from a bunch of different elements as where id's are meant for a single call from a single element.
Thank you, wasn't aware that it would error if classes were used only once, but I knew about the id aspect.
You are partly right about using IDs for unique elements, but having only one element for a class will not stop the code from validating. Run this code through the W3C Validator and you will not get any errors. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Title</title> <style type="text/css" media="all"> .header { color: green; } .navigation ( color: blue; } </style> </head> <body> <div class='header'>Header</div> <div class='navigation'>Navigation</div> </body> </html> Code (markup):