How to deal with multiple browsers?

[flash-map]

I have created a template and it looks beautiful in firefox. Unfortunately it doesn't look as good in IE. I'm not sure how to get it to look good in both browsers. Is there a way to switch css templates for certain browsers, or are there certain tricks to use to get it to look good in both browsers?

[TheRaptor]

The best thing to do is code using W3C standards, then validate your code using the validator, it'll cut down on alot of problems, trust me.

Using a css reset will help you "eliminate the discrepancies across browsers". Eric Myers' reset is one of the best around and the one I personally use. Another good starting point for your design is the blueprint framework. It gives "you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing" (from the blueprint website).

Sometimes IE has issues with even the best-coded websites, in which case coders will have to use either a workaround, conditional comments or a hack. But these will cut down on a lot of problems out of the box, before you even start coding.

If you want we can take a look at your site and tell you what you need to do in order to get it looking good in IE.

[felgall]

You will probably find that it is only antiquated versions of IE that have the problems such as IE7 and that the page displays just about the same as it does in IE9 as it does in Firefox5 (assuming you followed the standards).

[Paul O'B]

or are there certain tricks to use to get it to look good in both browsers?

Both?

You should be aiming to make it look good in all not just FF and IE.

Most of the differences I see are down to errors on the coders part rather than specific browser differences (although there are many differences and bugs). Usually a slight change of design or using the correct code or using code that works in the browsers you want to support is enough to make things look more consistent.

The key to designing cross browser pages is to test at every step in the design process in the browsers you want to support. This is the easiest way to work as bugs become evident at the time and not later in the process where it is often too late to make an easy fix or make a change of tact.

You should only seek to use hacks (or alternative code) when you know that you are faced with a bug or a browser shortcoming. Don't look at hacks as ways of fixing everything because many times it's not a bug but just that it's been coded incorrectly in the first place.

Finally when you know its a bug and there is no alternative then you can use an IE hack (of which there are many) but please keep them to a minimum and manage them correctly.

If you have specific problems that need looking at that post in the CSS forum with the problem and the desired outcome and we'll try and point out whether this is a bug, design flaw or just needs to be done differently