Well it has become obvious that we are going to always have incompatabilities between our browsers, and given that the whole world will never see sense and only use firefox, it is important to be able to view a website that you are creating multiple browsers as commonly the positioning will be different in the various browsers.

One way to get around this is to run a bit of browser identification code (such as the one shown at htmlgoodies.com) so that when the page is called it loads the correct css for the page.

On the latest project that I am working on I started doing that - but realised there must be a better way than writing 2 or 3 different style sheets.
After a lot of research and a serendipidous event I found that you can write css for safari and firefox that will be ignored by IE and in the same way you can write css for IE that will be ignored by everything else. (All the css is written in ONE SHEET)

Syntax

I have found that the biggest problem in writing css for browsers is the different ways in which the broswers interpret the positioning.
If your site looks right in Safari and/or firefox but it is all out of place in IE (this is the most common problem) then use the following syntax:

*html #menu {
       class attributes go here such as
           top: -700px;
        width: 827px;
        left: 173px;
       }

This defines the position of the div menu only for internet explorer so that if it is out of line with safari and firefox this can fix it.

The next fix I found by accident - a guy I work with had been using dreamweaver 8 on the Mac and had fixed a load of problems - however when I viewed them in IE nothing had changed despite all the new code.
This was because Dreamweaver added a > before the class name - which meant that IE skipped over the command because it is not proper syntax - where as Firefox and safari read the css and carried it out. see example below.

>#menu {

}

bookmark to: