What is your best tool or method to get the same display on IE6 / 7 and Firefox?

Question

I'm not talking about tools that allow you to view a page in combinations of operating systems and browsers, such as crossbrowsertesting.com, but in creating or defining actual CSS.

Answer 1

If you are still encoding IE6, you are making a mistake.

I am using IE7.js so that IE6 displays pages like IE7. IE7 is not perfect, but at least it has some similarities in standards. Since I only need to encode IE7 and FF, this makes me 33% more effective in terms of testing against browsers, which I consider to be a good business concept.

Link: IE7.js

Answer 2

Use CSS reset to align the field in different browsers. YUI and Eric Meyer have good ones.

Answer 3

I write by standards, and Firefox and IE7 follow a pretty good set.

IE6 is dead as far as I know, but if I go back to a professional web developer, I will probably have to reconsider this;)

Answer 4

I am trying to make a standards-compliant page and run all my tests in Firefox (as it has some great development extensions like Web Developer and Firebug). Then, when I finish, I test the site in IE and then make any small changes. I believe that I need to make very few changes, since I am not doing anything unusually complex with CSS.

I had more problems with the differences in Javascript, but after I started using Javascript libraries (like jQuery), I had serious problems with this.

Answer 5

Hauling

IE6 can lose some weight when using the margin to place elements horizontally on the page. If you change your elements and space in the content using the pad, you can make many layouts work fine in IE6 / 7, FF, Safari and Opera without any hacks. IE5.5 makes things a little more sticky due to the broken box model, but I think we can pretty much count it in most cases.

Answer 6

I am trying to make a standards-compliant page and run all my tests in Firefox (as it has some great development extensions like Web Developer and Firebug). Then, when I finish, I test the site in IE and then make any small changes. I believe that I need to make very few changes, since I am not doing anything unusually complex with CSS.

The same thing here, except that I do not want to use Firebug, etc. I recently had issues with IE6 that are solved with simple CSS workarounds:

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

Answer 7

I'm with Eli. Writing against firefox (with firebug installed) forces you to write "more compatible" code to start with, and then its less work later when you come to make it compatible with IE.

Use the QuirksMode website to help you find answers to compatibility information.

Answer 8

If this is a new project, I am doing my best to check all the html + css changes in all browsers that I aim for when I make the changes. I used to tend to focus on my favorite browser, and then tested with the rest after I was done to find out that there were some small quirks, and it was very tedious to point out the actual reason. Now I open all browsers and simply update each after each html / css change to make sure that the display meets my expectations. When something goes wrong, I know for sure what caused it.

It may seem time consuming to test in all browsers at the same time, but in the long run it actually saves time when you immediately catch problems.