Designing For Every Browser: How To Make Your Site Fully Cross Browser Compatible

What consumers see as freedom of choice when choosing a browser, CSS coders see as a nightmare. Here’s a quick list of popular browsers, just off the top of my head:

• Internet Explorer 5
• Internet Explorer 5.5
• Internet Explorer 6
• Internet Explorer 7
• Firefox 1.5
• Firefox 2
• Opera 7
• Opera 8
• Opera 9
• Safari

There are 10 browsers listed right there, and that doesn’t even count the rest of Unix! How do you create a design that looks the same in so many browsers? Well, you save this post of course!

I’ve included something for everyone, from different renderings of the box model, to already made 100% cross browser compatible CSS layouts and even ways to check your site in different browsers.

1. Cross Browser CSS For Your Site
   Emil Stenstrom writes some guidelines for making your CSS cross browser compatible. This site has very good advice and comes from ideas being practiced, not theories.
2. Starting With CSS: Revisited
   Every browser out there has default styling applied to HTML tags. The problem is that every browser’s default styling is a little different. Using the stylesheet applied, you can remove the default padding and margins and start with all browsers rendering the same.
3. undohtml.css
   This is another variation of the technique above. This one is a little more widely adopted and removes ALL padding and margins.
4. Two CSS Hacks For Identical Pages Two CSS hacks that can be implemented for cross browser rendering. The article also has excellent advice on what to do when you start coding.
5. CSS Hacks & Issues
   This article covers little tips and tricks you can use to get rid of some of the quirks in Internet Explorer’s rendering of your CSS.
6. Box Model Hack
   Internet Explorer 5 and 5.5 incorrectly render the box model. Use this “hack” in your CSS to get them to render it the correct way.
7. Eric Meyer On CSS
   CSS Guru Eric Meyer talks about tricking browsers and hiding styles. Sometimes a you have to be a little sneaky to get cross browser support for your CSS.
8. /* Position Is Everything */
   This is absolutely required reading for anyone wanting to code CSS layouts. After reading this site you will understand exactly how to write for all browsers.
9. glish.com : CSS layout techniques
   glish.com has published examples of 3 column layouts, 2 column layouts and fluid versions of many more. The best part is they all validate and work the same in EVERY browser.
10. 100 Percent Cross Browser, Pure CSS Layouts
    Another website with pure CSS layouts. This one is especially noteworthy because there are tons of layouts here and all of them you have probably seen on a website somewhere.
11. Rendering Mode and Doctype Switching
    Did you know that in “standards mode” Internet Explorer 6 renders the box model correctly? Putting all browsers into “standards mode” is an easy way to ensure that your CSS is rendered the same in all browsers. This page shows you what DOCTYPE to use to trigger “standards mode”.
12. Activating the Right Layout Mode Using the Doctype Declaration
    This site has a table showing all modern browsers and the effect (standard or quirks mode) each doctype has on them.
13. In Search of the Holy Grail
    This article from A List Apart shows you how to create a fluid, 3 column layout that works in every browser currently on the market. If you want you can always just copy the final code and modify it, but it’s better to understand why the CSS is written the way it is.
14. Litmus Labs: CSSVista
    CSSVista is an application from Litmus Labs that enables you to edit CSS live in both Firefox and Internet Explorer. No more refreshing two browsers every time you make a change.
15. Browser Shots
    This online tool takes screenshots of your website in all sorts of browsers and displays the results. It’s great for testing in different browsers without having to install any.
16. IE NetRenderer
    Another online tool that instantly renders your site in a variety of Internet Explorer versions.