CSS3 across browsers?

[mojo13]

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

[kobra]

One problem is no radial gradient in the body on other browsers (I'm using just a background colour there).

That would be a solid color - - no gradient

Also rounded CSS corners using border-radius doesn't work in IE. I'm trying to use -webkit-

I think you will find spotty support across browsers for that
Images for the rounded effect for the most part display in all

[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

The following should help on the linear gradients: will not work for ie until v10

-moz-linear-gradient(#F4F2F2, #E0E0E0);
-webkit-linear-gradient(#F4F2F2, #E0E0E0);
-webkit-gradient(linear, center top, center bottom, from(#F4F2F2), to(#E0E0E0));
-ms-linear-gradient(#F4F2F2, #E0E0E0); /*for ie10 */
-o-linear-gradient(#F4F2F2, #E0E0E0);

following should handle the rounded corners: works only in ie9

-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;

[kobra]

Thanks Clyde!!

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