I'm new to CSS, what are the rules to obey to make sure that CSS looks the same in other browsers? (I use Firefox).
P.S. Are there any specific rules for IE7?
I'm new to CSS, what are the rules to obey to make sure that CSS looks the same in other browsers? (I use Firefox).
P.S. Are there any specific rules for IE7?
You can't always be sure.
But you can use a css reset. All the browsers standard css-settings will be resetted and you then have a clean start.
http://meyerweb.com/eric/tools/css/reset/
In this website you have all the necessary information, study http://www.quirksmode.org/ by Peter-Paul Koch & Don't use browser specific selectors, such as ones prefixed by -moz- or -webkit-
Finally, No, not absolutely sure, unfortunately. Testing, testing, and more testing is the only solution.
You're asking a quite broad question here, but a few guidlines to follow would be:
Make sure it's standardized CSS and HTML. If it has a -moz-, -webkit- or -o- (or more) vendor prefix, it might not behave exactly as you intend.
Make sure it validates! Put it through the W3 validation service to see any errors in your code.
Consider using a CSS reset, like the Eric Meyer reset. This will reset all your elements to 0padding, margin etc.
Or use a Normalize (as Meo points out) like the HTML5 Boilerplate.
Learn how to use IE's Conditional Comments. For the most part, the "real" browsers, (Chrome, Firefox, Opera) will render the HTML as it should be. With there being multiple in-use versions of IE, you're going to have to give different code for each of the versions (don't support IE6) and this is the best way to do it.
There's probably a lot more to add too, but the best thing really is experience.
Good luck!
I think the bast place to start is here: http://html5boilerplate.com/ (Read the Commented CSS.) Its normalizes the CSS behavior across the different browsers. (i would not recommend using a Reset).
Consult http://na.isobar.com/standards/ to get to know the best frontend best practices.
There are some rules doe to make your stuff work in IE 6 & 7 (does are the only ones that gonna cause you serious trouble):
When something does not work in IE6 / 7 try to set zoom: 1 before you try anything else
z-index is a little tricky on old IE's
make yout sites for for IE first then do the fancy stuff for the other browser (CSS3) its gonna save you a lot of trouble
Do not insert more then 32 CSS files to your html file (no joke ;) http://acidmartin.wordpress.com/2008/11/25/the-32-external-css-files-limitation-of-internet-explorer-and-more/ )
Consult http://www.quirksmode.org/ to develop e sensibility for what is working where
try to avoid MS filters in your CSS... (can make your site rendering very slowly and can lead to unexpected behavior with JS Animations )
Up until IE 9, IE never seemed to follow any rules at all as far as CSS goes, but for pretty much all other browsers follow these W3 standards:
CSS Reference, W3 Overview, W3 CSS Validator
In theory, if you stick to these, everything should work, but it isn't quite like that in reality. It's certainly a step in the right direction though, the rest of the nitty gritty is just learned through trying, errors and experience.
This website will give you a good start.
http://htmlhelp.com/reference/css/structure.html