Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
27 Jun

How to Get Cross Browser Compatibility Every Time

  • Information
  • Leave a Comment

Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. Anthonyshort has collated all the information he could find to create some coding conventions for ensuring that your site will work first time in every browser. There are some things you should consider for Safari and Firefox also, and IE isn’t always the culprit for your CSS woes. Here is a quick summary of How to get Cross Browser Compatibility Every Time:

  • 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

Source: How to get Cross Browser Compatibility Every Time

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Rendering Text with Javascript, Canvas and VML

Rendering Text with Javascript, Canvas and VML

CLEditor – Open Source jQuery WYSIWYG HTML Editor

CLEditor – Open Source jQuery WYSIWYG HTML Editor

Dynamic Grid Layout Plugin for Pinterest-like Websites

Dynamic Grid Layout Plugin for Pinterest-like Websites

Text2PNG Converts Text to PNG with Javascript

Text2PNG Converts Text to PNG with Javascript

Smooth Javascript Image Zooming For Your Web Pages

Smooth Javascript Image Zooming For Your Web Pages

Open Source Cross-Browser WYSIWYG Editor

Open Source Cross-Browser WYSIWYG Editor

Comments
  • http://teabass.com Andrew Nesbitt

    It’s kinda depressing, to make a standards compliant website, don’t use any of the cool new stuff.

    The sooner IE6 is dead the better!

  • Pingback: How to get Cross Browser Compatibility Every Time | Web And Say

  • Pingback: SSDD Web Design :: Helena Montana » Article » How to get Cross Browser Compatibility Every Time

  • Pingback: Vysnu » links for 2008-06-30

  • Pingback: ¿Cómo obtener compatibilidad entre diferentes Navegadores Web?

  • http://www.iphonegurues.com/ cacique

    Cool!

    And is true!! The sooner IE6 is dead the better!

    We test http://www.iphonegurues.com with your post recomendations and really works!

  • http://www.irregularactivity.co.uk/ Darren Cornwell

    Great concise list – a must have bit of info for the beginner and everyone forgets the reset!

  • http://kandaphati.webs.com Kanda P.

    This is wonderful. Thanks so much!

  • http://www.multibrowserviewer.com Anton

    i know it is very late after the initial publish date, but it is a great list – thanks!

    To check your site continiously to check if it’s rendering correctly in the different browsers you could try http://www.multibrowserviewer.com. It’s new, well priced and good quality and includes HTML validation.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • Brunch – An Assembler for HTML5 Applications
  • About WebAppers Redesign
  • A Scalable Real-time Backend for Your Web Application
  • Open Source File Manager for Web using jQuery UI
  • Pretty and Lightweight jQuery Countdown Plugin
  • Filepicker.io – A Handy Upload Form for the Web
  • Create Beautiful Circular Switches with jQuery Knob
  • 41 Free Social Networking Icons in PNG Format
  • WebAppers Redesign Updates #1
  • Automatically Adds Filler Content to HTML Documents
Sponsors
Plugins
  • Advertisement15
  • Calendar43
  • Capture17
  • Charts47
  • Chat19
  • Demo Tour14
  • Gallery106
  • Maps28
  • Menu72
  • Polls9
  • Popup46
  • Tooltips37
  • Upload28
  • Video16
Desgin
  • Brushes11
  • Buttons21
  • Color Schemes22
  • Fonts40
  • Forms98
  • Icons87
  • Patterns24
  • PS Tutorials10
  • Stock Photos19
  • Tables24
Others
  • Announcement79
  • Best Collections4
  • Code46
  • eCommerce20
  • Framework169
  • Hosting12
  • Information161
  • Inspiration29
  • Legal Documents9
  • Reviews8
  • Security13
  • Social19
  • Sound14
  • Stats35
  • Tools209
  • Webmail13
Licesnes
  • BSD License56
  • CC License114
  • GPL License202
  • LGPL License37
  • License Free608
  • MIT License303
Sponsors
Advertise Here
Partners
NetDNA