background gradients in IE7 with CSS

Question

I am using the following bit of CSS to create a linear background gradient. It seems to work just fine in IE8/9, FF, Safari and chrome but not in IE7. IE7 shows a solid (gre

Answer 1

The correct syntax is:

filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#550000FF, endColorstr=#55FFFF00)

This is supported by IE4>

See the MSDN source here.

Answer 2

I'm unsure if the parameters of this transform are case sensitive - but seeing as most other CSS is, you could try:

startColorstr='#0b71a4', endColorstr='#025f8e'

Notice the lower-case starting character, and lower-case str suffix.

Answer 3

In IE<=7, filters won't work unless element has layout.

zoom: 1;

Be aware that it can break other things, so old good background-image might be safe and reliable solution.

Also please note that your CSS lacks gradient properties for Opera, IE10 and updated syntax for Webkit.