One thing I would like to know is, how to design for different browsers? Is there a way to know what works in some browsers and what doesn't?

 

I was hoping maybe someone knew of a chart or something of what things we can use and what to avoid so that whatever we create will most likely look the same or very similar under various conditions. For example, what CSS things don't work in Firefox that do work in Internet Explorer, and what works in both? Is there a site out there with this kind of information?

The best thing to do, well this is what I do, Is design for one browser and tweak for the others...

 

I always use firefox, so I generally design and test in firefox and then when I have a layout.html file complete I then test it internet explorer, the browser most likely to throw a wobbly. I then revise my code and jiggle things about to work in internet explorer. I then test on mozilla, netscape, opera and all the browsers on the mac and tweak some more. I generally find that doing things this way, once the site works in firefox and explorer it works fine in everything else, but I occassioanlly get small glitches in mozilla and netscape that alert me to small errors in my code that are easily fixed.

 

There are tons of sites out there with information about bugs etc. The best things to do is just use google or post on this forum when your design breaks and you'll easily find a fix to your problem.

 

I found this chart ages ago, but to be honest I have never used it.

 

Full CSS Property Compatibility Chart

 

I would advise reading the book 'bulletproof web design' by Dan Cederholm as its very easy to follow and explains issues in great detail. I found it incredibly useful, but you need to be familiar with CSS.

 

I hope that's helped and not bamboozled you completely.

Post away on the forum as you're bound to get a quick response if you have any problems with your CSS.