Performancing Metrics

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.

Categories: Blog Design

This post was written by . You can visit the for a short bio, more posts, and other information about the author.


Comment with Your Facebook Account

Comments

  1. Edward Lomax says: 6/28/2008

    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.

    Reply

  2. Jeffro2pt0 says: 6/29/2008

    @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.

    Reply

  3. SEO Service says: 6/29/2008

    Nice post like it

    Reply

  4. konteyner says: 8/19/2008

    its nice project thank you.

    Reply

  5. konteyneer says: 6/6/2009

    thank you, spasiba, konteyner, prefabrik :) very nice and useful article..

    Reply

  6. konteyner says: 6/6/2009

    this is incredible article. Thanks

    Reply

  7. Imran Raza says: 6/8/2009

    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.

    Reply

  8. Andrew Jhonson says: 8/20/2009

    To rescue the web designers from this aching job of testing browser compatibility in different browsers there are few websites which offer this service. On these websites you can check the compatibility of your website in all desired browsers. You can find these websites at http://www.bestpsdtohtml.com/7-awesome-resources-to-test-cross-browser-compatibility-of-your-website/

    Reply

  9. mikeyaozm says: 9/19/2009

    rescue the web designers from this aching job of testing browser compatibility in different browsers there are few webs

    Reply

  10. thisguy says: 12/2/2009

    I thought the point of using a CMS like WordPress is you dont have to worry about this type of issue. Isn’t WordPress cross-browser compatible by default?

    Reply

  11. Ta??mac?l?k ) says: 2/13/2013

    its nice project thank you.very nice and useful article :)

    Reply

  12. Konteynerler says: 2/23/2013

    This was a problem for me after that i will solve it easily thanks for that.

    Reply

Content


Receive the top stories from BloggingPro and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!