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

Text2PNG Converts Text to PNG with Javascript

Text2PNG Converts Text to PNG with Javascript

Dynamic Grid Layout Plugin for Pinterest-like Websites

Dynamic Grid Layout Plugin for Pinterest-like Websites

Smooth Javascript Image Zooming For Your Web Pages

Smooth Javascript Image Zooming For Your Web Pages

Easy Cross-Browser Testing with SuperPreview

Easy Cross-Browser Testing with SuperPreview

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 | About | Archives | Privacy Policy | Advertise | Contact

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
  • Free Responsive HTML5 + CSS3 Site Templates
  • 35 Creative Twitter Covers for Web Designers
  • FROONT: Responsive Web Design in the Visual Way
  • Designing Experiences for Responsive Web Sites
  • jQuery Unveil: The Lightweight Version of Lazy Load
  • What are HTML5 Datalists and When to Use Them
  • Easy Responsive Tabs jQuery Plugin for Web & Mobile
  • jQuery.Swatches Turns Div into a Sweet Color Swatch
  • Pure: A Set of Small & Responsive CSS Modules
  • Create Sexy Android-like UI with Fries
Sponsors
Plugins
  • Advertisement15
  • Calendar48
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour17
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup50
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons27
  • Color Schemes25
  • Fonts47
  • Forms115
  • Icons110
  • Patterns24
  • PS Tutorials17
  • Stock Photos21
  • Tables25
Others
  • Announcement104
  • Best Collections6
  • Code57
  • eCommerce25
  • Framework217
  • Hosting13
  • Information245
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats40
  • Tools302
  • Webmail14
Licesnes
  • BSD License69
  • CC License123
  • GPL License224
  • LGPL License40
  • License Free749
  • MIT License423
Sponsors
Advertise Here
Partners
MaxCDN