Browser Specific Stylesheets
It’s unfortunate, but all browsers don’t use the same rendering engines to show web pages. This means that the same combination of HTML and CSS can look different on different browsers. Figuring out how to make your site look the same on all browsers is a big part of web design.
First Thing: Clean Code
You want your HTML and CSS to be W3C compliant. This means that you should validate all your pages. You should not use tables for layout purposes, and you should keep all the CSS in external stylesheets.
While you are writing this clean beautiful code you should use Firefox to see what the page looks like. Firefox (to my knowledge) renders pages closest to the W3C standard.
IE6
Once you have the general layout looking good in Firefox you should take a look at Internet Explorer 6. If you don’t have a copy you can get a quick screenshot of any page by going to NetRenderer or Adobe Browser Labs. If you’ve used CSS for your layout, you’ll probably see some problems with the way the page looks. Many problems can be worked out just by seeing what they are and rethinking your CSS, but you will get to many points where you just need to tell IE6 a few things that you don’t want to tell other browsers.
Conditional Comments for IE
Conditional comments are special comments that are understood by IE and are used to feed just certain versions of IE pieces of HTML that the rest of the browsers in the world will ignore. When you make the head of your HTML pages you should use these special comments to feed IE6 a specific stylesheet and also one for IE7. With these “hack” stylesheets we will help them to look like the rest of the browsers out there.
Separating your IE hacks also means that your good meaningful styles are in one sheet and your hacks in another, so later when nobody uses IE6 anymore you can throw out the hacks easily.
Here’s a copy of the head of our documents which shows you how we include the normal and the “hack” stylesheets.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<head> <title>Cross Browser Stylesheets ~ mimoYmima</title> <link rel="stylesheet" href="/css/basic.css" media="all" /> <link rel="stylesheet" href="/css/screen.css" media="screen" /> <link rel="stylesheet" href="/css/print.css" media="print" /> <link rel="stylesheet" href="/css/handheld.css" media="handheld" /> <!--[if lt IE 7]><link rel="stylesheet" href="/css/ie6.css" media="screen" /><![endif]--> <!--[if IE 7]><link rel="stylesheet" href="/css/ie7.css" media="screen" /><![endif]--> <meta name="description" content="Add your page description here." /> <script type="text/JavaScript" src="/includes/global.js"></script> </head> |
In this bit of code we get all our normal sheets: basic.css, screen.css, print.css, and handheld.css (if you only have one sheet reference it instead) and then after that we pick up hacks-ie-win.css with a conditional comment as well as hacks-ie7.css.
Example Files
The files in this example package show the working relationship between the different stylesheets and the index.html file.
