Question:
I am in the process of making a new Web site for my student organization. I have run into some CSS troubles on one page. The page has valid CSS 2.1 and looks fine on any standards-compliant browser, but the layout gets mangled in Internet Explorer 7. The top/bottom margins in the main area are narrower than expected, and some of the photos are not lined up with the others. This has been quite frustrating to me, and I would really appreciate if anyone can help me with the CSS.
Answers:
-
IE handles margins and padding differently. One of the keys to using CSS successfully is understanding the CSS Box Model and making your site look the same in all browsers.
This article explains how IE renders things differently:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_c
ss_box_model/
You can also just google CSS Box Model, CSS quirks, CSS IE … there’s a lot of information out there on ways to work with the browser differences. (I prefer having a separate stylesheet for IE and call it using a conditional statement – #3 on the link above explains how to do this – instead of putting hacks inside my stylesheets).
-
IE is an abomination. I’m sure the next version of Windows will fix everything, but until then..
I tend to start with a css sheet that “resets” the margins and whatnot in the various browsers. Eric Meyer has a good one:
http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
I’m also a fan of css frameworks like the 960 Grid System:
-
I fixed the issue. It turns out that I had a comment above the DOCTYPE declaration, which kicked IE7 from standards mode into quirks mode and thus giving me the layout problems.