CODEWITHSUNDEEP
csshtmlcross-browser
ator
ator

Reputation: 272

CSS Browser Detection

I dont understand why the HTML5 website I am working on is different in all browsers. I know it must be CSS, but I dont know what.

on Chrome: http://slackmoehrle.com/chrome.png

on Safari: http://slackmoehrle.com/safari.png

on IE 7: http://slackmoehrle.com/ie7.png

on FireFox Mac: http://slackmoehrle.com/firefox.png

the style sheet can be found here: http://slackmoehrle.com/css.css

Can anyone shed any insight?

Many are saying that browser detection is not a good method, but I dont see what to do to make this all work in the various browsers

UPDATE:

without using a CSS reset: http://slackmoehrle.com/test/without-reset/

with using a CSS reset: http://slackmoehrle.com/test/with-reset/

Upvotes: 0

Views: 1073

Answers (3)

Rob
Rob

Reputation: 15168

First of all, no version of IE can handle the new elements of HTML5 without javascript help. Only modern browsers can and IE is not a modern browser.

As far as the other browsers go, I'll have to look more but I've not had any issue with any sites I've done but, then, I don't use CSS resets and set all the CSS on the elements myself.

Upvotes: 0

dimarzionist
dimarzionist

Reputation: 18687

The only real problem with browser detection is the fact that if newer version of browser will support some new features (rounded borders for example), but you still will be doing some workarounds.

Better approach is to use feature detection, so you will be able to use some specific browser capabilities if it has support of them and some graceful degradation pattern when something isn't supported.

For CSS most pragmatic approach is to have reset CSS included for all browsers, then have some common CSS rules which look the same in all browser and additional CSS files for different browsers which contain rules that should be different for different engines.

From my latest experience it's almost always possible to maintain only two versions of these DIFF files - one for Firefox, Safari, Chrome and another for IE family. And use feature detection for JS.

Upvotes: 1

irishbuzz
irishbuzz

Reputation: 2460

Have a look at using a CSS reset stylesheet

My personal favorite is Meyer's: http://meyerweb.com/eric/tools/css/reset/

Upvotes: 2

Related Questions