What steps could be taken to avoid cross-browser compatability issues?

Question

Recently, I have been battling with: weird table borders/margins, div alignments, positioning problems, and am having a down right nightmare supporting Internet Explorer 6. I know a lot of you like me are forced to support, IE6-IE8, Web-Kit, and Mozilla based browsers.

My questions to you are:

1. What are the important rules you use before hand, when developing across multiple browsers to save you time?
2. How do you prevent yourself from writing incompatible tags?
3. What is the best way to avoid hacking your code?
4. Where do you find research on browser compatibility, do you use any tools?
5. Finally, when do you cross the line/where do you draw it?

Answer 1

I say there is not that much you can do except sticking to the basics:

• Code standards compliant HTML
• Validate early, validate often
• For Javascript, use a framework like JQuery, Prototype or Dojo
• Pick one "main browser" you optimize for first.

in every project, there will be a number of issues, but if you stick to these points, not too many.

I find it extremely helpful to build 100% W3C valid code. Not because it matters - much of what the W3C validator complains about will not make any difference in real world browsers - but because being able to run a validation, and getting a green light and knowing that all is well on that end is very helpful.

To test multiple IE instances at once, you can use IETester. It's not perfect - conditional comments won't work in it for example - , but mostly usable in everyday development work.

Answer 2

1. I usually code against Firefox (or Safari) first. That usually produces the best results across browsers other than IE. I then hit IE8, IE7, then finally IE6.

2. Know what tags are going to cause you trouble and avoid using them at all costs. It's all about how familiar with each browser's issues.

3. Don't use hacks. Use IE conditional comments. By using conditional comments, you can load one stylesheet for all other browsers, one for IE8, one for IE7, and yet another for IE6 (if you need that kind of granularity to fix your issues). It will give you nice clean stylesheets with as little hack-i-ness as possible.

4. LitmusApp

5. There really aren't lines to cross. If you need compatibility, you need compatibility. You just whiddle down your issues as best as you can one at a time until you have something usable.

Answer 3

use a doctype like html 4.1 transititional which makes ie6 render in standardsmode. You can also use a reset stylesheet.

Answer 4

I would say to start with standards-compliant code. Always test in a standards-compliant browser first like Firefox, or Safari/Chrome. I prefer Firefox for the addons (such as Firebug, HTTPFox and the Web Development Bar). Then work your way DOWN (and by down, I mean all versions of Internet Explorer).

Try to stay away from temporary fixes per situation or site and generalize your code as much as possible. For example, as Justin Neesner said in his answer, using conditional comments and a general style sheet for IE6 , 7, and 8 will knock out most of your problems with layout and formatting, without using (too many) hacks. You can reuse the IE stylesheets, and just place the site-specific code in it.

Use a testing platform like browsershots, netrenderder or LitmusApp so you can see what your site is doing in as many versions of browsers out there. Studying browser compatibility deeply will make you pull your hair out, but any great resource like quirksmode.org can give you information on the little gnats of incompatibility, so you don't go crazy, and bald.

As far as when do I cross/draw the line, it's 99% Internet Explorer issues, and if it's close enough to looking like FF or Chrome/Safari, I'm done. Almost like art, it's not when you're finished adding, it's when you're done removing the crap you don't want to see; that's when you know it's done.

Answer 5

Use strictly compliant HTML and CSS markup and do not use browser proprietary extensions to CSS.

IE 6 does not implement CSS correctly beginning with its absolute ignorance of the box model.

IE 8 on the other hand has a test suite to prove they implement every aspect of CSS 2.1 correctly (which no other browser does).

Develop for Firefox as stated above and make a decision about supporting IE 6 & 7 or not. Frankly, I no longer develop separate style sheets for those browsers. They don't have enough market share (at least on my site.)

Given the interest in HTML 5 and the lack of interest in XHTML 2, develop HTML 4.01 Strict and follow these practices: (which are recommended in HTML 4, and required in HTML 5 and XHTML 1.1)

1. all elements and attribute names must appear in lower case,
2. all attribute values must be quoted,
3. non-Empty Elements require a closing tag,
4. no attribute minimization is allowed,
5. In Strict mode, all inline elements must be contained in a block element.

Why to learn HTML 4.01 Strict with references.

Answer 6

Also see the CSS 2.1 Test Suite

Answer 7

So I have been running around for a while now, 26 days later I think I am ready to give some feedback to my findings.

Coding:

First of all, I found that column systems seem to cut down the amount of HTML and CSS written. They are also very cross-browser friendly. Although there are many of them, I found that the 960 Grid System works the best for me: http://960.gs

Next up I found that Ruby has a cool extension for CSS called, LESS. This has been ported over to .NET and can be found at: http://www.dotlesscss.com. It is easy to setup, and is very powerful when used right.

Javascript, can be tricky but I found out that avoiding certain selectors and shortcuts in languages like JQuery will not only speed up the performance of your application, but exhibit less awkward behavior.

Testing the browsers:

Here comes the interesting part. Without any software I found that testing my applications against Internet Explorer 6 and Safari at the same actually helped increase the speed of my development. Firebug and Firefox actually cause me to develop around the problems and this is what causes a lot of extra code. When developing simple code against IE6 and Safari I found that going back to Firefox and IE8 is incredibly easier. Most problems I have had were with border widths, which were easy fixes.

The best software solution I found that was accessible to me was Expression Web with Superpreview, if you ever wonder why Microsoft releases a bunch of version of IE, its probably so they can sell you tools like these.

Anyway, that's my 2 cents for right now.