Handling browser differences

here's some good backgrounders about IE (and other browsers too!):


If you stick to using valide XHTML and you push all formating and styling to CSS, then 99% of the time you don't need to render HTML specific to any browser (there's some edge cases where you do, but I don't think they're common).

The challenge is getting your CSS definitions to work universally. Most of the time Safari and FireFox agree, and the challenge is getting IE to work.

So, the best approach is do your HTML and CSS so that it is "correct" and what you'd expect to work for Firefox/Safari, then check it in IE (all versions you expect to support) and start applying the CSS hacks that are known workarounds for IE. It can a long time to find those hacks, that's the aggravating part of web design.

If you can keep IE in standards mode, it mostly does OK, but you're goinng to have to do some reading about IE CSS hacks. Those sites above are a good start.

There's a few mainstream techniques for telling CSS to apply things only to IE. Each has some pros & cons.

This is MS's official take on it:

however, that method fails when someone has more than one version of IE installed in their system. Not too common for sure, and generally only affects the browser nerds, but if you have a nerdy site, that's a big deal.

Here's some other techniques:

-- gw

I have done it where I use scripting logic (i/e/ ruby or whatever language is involved) to determine the browser, and then serve CSS files tuned for that browser. This approach can be used for serving user-selected skins too.

Now, you don't need to do whole CSS definitions that way as 90% of it is all identical, but you can do a base sheet, then based on the browser supplement it with ie_overrides.css, ffx_overrides, opera_overrides, and even treo_overrides, etc. Same with skins. A base plus the parts that vary per skin.

Depending on how many browsers you do active testing for, or just how much of the CSS has to be different, separate files can make sense. If you're really only bothering to test for IE 6+, FFx 1.5+ and Safari 2+ and you have a relatively simple design, then really there's likely to be so few differences that the CSS hacks in one file is probably best. But if you fine tune for a dozen browsers, or you have some tricky stuff that requires quite a lot of overrides, then it starts to become easier to compartmentalize IMO and use separate files (if you're clean about the separations), but it's a matter of preference IMO.

-- gw

You could use this: http://rafael.adm.br/css_browser_selector/

Best regards

Peter De Berdt