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 (green) background. Here is my code

.menu_body a {
  display:block;
  color:#006699;
  background: #008800;
  /* Mozilla: */
  background: -moz-linear-gradient(top, #0b71a4, #025f8e);
  /* Chrome, Safari:*/
  background: -webkit-gradient(linear,
            left top, left bottom, from(#0b71a4), to(#025f8e));
  /* MSIE */
  filter: progid:DXImageTransform.Microsoft.Gradient(
            StartColorStr='#0b71a4', EndColorStr='#025f8e', GradientType=0);
  padding: 1px 18px;
}   

Answer 1

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.

Answer 2

The correct syntax is:

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

This is supported by IE4>

See the MSDN source here .

Answer 3

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.