Webkit gradient on HTML element 1

[Wolfie7873]

I have my html (parent) element styled thusly:

html {
	background-color: #888; /* for non-css3 browsers */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#888888, endColorstr=#dddddd)"; /* for IE 8+? */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, endColorstr='#dddddd', startColorstr='#888888'); /* for IE 5.5 - 7 */
	background-image: -webkit-gradient(linear, top left, top right, from(#888), to(#ddd)); /* for webkit browsers */
	background-image: -moz-linear-gradient(left,  #888,  #ddd); /* for firefox 3.6+ */
	background-image: -o-linear-gradient(#888, #ddd); /* for Opera 11.10+ */
	background-repeat:no-repeat;
	height: 100%;
}

The background should be a gradient from dark gray to light gray moving left to right. Works in FF and IE, but not in the webkit browsers (Safari, Chrome). Any guesses why? The same styles applied to divs later the in page work just fine.

 

[feherke]

Hi

Which Chrome and Safari versions ?

background-image: -webkit-gradient(linear, top left, top right, from(#888), to(#ddd)); [gray]/* [s]for webkit browsers[/s] Chrome, Safari 4+*/[/gray]
background-image: -webkit-linear-gradient(left,  #888,  #ddd); [gray]/* Chrome 10+, Safari 5.1+ */[/gray]

Feherke.

http://free.rootshell.be/~feherke/

 

[Wolfie7873]

Safari 5, Chrome 10.

I now have:

html {
	background-color: #888; /* for non-css3 browsers */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#888888, endColorstr=#dddddd)"; /* for IE 8+? */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, endColorstr='#dddddd', startColorstr='#888888'); /* for IE 5.5 - 7 */
	background-image: -webkit-gradient(linear, top left, top right, from(#888), to(#ddd)); /* for Chrome, Safari 4+ */
	background-image: -webkit-linear-gradient(left, #888, #ddd); /* for Chrome 10+, Safari 5.1+ */
	background-image: -moz-linear-gradient(left,  #888,  #ddd); /* for firefox 3.6+ */
	background-image: -o-linear-gradient(#888, #ddd); /* for Opera 11.10+ */
	background-repeat:no-repeat;
	height: 100%;
}

Works now in Chrome, but not in Safari.

 

[feherke]

Hi

Oops, I quite forgot this thread.

In case someone is/will ever be interested in this, the problem was that coordinate order : must be horizontal vertical, in this case [tt]left[/tt] [tt]top[/tt] and [tt]right[/tt] [tt]top[/tt] respectively :

background-image: -webkit-gradient(linear, [highlight]left top[/highlight], [highlight]right top[/highlight], from(#888), to(#ddd)); [gray]/* for webkit browsers Chrome, Safari 4+ */[/gray]

Feherke.

http://free.rootshell.be/~feherke/