CSS3 across browsers?

[clydejones]

So, to update, I tried in IE but nothing works there at all. That is no round corners, no linear gradient (but can wait for IE10, although I tested in Windows Internet Explorer Platform Preview but nothing), margins are off and my box-shadow doesn't work either:

box-shadow:10px 12px 35px 1px rgba(10, 10, 10, 1);
-moz-box-shadow:10px 12px 35px 1px rgba(10, 10, 10, 1);
-webkit-box-shadow:10px 12px 35px 1px rgba(10, 10, 10, 1);


These work in firefox and opera anyway.

rounded corners, box shadow will work in ie9 but not in other versions.

linear gradients will not work in ie (at least until version 10)

[mojo13]

Thanks Clyde.

Yes, I should have said I am testing in IE9 and no joy at all. I think my CSS file must have a conflict in it or sthing - to not even get rounded corners going there. The gradient will have to wait for IE10 - when is that - like next year? If I find out what works I'll post back.

Thanks again

[mojo13]

For anyone else interested in using these effects, I've tested in chrome and all are working for me. That is :

-webkit-box-shadow:
-webkit-radial-gradient:
-webkit-linear-gradient:

So far it's only ie9 that I'm finding problems with.

[mojo13]

So in ie9, I can get the effects (with the noted exception of the gradients) but only if I go F12 for developer tools> Browser mode and choose IE9. That is, it does not working in IE9 compatibility mode. Therefore, this must be the default mode when browsing to a website. So, does that mean that something else on my page is not compatible with ie? Otherwise I'm not sure why ie doesn't show the page as it is.

I'm obviously missing something major here, anyone got any ideas?

Cheers

Matt

[dw08gm]

Thanks for the headsup. I have been wanting to fill a complex shape generated by mathematical formula with a gradient for absolutely years. Now I see the light.

http://www.w3schools.com/svg/svg_grad_linear.asp
http://www.w3schools.com/svg/svg_path.asp
http://www.w3schools.com/svg/svg_polygon.asp

I am so excited.

[clydejones]

So in ie9, I can get the effects (with the noted exception of the gradients) but only if I go F12 for developer tools> Browser mode and choose IE9. That is, it does not working in IE9 compatibility mode. Therefore, this must be the default mode when browsing to a website. So, does that mean that something else on my page is not compatible with ie? Otherwise I'm not sure why ie doesn't show the page as it is.

I'm obviously missing something major here, anyone got any ideas?

Cheers

Matt

IE in compatibility mode is essentially displaying the website in an older version of of IE

If you want to display the site using IE9 then don't use it in compatibility mode.

[mojo13]

great thanks, I see now, thought that was only available in the web developing tools. Looks like it;s all good. Thanks a lot for the help.

[RescoCCC]

rounded corners, box shadow will work in ie9 but not in other versions.

You can make both work in earlier versions with a little script called PIE.htc. I did it with one of my sandbox installs. I think there are also a couple other scripts out there that do the same.