3 of 3

Write now Article Tools

Page 2 of 2

your site. The easiest way to avoid compatibility issues later is to reset the styles on all elements. This is done because different browsers use different styles for elements. One might naturally put 10px of padding on a p tag and another might put 10px of margin. This is the root cause for many rendering issues found later. You can find reset style sheets on the web - Eric Meyer has a good one at meyerweb.com - or simply design one yourself. One of the best things to do is to start off by removing padding and margin on all elements with the rule: * { padding: 0; margin: 0 }

If you've done both of the above then you are now setting yourself up to have the least amount of issues possible. Depending on the complexity of your site it might look exactly the same in most of the browsers - Firefox, Safari, IE7 and (hopefully) IE6. If not, the next step is to utilize conditional statements.

CONDITIONAL STATEMENTS

Conditional statements were something developed and supported by Microsoft for Internet Explorer. They allows you to support standards compliant CSS and (X)HTML yet fix the rendering issues in the various versions of IE.

You simply define additional style sheets and put the rules for those browsers in them. The standard way to do this follows (remove the spaces, this is done because, again, Helium filters markup elements):

< !- [if IE 6] > (style sheet link) < ! [endif] - >

Other operators beside if include lt (less than), gt (greater then), lte (less than or equal) and gte (greater than or equal). So lte IE6 would target IE6 and below. The operator gte IE7 would target IE7 and above - and so on.

Now you have the tools to correct any rendering issues that might pop up.

CONCLUSION

In conclusion, the best way to deal with cross browser compatibility issues is to limit the chance for them to appear by using the right tools, standards compliant markup and CSS. Some issues will always appear and the few that do can then be handled by using either conditional statements. Remember always to test in multiple browsers to find the issues. At a minimum your suite should include IE6, IE7 and Firefox. If you have access to a Mac then Safari should be included as well.

Learn more about this author, WeaselWarDance.
Click here to send this author comments or questions.

• << previous page
• 1
• 2

Add your voice

Know something about Web design tips: Dealing with browser compatibility issues?
We want to hear your view. Write now!