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.
November 19th, 2004 at 6:14 am
To add
before the id, this creates an instance that IE will ignore?
Fascinating. I’m just starting to come into my own with CSS, and I have found it very frustrating to combat the IE quirks.
But your advice in designing for IE first makes sense. It’s probably less work to design with all browsers in consideration, than it is to evangelize users to switch browsers. Most noteably; stubborn IE users.
Plus it will put you a cut above the rest of the devs that wear M$ frontlets.
November 22nd, 2004 at 12:00 pm
Oh common if you can’t write correct code without looking into IE, that means you just have to learn more.
What I do is write the code for standard based browsers and at the same time use the child selectors and stuff to separate IE, after I am done, I just chech it in IE, and almost always it works the way it is supposed to, sometimes I forget a small detail, but that’s all. So no coding for IE, coding for IE is bad and unnecessary.
November 22nd, 2004 at 12:20 pm
I disagree there eh Raven. Although I believe all code should look right the first time, it rarely does when you use advanced styles. I probably know a little more than you think I do.
In cases where you use floats and margins, it almost always breaks in IE. Sure you can be lucky sometimes, but why waste the time. You’re also forgetting that IE still dominates the market place on browsers. In a browser utopian world, everyone would be using Firefox and we wouldn’t have to worry about these kinds of issues. But since that’s not quite our situation, coding for IE is a bit necessary I feel. Futhermore, coding for all browsers is what’s really important and at stake. Thus IE first, then Mozilla is what I was trying to aim at…not “IE only” or “Mozilla only.”
November 23rd, 2004 at 7:49 am
Ok well I still hold my position - you code for standard based browsers and if you are good enough then you are able to code even for IE without looking. And don’t tell me that you know a little more than I think, I saw your entry into Andrei’s contest and this site, I can make a picture of what you know. If you don’t trust me that it’s possible to just code for Firefox, Opera and then chceck it in IE and have it working then it’s your choice, but I know that I do that everyday.
November 23rd, 2004 at 8:17 am
Well that’s fine.
As for Andrei’s entry we were all limited to keep the same design, so you can’t tell what a person knows by modifying someone elses css.
November 23rd, 2004 at 8:31 am
I guess I really design for both at the same time. I do my constant testing in a standards-complaint browser (usually Safari), but I don’t let myself get too deep before I check it out in IE. What sucks is when you design an entire layout for standards-compliant browsers than then find it to be broken in IE. Since you’re basically done, you have no idea where you went wrong (well, wrong in IE’s eyes, anyway). For this reason, I usually do little chunk of work, then go test in IE. Once that piece is working in all browsers, I do another chunk — and so on.
Works for me, but you should do whatever works for you!
November 23rd, 2004 at 9:02 am
I haven’t had a cross-browser problem in a long time, so it’s rare that I use anything like this at all. Then again, I stick mostly to absolute positioning and rarely use floats, which I find are the worst offenders in terms of browsers getting along.
November 23rd, 2004 at 10:10 am
Ok I’m sorry, maybe I sounded a little too angry, but the things is that I don’t like when someone says that you should code for IE first, It gives a bad example to beginners - they may think that if you code only for IE then it’s enough. ;) I don’t say you mean that, but words usually change their meaning in ears of beginners. ;)
November 23rd, 2004 at 10:26 am
I hear ya Raven. No hard feelings. Maybe it is giving a bad impression to beginners. I think we can all agree on supporting standards and saying to “Code for IE” isn’t a great thing to come out a standards evangelists mouth (or typed out).
Hence “this is my theory, and I’m stickin’ to it.”
If we compared the results of two websites that both of us did, as long as the end result is good, I think we’re on the same page. I’m not exactly sure I would call this a tutorial, just a “this is how I do it”
Jeff, in essense, I guess I kind of code for both at the same time too. Afterall, I’m sure all of us have about 3 or 4 different browsers open as we’re doing layout testing. I just tend to lean toward trying to fix my IE problems first because it seems most simple to me. In a way it’s a matter of saying “This will be the bare minimum my site will look” -> Then afterwards, I will add the extra .png effects, :hover styles on non anchor elements, etc, etc.
Vinnie, one main reason I try to stay away from absolute positioning is its tendancy to cause the hi-light text bug. Believe you me, I would much rather code using absolutes, but for sites where people do a lot of reading and possible “copy-pasting” I’d rather not let my IE users say “ah drat!”
The bug I’m speaking of is much of the same as shown at ESPN if you view it in Internet Explorer. But really…it’s just a matter of preference. Floats and positioning both do the job :)