i am dustin diaz

Design for IE first: then Mozilla

This is my theory and I'm stickin' to it. When I design websites, I code for Internet explorer first and when I'm finished, I fix it to comply with standards.

First of all, I'm a standards evangelist so you might be asking why someone like myself would tell you to design for Internet Explorer first. Afterall, they have a messed up box model, the worst support for CSS 2.0 (out of the "good" desktop browsers), and lastly, let's get real, a true geek wouldn't even bother.

Ok. Point taken. But you need to remember that Internet Explorer is still the market leading browser and will most likely always be one of the contenders. Even if half of IE users switched to Safari or Firefox or some other gecko browser, we're still talkin' half the planet will be using Internet Explorer.

The solution I propose is that we continue to develop good websites and make them look relatively close in design for all browsers. The following approach I use had only started to take effect after I realized how much time I was wasting trying to add all the bells and whistles for Mozilla, Opera, Safari etc... and then having to go back and Fix margins, paddings, collapsed columns...you name it, for Internet Explorer.

Time after time this frustrating task was just not worth it. And even in the end result, I'd go back to my favorite browser (FF) after this "IE re-design session" and see that it looks all crabby again. Yes, I said crabby.

First things first.

Step 1: Open up internet explorer (if you can still find the icon) and do all your testing. Get the margins right, set your font sizes, line-height's, paddings and borders all lined up.

Step 2: Open up Firefox and Opera (and safari if you're a mac user).

Step 3: Don't panic!

Step 4: Get a glass of water (or a can of jolt soda if you prefer) and inside your stylesheet, locate the problems such as your margins, paddings, etc. Now start a new instance of the same ID's or classes that are causing the problem. But now in this case, add a bit of markup such as the following example.

Let's say you have an ID that looks like this:

<style type="text/css">

<!--

#content {

margin:15px;

padding:40px auto;

font-size:1.2em;

width:400px;

float:left;

}

-->

</style>

The above code should be looking awesome in internet explorer (if there is such a thing as looking awesome). But you've noticed in Firefox, it looks horrible. So let's fix it like this:

Revised Code

<style type="text/css">

<!--

#content {

margin:15px;

padding:40px auto;

font-size:1.2em;

width:400px;

float:left;

}

/* ignored by IE */

*>div#content {

margin:20px;

padding:20px auto;

font-size:1.5em;

width:450px;

float:left;

}

-->

</style>

Fantastic! I've hope you've found this useful. And by all means, this may not be the best approach in trying to develop for all browsers, but so far it's been working miracles for me. If you have other methods or you think you might try this one out, please let me know. I'd love to hear about it.