CSS3 across browsers?

[clydejones]

Hi there.

I'm getting there with my site but notice differences when comparing browsers. I built in firefox and it seems to be ok there. One problem is no radial gradient in the body on other browsers (I'm using just a background colour there). Another is the lacko Nav wrapper appearance. That is no linear-gradient. Also rounded CSS corners using border-radius doesn't work in IE. I'm trying to use -webkit- to get things to work in Opera with limited success. Can anyone point me in the right direction here?

Link here if it helps:

www.chileno.co.uk

Cheers in advance

following should handle the radial gradients: will not work in ie or opera

/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
/* Opera cannot do radial gradients yet */

[mojo13]

thanks people, I appreciate the help. Will try these suggestions and post back

[mojo13]

great that fixed my Opera view.
background-image: -o-linear-gradient(#6161AB 0%, #040629 10%, #100B61 99%);

I had this but didn't seem to work:

background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #6161AB),
color-stop(0.10, #040629),
color-stop(0.99, #100B61)
);

The radial for the background isn't too important, I'll just wait for Opera to catch up.

I'll have a go at IE now, thanks muchly!

[mojo13]

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.

[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.

[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.