Originally Posted by aaronhockey_09
Well for Cross-Browser computability - I almost always use a css reset.
Something that may be of interest to you is Normalize - http://necolas.github.com/normalize.css/
which helps things looking / acting the same cross browser.
For IE you almost always have to do conditional stylesheets for versions lower than IE9 - like the PNG fix for IE6, various padding / margin issues in IE7 and IE8 -
so for that take a look at
Possibly look into a css framework that is already "cross-browser" friendly. Bootcamp, Foundation, Skeleton, etc etc...
Other than that, all I can say is read up on some proper techniques in some blogs like "CSS tricks" and keep on learning.
Hope this helps
Thanks AaronHockey! I will check those out.
Originally Posted by SB65
The thing that will make the most difference cross-browser, not mentioned above, is to ensure your html validates - see my signature for a link. Invalid code will cause a lot of cross browser differences.
Browsers have different standard settings on paddings and margins - so normalise these as suggested with:
I prefer to test in Firefox - use Firebug (see signature again) to help you. Once it's OK and validated in Firefox, check other browsers. Mostly, if you've done it right, it should be OK in Opera, Chrome and Safari. Occasionally Safari and Chrome will handle clearing floated elements slightly differently.
IE9 should be OK as well.
In most cases, IE8 is probably going to be OK, as well. Don't think I've written a conditional statement for IE8 yet....and should really only be a last resort.
For IE7 it's a different ball game, and IE6 is even worse, if you need to support it. Conditional css is likely to be necessary here. If you need to worry about IE7 and under have a look at this now rather dated post
SB65, thanks for the suggestions. I have already validated my html and css. So those should okay. I will try resetting margins and padding.
How does this CSS resetting work? Do I include the reset file at the very beginning, then include my own css after?
The site largely works in IE, it just doesn't look great. Little things are out of place here and there, hopefully it's just a margin/padding thing.
Thanks for the suggestion of Firebug. It's definitely a useful add-on, I will for sure be using it now! In fact, it just helped me solve a problem where my drop down menus were being made visible when it made the transition from absolute to fixed.