Why are all of my DIV misaligned in IE8, and why can't I fix it?

Question

Hey all,

I know you are smarter than I and, therefore, should be able to help. For some reason my site freshwaterhobbyist.com looks terrible in IE8. All of my Div containers are misaligned and everything is pretty much helter skelter. Putting it in compat mode DOES fix the issue, but I would like IE8 users to see my site as intended when they first reach it...anything would help.--Jesse

Answer 1

Put this:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

In the "head" of your document right beneath the title. It will force the site to always render in IE7 for IE8 users, even the first time they visit.

Answer 2

The first thing I see is that you are using an XHTML Transitional doctype, but your page doesn't conform to that spec. Little things like <br> tags instead of using <br /> tags. Also you seem to have a fair number of tags that don't have starting points and others that don't have ending points. Finally, you have tags that are illegally embedded within other tags.

You might want to start with using a doctype that matches your html code. For example, html 4.01 transitional. It tends to be a little more forgiving to malformed html.

See more information at: A List Apart.