can't get CSS gradients to work in IE7

[longhorn1999]

1) Script Title: jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

3) Describe problem:

Hi everyone,

I've been using this Multi Level Menu for a while and it's worked great, but when I tried to update the look a bit w/ a gradient, I'm getting major problems in IE, especially IE7.


/* for Mozilla */
background-image: -moz-linear-gradient(0% 70% 90deg, #687d96, #95b3d7 70%);
/* for IE6, IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#95b3d7, endColorstr=#687d96);
/* for IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#95b3d7, endColorstr=#687d96)";
/* for WebKit (Safari, Chrome, etc) */
background-image: -webkit-gradient(linear, 0% 70%, 0% 45%, from(#95b3d7), to(#687d96));

Could someone tell me what I'm doing wrong here? When I add this code to .jqueryslidemenu and .jqueryslidemenu ul li a of jqueryslidemenu.css, it works perfectly in FF, but the main tabs don't give the gradient color in IE7 and it causes a bug in the drop down menu as well where some random lines appear when you scroll across the menu.

Any ideas are appreciated. Thanks!

[Beverleyh]

I'm not too up on gradients but I believe that 'hasLayout' needs to be set to satisfy gradient requirements in IE. Adding 'zoom:1;' to your IE6/7 stylesheet for the gradient element should fix the problem without the need for setting positions and dimensions in your CSS.

[longhorn1999]

Hi Beverley,

Thanks for the input! I'm definitely a CSS rookie as I'm just hearing of 'hasLayout' for the first time.

This is the little piece of code that goes on every page with the menu:

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>

I've just spent some unsuccessful time with google, but would the zoom:1; be able to go here at all? I tried sticking it after the height: 1% but that didn't work.

[longhorn1999]

Actually I just stuck zoom: 1; into jqueryslidemenu.css twice under the gradient images for IE7.


/* for IE6, IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B1D1F1, endColorstr=#687D96);
zoom: 1;


It's not pretty, but it seems to work. Thanks again for the help!