How to make website compatible with every browser

I am trying to make new website and I would like to know how to make it compatible with cross-browser as now I am able to view my website perfectly w开发者_如何学Pythonith Google chrome and when I see the same with Firefox 7.0 it's looking very ugly and with IE 8 its looking better.So I would like to know how to make compatible.

Any suggestions will be greatly appreciated!

Every browser will render differently many things, mainly as they render differently some CSS properties (you can check different browser rendering here www.w3schools.com/cssref/). A commonly used solution is to differentiate the CSS stilesheets for every possible browsers. You can detect the client browser via javascript: http://www.w3schools.com/js/js_browser.asp

and set different css again via javascript.

A complete example here: http://rafael.adm.br/css_browser_selector/

Each specific incompatibility will require a different solution. As a general guideline use frameworks such as jQuery and avoid browser-specific code, then when you find an incompatibility ask about that specific issue. Also, you should not aim for pixel-by-pixel compatibility between browsers, CSS is not actually designed for that.

One of the best ways is to use standardized code. Avoid using "HTML 5", because this still has a lot of browser specific implementations (as it is not yet a standard). HTML4 or XHTML1 should work on most browsers (Safari, Opera, Firefox, Chrome, IE7+), and show it more or less the same. As a web developer you should check with multiple browsers if your sites works ok. Using the ISO standards give you a good start: http://validator.w3.org/

Testing with a lot of browsers can be done using services like http://browsershots.org