|CSS3 linear gradient syntax help|
I'm trying to create a gradient background using CSS3 techniques.
I'd like to make a linear gradient from top to bottom, and go from transparent to #eee. However, I'm having trouble with the syntax.
This is what I have so far:
background: transparent; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffeeeeee'); /* for IE */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(238, 238, 238, 1.0))); /* for webkit browsers */
background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(238, 238, 238, 1.0) 100%); /* for firefox 3.6+ */
Can anyone help?
That seems OK to me, you just to need to add
zoom: 1; for IE<8 -
zoom: 1; sets hasLayout to true, All filters need hasLayout to work in IE.
I just pasted your code, added it as background to a div#test, added zoom:1 just below the 1st background rule and it's working in IE, FF & Safari..
does that solve your issue or is there something else not working or problems in other browsers..