Help me understand what I need to make my website compliant with IE.

August 25, 2008 8:41 AM

Is there a guide to the anticipated differences between IE and Firefox when coding a website?

So, I'm coding my first "really real" website for the company I work for. I have a bit of experience in this, but this is my first really large, semi-pro project. As a result, I'm running into the ages old problem where everything looks great in Firefox and Safari, but terrible in IE. IE seems to add spaces, ignore code, change margins and generally run wild.

Is there any kind of guide to the sort of things I need to be aware of to compensate for IE's tendency to do as it does?

posted by GilloD to Technology (17 answers total)

Welcome to the wild west. Just wait until you try it with IE6 (I am assuming you are trying it within 7). A large number of users seem to still be running IE6, which ignores even more CSS than IE7.

The easiest 'fix' is to stick with cross-browser libraries and CSS templates that have been tried and tested, and carefully extend them. Try to not be overly fancy when you don't need to be, and if your layout is really useless when it is off by a pixel or two, rethink your design.
posted by SirStan at 8:56 AM on August 25, 2008

Also, in some cases a simple CSS RESET library will do wonders. IE might default to say Times New Roman 10, while Firefox is using Arial 8. A reset library will even the playing ground.
posted by SirStan at 8:59 AM on August 25, 2008

There's no definitive guide that I know of -- I doubt it'd even be possible to document all the finicky differences between various browsers in any useful way.

The process I follow is, test as you build. If you get it all running perfectly in firefox and only then go back to figure out what went wrong in IE, you'll be tearing your hair out before you're done, and you'll end up having to do the job three times (because once you've ripped it apart to get it working in IE, it'll be broken in Firefox again.)

Instead, every time you add a significant bit of CSS or HTML to your project, test it in each of your target browsers right away. That way you'll be able to see if something's acting funky before you write a lot more code that depends on it, and it'll be obvious which part of the code caused the funkiness (because you just added it.) It'll feel slower to be constantly checking out every page in every one of your target browsers every time you add a new div, but it'll save you a ton of time in the long run.

For Javascript, use one of the code libraries like prototype.js or jQuery; they'll take care of nearly all the incompatibilities for you.
posted by ook at 9:00 AM on August 25, 2008

Firstly, you really need to be checking in more than one browser about every half hour that you're writing CSS/HTML. It's a lot easier that way.

Secondly, look to start your coding with a CSS Reset. Eric Meyer's is probably the definitive one. A reset will reduce inconsistencies between browsers by overriding things that might default to different values in different browsers.

Thirdly, this is quite a thorough list of things you might need to look at.
posted by le morte de bea arthur at 9:03 AM on August 25, 2008

Response by poster: Oh my.


Well, I'll get down to work. Thank you! I've been slowly ambling towards being a competent web dude and things like this really help.
posted by GilloD at 9:21 AM on August 25, 2008

Response by poster: Would it be lazy and/or bad for to just write two seperate stylesheets and use <> ?
posted by GilloD at 9:28 AM on August 25, 2008

To expand on the advice to test as you go along: certainly it makes debugging easier, but also, if you do it that way for an entire project, you'll learn a lot about the differences. So if in the future you encounter a problem on another project, you might be able to say, "Oh, I remember how we fixed this last time." Because often, the fixes are indeed unintuitive.

But to help you *now*, I've had much success googling things like "min-height not working in IE"/"Firefox IE width differences", (without quotes, usually) because millions of other people have also had to debug the same things you're debugging, and they've already asked about the specific problems in CSS/HTML forums.
posted by iguanapolitico at 9:37 AM on August 25, 2008

Would it be lazy and/or bad for to just write two seperate stylesheets

Yes and yes. Only do this sort of thing as a last resort, and limit it to the css rules that you absolutely need it for -- it makes site maintenance much more difficult if you have duplicate rules for multiple browsers spread across multiple stylesheets.

I admit I've occasionally resorted to using conditional comments to deal with whatever last few IE6 quirks I just can't work around otherwise, but I never feel good about it.
posted by ook at 9:52 AM on August 25, 2008

Conditional comments are your friend. Really. Make one stylesheet that works for modern browsers. Add a conditional sheet for IE. Address only those quirks that need to be addressed (for example if ".header" looks fine but ".footer" is screwed up, only add a corrected entry for ".footer" in the IE sheet - don't add any rules for elements that don't need them). Use version numbering in your conditional comments. It's a lot cleaner than using hacks in a single CSS sheet, it won't break other browsers, and it's future-proof: If IE8 actually works, you don't need to add a separate sheet for IE8, etc., etc.

It's MUCH easier keeping your IE "fixes" separate from the real stylesheet. It's worth the pain of including the conditional comment in the header of each page. I don't see why this is a bad thing at all, and in my mind using CSS hacks to feed specific rules to specific browsers is a bad, dumb thing. Even when I do include non-valid CSS (such as moz-border-radius) - I always include the correct rule (border-radius) first, even if it's currently unsupported, so that in the future things ought to just work.

I keep IE7 and IE6-specific stylesheets included. Not worth going any further back than that. Theoretically you could exclude IE6 but realistically lots of locked-down corporate / government systems are still using that old-ass browser, so you kind of have to keep supporting it.
posted by caution live frogs at 10:25 AM on August 25, 2008

While there is no definitive guide, you will definitely do yourself a huge favor in terms of compatibility across A-grade browsers AND exposing any cracks in the dam in your CSS chops by familiarizing yourself with CSS Resets.

I have found both Eric Meyer's [link] is good, but a more comprehensive overview can be found using Yahoo's developer network [link]. Yahoo's CSS Reset "neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions."

Furthermore, Yahoo also provides a Base CSS outline that allows you to "compliment their Reset by applying a style foundation for common HTML elements that is consistent across A-grade browsers."

Lastly, another bonus for Yahoo's solution is that they are firmly in the "grid-based design" camp. Even if this isn't your cup-o-tea as far as the project that are currently working on, I've found this campaign as a whole encourages semantically correct coding principles, which is a win-win for all of us.
posted by littlelebowskiurbanachiever at 11:13 AM on August 25, 2008

I learned about browsershots.org from an earlier AskMe. This might simplify testing and triage, but doesn't really answer your design question.
posted by fantabulous timewaster at 1:14 PM on August 25, 2008

Here's something that you may find useful - Position is Everything, and more specifically a list of IE-specific bugs.

Regarding your workarounds:

Avoid hacks. Seriously, I used to do this - chuck a hack into my style.css file, and just put a comment above or below it. Thing is, it makes it so difficult to come back to a site and be able to know why you were doing it.

I would second caution live frogs - I now use a separate file of conditional comments for the IE specific bugs, and have nice descriptions of what problem they're fixing and which version they apply to.

I would also second CSS resets.

A good resource for web-design stuff is ALA. Spend some time browsing the archives, or search for something specific. It's all good.
posted by djgh at 1:49 PM on August 25, 2008

You have already been given some good advice, but I'll add some more. Just so you know where I come from, I do this kind of stuff all day long for a financial institution.

Avoid hacks. This will make maintenance much easier down the road. The only "hack" I ever use is "display:inline" on floated elements to avoid the double-margin bug in IE6.

Don't make a stylesheet specifically for IE. This again makes maintenance a pain. There really isn't any need for this.

Don't use a reset library. Again, there just isn't a need for this. Every library I see uses bloated code, and is really ridiculous.

Here are the only resets I use:

html,body {
margin: 0px;
padding:0px;
}

* {
margin:0px;
padding:0px;
/*You can add some font styles in here if you want. */
}

The reset from Eric Meyer above is probably more thorough, and will work, but I haven't ever had a need to be that in depth in my resets.

While you are developing, have Firefox, Safari, IE 6, IE 7, and Opera open. Every time you make a change, view it in each browser. It is much easier to troubleshoot in the development process.

If you want IE 6 and IE 7 installed on the same page, upgrade to IE7, and then Google Multiple-IE there is a download that will allow you to install IE6 standalone.

There isn't really a need to use browsershots.org if you have all of the web browsers installed on your computer. It is much faster, and more convenient. The one thing browser shots will give you is what your site looks like at higher resolutions (if you have a small monitor). I have a 22", so it really isn't an issue for me.

Be careful with conditional CSS. If done incorrectly, it will cause IE to crash. I have used them, but generally avoid them.

Be careful with adding padding to any element. Padding increases the width or height of elements differently in IE than other normal browsers. This can sometimes be a culprit.

Finally, remember that IE6 is still a big player in web browsers, but each month it has a smaller market share. If it is close enough to work, I usually don't worry about making it look perfect in IE6. IE6 consistently doubles a projects time of completion for me. It drives me nuts. :)
posted by HC Foo at 3:09 PM on August 25, 2008

Unfortunately, there is no real definitive guide but I think you will find that you will pick it up quite quickly. Once you finish your first large project, especially if you are taking into account IE6, you'll know most of the serious bugs like the back of your hand which is much better than having to search through a guide.

Try subscribing to multiple rss feeds that deal with standards compliant css which degrade gracefully. Read them in your free time and often you'll find an article dealing with the exact problem you are having. Look at the way in which the author of a code example has adapted their piece to make it work. You'll all of the tricks by seeing it in action. I suggest googling cssplay, a list apart, etc. and woork for starters.

I tried the multiple stylesheet approach and found that all it did was make the project much harder to manage and encouraged me to use more hacks. In fact, when I got rid of my ie6.css and attempted to reintegrate the hacks into my main.css, I found ways around all of them and now have a hack free site.

I feel that the best way to learn how to handy IE is to fiddle around with it on your own first and see what you can come up with. Then if you get really stuck, you can bring a specific issue to an online forum and see what other people suggest. Alternatively, if you can't find a solution, see if there is a different way to do your design.

Lastly, don't aim for a pixel perfect solution. I recently had to design a simple navbar and had the choice between using a border outset or creating an image to get the effect. The problem with the border outset is that each browser displays it differently and it is impossible to get them all to add the effect in the same way. The problem with the image is that it requires more code, more time to create, loses scalability e.t.c. This is the time to begin asking yourself if pixel perfection is really worth it.
posted by Fluffy654 at 4:13 PM on August 25, 2008

Also you might find some of these links handy. I discovered all of these via RSS feeds which is why they are handy.

Using CSS to Fix Anything: 20+ Common Bugs and Fixes

Internet Explorer & CSS issues

Explorer Exposed! - this is a relatively comprehensive list.

Also google "IE haslayout".
posted by Fluffy654 at 1:09 AM on August 26, 2008

N-thing the reset idea, but also seconding HC Foo that Eric Meyer's can be overkill for a small to medium site. I usually go with just zeroing out the margin and padding as he suggests. This can make forms a little weird, but you can read about that here and see if it'll matter to you in this case.

And absolutely test in both IE and Firefox and Safari every time you add something new to the page. It's the only way to make sure you fix errors/quirks with the minimum of effort - otherwise you'll get to the end and then have to re-markup everything from just below your opening div...
posted by harriet vane at 6:35 AM on August 26, 2008

hasLayout!!!!!

(sorry for all the !, it's just that hasLayout seems to be at the root of at least 80% of the remaining IE6-bugginess that I encounter. (been designing w/CSS since the glory days (!) of Netscape 4 at the turn of the century.))

Position Is Everything is pretty rad, and the css-discuss mailing list can be helpful if you have a specific nagging issue.

Also, you can get sympathy at any time from any standards-aware web designer just by saying "I'm trying to make [n] work in IE6." :)
posted by epersonae at 11:21 AM on August 27, 2008