Cross Browser Compatibility On The First Try
by jeff on June 28th, 2008 
7 Comments
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:
- Always use strict doctype and standards-compliant HTML/CSS
- Always use a reset at the start of your css
- Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and
text-shadow: #000 0 0 0 in Safari - Never resize images in the CSS or HTML
- Check font rendering in every browser. Don’t use Lucida
- Size text as a % in the body, and as em’s throughout
- All layout divs that are floated should include display:inline and
overflow:hidden - Containers should have overflow:auto and trigger hasLayout via a width or
height - Don’t use any fancy CSS3 selectors
- 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.
Wow, this is great. When I have websites built I get my wife to do it. She generally uses IE and I use Firefox. As soon as a site launches, I usually have to make a list of all the problems in Firefox. Then she starts pulling here hair out and fixing them. This will help a lot.
@Edward Glad to hear this set of conventions will help you out. I’ve had my taste of compatibility hell but I managed to get through it without losing a strand of hair. It would probably help if I knew what I was doing while hacking the code. For me, it’s so much trial and error that it gets to be really time consuming, only to figure out later that a single character was out of place causing the issue the whole time.
Nice post like it
its nice project thank you.
thank you, spasiba, konteyner, prefabrik
very nice and useful article..
this is incredible article. Thanks
I have corporated the same in my blog http://razaimran.blogspot.com/ with more detail plus i have included the validators which might help all the webdevelopers to validate their css,htmls, javascripts, so get those links guys.