Hi guys. I'm trying to help out someone who has a problem with their header being centered. I am not the original designer, but was able to simplify the website to its basic and fix the problem. However, it seems its only fixed in IE, and not in Firefox or Chrome. Here is the barebones website: http://temptestingdomain.hoxt.me/ The CSS can be downloaded here: http://temptestingdomain.hoxt.me/mystyle.css (sorry about the hosting, this is the only temp one I could find that did the least damage to the style) - I've also uploaded the entire site here, should be easier to view and work with: http://www.sendspace.com/file/n8y2fa Basically, everything must be centered in all browsers. I don't want to do a complete redesign of this site, and have searched high and low for a solution to no avail. If anyone can help that would be great. Thanks guys.
Usually, to center an element of a specific (non-100%) width, you'd set the style of the element to be "margin-left: auto; margin-right: auto;". For text and some images, you would set the style of the surrounding container to "text-align: center". However, in most standard-compliant browsers, this will not work for elements with a absolute positioning. If you want to use the properties I mentioned, you cannot use "position: absolute;" for the target elements.
The web developer's mantra is: If it works in IE but not the other browsers then your code is wrong. Never, ever use IE to initially test your markup. Always, always use ANY other browser. IE8 is 11 years behind all other browsers in modern standards and practices and inept at best. 1) Your doctype is wrong, putting IE into quirks mode. Use this one: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2) Here is your list of HTML errors.