CSS - cross browser compatibility = different style sheets?

I am in the process of learning CSS while designing a simple commenting system. I use firefox(4.0beta13pre if anyone cares) as my main browser so I do all testing with it.

after making a small piece look perfectly with It, I found out an image wasn't aligned in chrome, and than opening Internet Explorer it lo开发者_运维百科oked like complete garbage.

So is it just a matter of trying harder to achieve compatibility or is it that even a simple system needs different style sheets to other browsers?

Thanks, Fingerman.

is it just a matter of trying harder to achieve compatibility

Partially, that's the case.

For a better starting point, look at CSS reset files. These ensure that you are starting from a (more or less) level playing field on all browsers, so achieving compatibility is easier.

You may also need to put in specific browser "hacks" and overrides, but this really depends on what you are trying to do.

Yes. It is generally a matter of trying harder to find a combination of HTML/CSS that works across browsers/versions. It's a major pain, but such is the life of a web developer.

I'd definitely try to tweak before creating separate style sheets for different browsers.

As you are learning CSS, i suggest you take a look at https://github.com/joshuaclayton/blueprint-css/tree/master/blueprint/src. It has ie.css which containes hacks pertaining to IE. It also contains reset.css. Intially, it will help you start. Later, you can make your customized css stylesheets.