Cross Browser Compatibility On The First Try

Based on my own research, cross browser compatibility seems to be the thorn that is in every web designer’s side. Taking a mock up design and coding it to look the way it’s meant to be in all browsers at times, seems like an impossible task. I know when I’ve hacked WordPress themes, getting them to appear correctly in both IE 7 and FireFox 2 was such a pain, I would end up going for the (good enough) approach.

Thankfully, Anthony Short has put together a list of coding conventions ( How To Get Cross Browser Compatibility Every Time ) based on his research that will help get the job done on the first try.

This is a summary of what Anthony Covers in his post:

1. Always use strict doctype and standards-compliant HTML/CSS
2. Always use a reset at the start of your css
3. Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and
   text-shadow: #000 0 0 0 in Safari
4. Never resize images in the CSS or HTML
5. Check font rendering in every browser. Don’t use Lucida
6. Size text as a % in the body, and as em’s throughout
7. All layout divs that are floated should include display:inline and
   overflow:hidden
8. Containers should have overflow:auto and trigger hasLayout via a width or
   height
9. Don’t use any fancy CSS3 selectors
10. Don’t use transparent PNG’s unless you have loaded the alpha

In his research, Anthony only worried about FireFox 2, Safari3+ and IE6.

So if you are creating a theme or any web design for that matter, keep these conventions in mind so you’ll spend more time designing and less time refreshing browser windows.