I have decided to create a site using HTML5 only...as it will be the standard for coding here forward.
From what I have found, Google Chrome is the most compatible browser thus far...with FireFox in second place and IE9 last.
I have yet to test on the mac with Safari...hopefully it is no differnet than Chrome.
I am using one of the available widgets - CSS3 Aqua Buttons and it looks identical with Chrome.
FireFox dislays the buttons colors slightly off from the original, the color at the top is not correct and IE9 doesn't recognize the radius settings, displaying it as rectangles. IE9 also shows the button as if it is already in hover mode, which I made bold...so you would be able to tell when it is selectable.
IMHO, Microsoft needs to get out of the browser business...lol.
Are there tweeks to the code to get the other browsers to look like the actual widget, as displayed in Chrome?
To see what I am talking about, the site I'm working on is www.liquefiedskin.com
The problem with the border radius in IE9 is that IE9 uses the W3c border radius property and not a browser specific, (as does Opera) add -
to your css, as for the colour difference this is probably due to the way all browsers interpretate color values differently, which is especially noticeable when one compares colors on a mac then a pc.
As for the hover problem this is the way you have written the css, IE9 does not yet recognize the 'offset' values so ignores the rule completely.