Background Gradients in IE7 with CSS

Question

I use the following CSS bit to create a linear gradient of the background. It seems to work 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 will not work if the element does not have layout .

 zoom: 1; 

Remember that this can break other things, so an old nice background-image can be a safe and reliable solution.

Also note that your CSS does not have 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 not sure if the parameters of this conversion are case sensitive - but by observing most of the other CSS, you can try:

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

Note the initial lowercase character and the string suffix str .