css - divs appearing different on different browsers

Question

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 post is overlapping onto the comments section.

Can you help me fix that?

thank you

Answer 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 3c 21 44 4f 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 is not finished