Website looks weird in internet explorer 7, but fine in IE 6 and 8

I used many different browsers while I was coding for a new site (Firefox, Chrome, IE8, Opera, Safari, Mobile devices, etc...). It looked the same across all browsers.

I recently uploaded the site onto the server and got to look at it from work, using Internet Explorer 7 and It looks horrible. Elements are floating wild all over the place, but I cant figur开发者_运维百科e out why.

The weird thing is I just looked at it from IE6, and it looks fine, with the exception of unsupported transparencies in PNG's.

If anybody has IE7, or can tell just by the html whats wrong, you can view the site here.

Thanks

Try adding a zoom: 1 to your clearfix style.

Also check out this answer for other options of doing clearfix. What methods of ‘clearfix’ can I use?

There are multiple CSS differences, features that are supported by some version and not by others and so. The following link lists the differences, bugs and so. It might help you for detecting and preventing new "bugs" CSS Differences in Internet Explorer 6, 7 and 8

You have 15 HTML errors and 8 CSS errors. IE8 does not act like IE7 in compatibility mode which doesn't act like IE7 which doesn't act like IE6 and none of them act like the other far more modern browsers. Actually, there are 5 rendering modes in IE8 alone.