Posted by Justin
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
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.
- 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.
- 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.
This is another variation of the technique above. This one is a little more widely adopted and removes ALL padding and margins.
- 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.
- 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.
- 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.
- 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.
- /* 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.
- 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.
- 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.
- 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”.
- 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.
- 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.
- 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.
- 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.
- IE NetRenderer
Another online tool that instantly renders your site in a variety of Internet Explorer versions.