Is there any good resource for understanding how to handle CSS for different broswers?

I have seen several attempts by CSS authors to handle browser compatibility issues. This example comes to mind.

.justAbox { border:2px solid black; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }

I assume that this is an attempt to handle IE, Firefox and Safari browsers.

Then there is the statement that if you don't use !doctype that IE will not handle some CSS the way you would expect it to.

Is there any good resource for other examples of writing CSS to get the same results in all major browsers?

Hiya Jim,

Actually that looks like CSS3 code not the current CSS version of code. The -moz- and -webkit- aren't attempts to get them to work in different browsers, they will be the standard (at this point in it's development that is, this could change lol) for addressing code to each of the target browsers you want to reach correctly. This means "very little" browser incompatibility for us in the future, but it's not a fully developed system yet. This isn't supported in any way I believe in IE of any version, but should be very supported in IE9 from what I've been reading recently.

You can get a really good idea of what this will be like in CC's HTML5 & CSS3 PDF book for sale on their site. Very nice little resource.

Other than that, I know there are some ways around various browser compatibilities, but I'm not too good with those things so hopefully someone else will have some ideas. Just wanted to touch base on what you posted. Good luck on it and it will be interesting to see what others have for ideas on this

I'm not sure if these will help...

http://www.sitepoint.com/forums/showthread.php?t=171943

http://reference.sitepoint.com/css/work … ltershacks

http://www.positioniseverything.net/explorer.html

Regarding the doctype, you always want to use a complete and valid doctype for html 4.01 or xhtml 1.0 so browsers know how they are supposed to render things. Such doctypes also should not be preceded by blank lines or any text (such as an xml declaration). Otherwise, pages may be displayed in quirks mode in IE browsers. This will cause IE to use its broken box model and ignore auto margins that are intended for centering, among other problems.

ARG! None of my background color is showing up in Chrome!

Since the chances of getting everyone to just use Firefox are pretty slim, does anyone have the ingredients to the secret sauce?

Add this to the very top of your css file:

html{height: 100%;}

See if that helps.

Sounds like a stack overflow problem.

Thanks, but it didn't. I did just look over my code, though. The problem may be that I have more bugs in my html than Bin Laden has consumed in his entire lifetime. Might take me a while to clean it all up I did learn something new though. Thanks, Eric!

Not a problem. Let us know if we can do anything else.