CSS: My site looks exactly the same in Firefox/Chrome/Safari - but IE7, it's all out of whack

Question

On [my site][1] everything looks great in Firefox/Chrome/Safari (all the same) - but IE7, it's all out of whack.

Any ideas how I can modify my CSS to make IE7 at least somewhat usable?

Answer 1

I've found that this project at Google Code will often clean up major problems with IE(6/7). The relevant parts follow:

Use the following code to get all IE to act like IE9:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"&gt;&lt;/script&gt;
<![endif]-->

Use the following code to get all IE to act like IE8:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"&gt;&lt;/script&gt;
<![endif]-->

---

Also, as superUntitled pointed out, it would be a good idea to make sure your code is syntactically valid. Your code seems to be a mix of HTML and XHTML, so I've attached the various validation checks to help you to choose one:

HTML 4.01 Strict: 46 Errors, 30 Warnings
XHTML 1.0 Strict: 398 Errors, 183 Warnings

It seems like you started out with XHTML, as evidenced by your link to a XHTML DTD, but your markup is closer to the HTML standard. Finally, note that a simple fix can often clear up several errors, so don't try to fix multiple things at once. Fix, update, then re-check the validator.

A quick glance shows that you've haven't closed your </html> tag. That's probably a few of the errors right there.

Answer 2

I am seeing the same issues in IE 7 and 8.

If I change to standards mode instead of quirks more, I have no issue. I think if you add a doctype, problem solved.