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.

[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