Cross-Browser Compatibility

We all have had the moment when we've looked at our site in Internet Explorer, Safari, Firefox, Chrome or Opera and died of embarrassment at the mess before us.
It is very, very tricky to be completely cross-browser compatible, and to get it looking amazing in each browser. There are ways and methods, though, that will make sure your layout looks as best as you can get it - even in the devilish Internet Explorer.

#1: Valid X/HTML and CSS

One big issue that messes up the look of layouts is invalid coding. You should try and validate it as best as you can, to fix up errors and glitches over any major and minor browsers. Run your site through the W3C Validator and see what you need to do. You can always ask me for help if you need it. :)
Just by fixing up the few errors around and making it valid will make it easier for browsers to read and process your webpage the way you like it.

It's a good idea to see that your CSS is valid for the same reasons.

#2: Alternate Fonts

As there are different types of computers out there, mainly Macs and Windows, it is a good idea to specify basic fonts. For example, say we have styled our body element in our CSS like so:

body {
font: normal 12px/150px garamond;
}

Not everyone will have the font Garamond on their computer, and instead will load a default font such as Arial or Times New Roman. In most cases, this will make your layout hideous. One easy option is to use these basic fonts, but another is to have them as other fonts the browser can use, like so:

body {
font: normal 12px/150px garamond, georgia, "times new roman";
}

That means that if the computer doesn't have the font Garamond, it will use the font Georgia instead.

#3: Sizing Fonts

It is best not to use px or pt to define font sizes (I do though. I am such a sucker... only because ems buggered up the whole layout). Anyway, you should use either % or ems for font sizes, so it can be changed by the visitor; for example, in Firefox, holding CTRL and scrolling with the mouse wheel zooms in and out, changing the font size.
A useful guide to use is here.

#4: Container Troubles

Sometimes, our container to centre everything doesn't wrap around the divs properly. You can see if this applies to you by adding a background to your container div.
To fix this, we should add overflow: hidden to our container div:

container {
padding: 10px;
width: 800px;
overflow: hidden;
}

#5: I.E Has It's Problems

One reason Internet Explorer is a bad browser to use is because it reads CSS codes in a very dodgy way. You should avoid the following:

• Image rendering - don't think about changing the size of an image with HTML or CSS. It ends up looking horrible.
• Don't use the font Lucidia Sans. It looks disgusting, as the browser looks at it in the completely wrong way.
• It mucks up layout divs by doubling margins on the floats, mainly in container layouts.
• In a lot of CSS based layouts, like mine, set widths on floats will be your downfall if an image or line of text with no spaces is involved. I.E will ignore the width and the text will continue across your layout, often pushing a sidebar underneath the content.

There are, of course, solutions.

First: For image rendering, it's very simple - don't resize images with HTML or CSS.
Second: Don't use the font Lucidia Sans.
Third: Internet Explorer will break your layout apart by doubling any margins used. If you put margin-left: 5px, it will work in Internet Explorer. As it is simply that inferior, it will read it as margin-left: 10px.
To stop this, add display: inline to your divs. For example:

sidebar {
width : 150px;
float : right;
display: inline;
}

That will fix up the margin problem.
However, we still have the problem with fixed widths. We must now add overflow: hidden; to all our layout divs as well. Like so:

sidebar {
width : 150px;
float : right;
display: inline;
overflow: hidden;
}

#6: Too Much of CSS 3?

It is best not to use those shining, new CSS 3 selectors. Internet Explorer doesn't support a heap of them.
While we are here, Internet Explorer is also awful at dealing with transparent PNGs.

#7: Was That Too Much?

There are, of course, other methods to use. The main problem is making things work in Internet Explorer and other browsers too. I am not assuring you now that your site will look amazing in an array of browsers, but it will look better.
You can have a look yourself to try and fix any errors or glitches you see in any of the major browsers.

You can use Netrender to view your site in different versions of I.E, and Browsershots to see your site in a large selection of browsers.

I hope this helped you, and if you're using I.E, I would recommend that you get Firefox. It's better for webdesigning, as it reads pages properly; it's neater, cleaner, faster and better.
And why it's better? Read this article.