Cross-Brower CSS

[iLoveNoodle]

what are the css properties i should look out for when styling for cross-browser consistency?
or is there a good website that layout everything?

[Usernamex235]

Protip: Use a basic css reset, for example:

* {padding:0; border:0; margin:0}

Then most basic styling rules will be cross-browser friendly.

For the more advanced stuff like floating and dynamic sizing, always clear after using the float property to avoid height issues in firefox and text wrapping issues in old versions of IE.

And remember to test test test! Check out your page in each version of IE using http://www.my-debugbar.com/wiki/IETester/HomePage (windows only I'm afraid) and also see how it renders in firefox, opera, chrome, and safari, although the last 2 are usually pretty similar because they both use webkit.

[PsychicTide]

Not sure if it helps, but you can check out the Adobe BrowserLab if you don't want to download anything. It has several different browser types to choose from including side-by-side comparisons. The only drawback is that you can't test usability on JavaScript/other dynamics functions. Signing up for an Adobe ID is free.

www.Adobe.com/BrowserLab

in the majority of websites I create I use this reset link... might want to look into it

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css" />

Program for Firefox then fix for other browsers in my opinion.

[drjohn]

One other helpful tip is when making a div, avoid adding padding to it as it will be inherited by the paragraphs, links, divs inside it as well. I find that if I add any padding required directly to the element in question - the paragraph or whatever inside it, it reduces cross-browser problems with how they handle inheritance. Also try to avoid state of the art effects, child selectors and the like.

However some of the latest effects can be applied via javascript for older IE, such as rounded corners, shadows on divs and text, and there are some good reliable scripts available. DD_Roundies (google it) gives reliable rounded corners in older IE, and conditional statements let you use IE's filters only in older IE, for the latter see this page http://alt-web.com/DEMOS/CSS-Shadows.shtml

BUT you can't use DD_Roundies AND a shadow on a div via the conditional statement methods above, due to the tricks the rounding script uses, so it's one or the other for IE I'm afraid. Text inside can have a shadow, I think, when using DD_Roundies.