Divs Appearing Different On Different Browsers

This page is appearing perfect on firefox, but differently corrupt on IE & chrome: http://camethra.com/?p=76. on IE: the whole container div is right aligned. on chrome: the po

Solution 1:

The other answers are correct, but not quite there.

Your page is rendering in Quirks Mode in IE, and that's why it looks broken in this browser.

The reason you're getting Quirks Mode is the two UTF-8 byte order marks at the start of your file:

ef bb bf ef bb bf 3c21444f 43
.  .  .  .  .  .  <!  D  O  C

You'll need to save your file without this. It should be an option in whatever editor you're using.

To fix Chrome, you should fix the validation errors, particularly the ones like this:

end tag for"ul" which isnot finished

Solution 2:

For IE: Remove the whitespace before the doctype. It causes IE to fall back to Quirks mode.

Generally: Fix the markup errors first.

Solution 3:

In IE8 your document is being viewed in Quirks Mode. (open the page in IE8, press F12 to enter IE's Developer Tools, the Document Mode currently chosen by IE is on the top right). You probably have some XHTML or CSS that IE believes is not valid causing it to render in Quirks Mode by default.

http://www.quirksmode.org/css/quirksmode.html