However the background center and text-align center seem to be in two different places, if you look you'll notice that the image is one more pixel to left and the white is one more pixel to the right. so not right in the center, it does the same if the image size is changed to 749 pixels instead of 750px also ??? How can i get them to both align and why are they not?
Second problem is any idea how to get rid of the white space between the header image and the menu bar below? I want them to run smooth together but I cant for the life of me figure out how - ive minus padding and minus borders and everything !
Obviously you are looking at this in Internet Explorer, as FireFox renders it fine. ALWAYS develop using Firefox as the main browser, and check in IE.
You will never get IE to adhere to any standards without a proper doctype at the start of teh page - I would suggest html 4.01 strict
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WORK IN PROGRESS</title>
If you start your css with
this will zero out all default browser applied margins and paddings for a known start point - you then apply whatever margins etc you need.
This is a center calculation rounding error in IE. You will notice that if you vary the width of the browser, the background jumps between being correct or 1 pixel out, so the final exact position of the background will depend on user window size. IE does seem to handle it if the centered wrapper is an odd pixel width whilst the backround is an even width - playing with that may help you.