views:

375

answers:

3

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 figure 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

+2  A: 

Try adding a zoom: 1 to your clearfix style.

Also check out this answer for other options of doing clearfix. http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best

Chetan Sastry
In addition: Your problem is using the `clearfix` CSS, which uses the CSS `:after` pseudoclass. IE8 and other reasonably standards-compliant browsers will support it just fine, which is why they had no problem. IE6 simply doesn't support child elements extending out of their parent elements in the first place, which is why it doesn't have a problem, either. IE7 requires special attention since neither is true for it.
Zarel
A: 

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

spderosso
A: 

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.

Rob
I have no idea where you're getting at with this comment... can you be more specific?
BDuelz
HTML errors can cause all sorts of bizarre unpredictable behaviour. It's certainly a good idea to fix them before trying to troubleshoot your issue as they may very well be causing it.
DCD
In addition to needing the errors fixed, you seem surprised when something works in one version of IE, and the modern browsers, but not other versions of IE yet the point is no version of IE works the same as the other and each version of IE has multiple rendering modes. While browsers, such as IE6, stick around forever, people who use modern browsers generally tend to upgrade to the current version more quickly.
Rob
So, my point about that is, you have to treat each major version of IE as a separate browser, with their own bugs and quirks, and not expect them to behave the same, just with different or upgraded features.
Rob
I guess I was more surprised on how it would work fine in IE6 and IE8, but not in IE7
BDuelz