What is your best tool or techniques for getting the same display on IE6/7 and Firefox?

Question

I'm not talking about tools that let one view a page in combinations of operating systems and browsers like crossbrowsertesting.com but in creating or figuring out the actual CSS.

Answer 1

I write to the standards and both Firefox and IE7 follow a pretty good set in common.

IE6 is dead as far as I am concerned but if I get back into professional web dev I'll probably have to revise that ;)

Answer 2

I try to make a standards-compliant page and do all my testing in Firefox (since it has some excellent development extensions such as Web Developer and Firebug). Then when I'm finished I test the site in IE, then make whatever small changes are necessary. I find that I need to make very few changes, since I don't do anything extraordinarily complex with CSS.

I used to have more problems with Javascript differences, but after I started using Javascript libraries (such as jQuery) I stopped having any serious problems with that.

Answer 3

Padding.

IE6 can get a little hinky when using margin to place elements horizontally on a page. If you size your elements and space the content within using padding, you can make many layouts work great in IE6/7, FF, Safari, and Opera without any hacks. IE5.5 makes things a little stickier because of the broken box model, but I think we can pretty much count it out in most circumstances now.

Answer 4

I try to make a standards-compliant page and do all my testing in Firefox (since it has some excellent development extensions such as Web Developer and Firebug). Then when I'm finished I test the site in IE, then make whatever small changes are necessary. I find that I need to make very few changes, since I don't do anything extraordinarily complex with CSS.

The same here, except I don't tend to need to use Firebug and such. I've only had problems with IE6 recently however - which are solved by simple CSS bypasses:

/* All browsers read: */
html body {
    margin: 10px;
}

/* FF, IE7, Op etc. read: */
html > body {
    margin: 0;
}

Answer 5

Use a css reset to level the field across browsers. YUI and Eric Meyer have good ones.

Answer 6

I'm with Eli. Writing against firefox (with firebug installed) makes you have to write "more compatible" code to begin with and then its less of a job later down the line when you come to make it compatible with IE.

Use the site QuirksMode to help you find answers to compatbility information

Answer 7

If you guys are still coding for IE6, you're making a mistake.

I use IE7.js to get IE6 to render pages like IE7. IE7 is not perfect, but at least it has some semblance of standards. Since I only have to code for IE7 and FF it makes me 33% more efficient in terms of testing against browsers, something I think makes good business sense.

Link: IE7.js

Answer 8

If it's a brand new project I make it a point to test all html+css changes on all browsers I'm targeting as I make the changes. In the past I tended to focus on my favorite browser and then test with the others after I was done to find that one or more small quirks were present and it was very tedious to pin-point the actual cause. Now I have all browsers open and just go through refreshing each one after each html/css change to make sure the display meets my expectation. When something goes wrong, I know exactly what caused it.

It might seem time-consuming to test on all browsers at once, but in the long-run it actually saves time as you catch the problems at once.