0

AFter 2 days of googling and messing around with my CSS I give up and turn to you guys for help. I created a navigation menu with a dropdown entirely in CSS. When came the time to test this under IE9, obviously it didn't work.

The dropdown appears transparent, I can't figure out why for the life of me. All works fine in other browsers but I can't seem to find the property that IE doesnt understand.

I suspect this part: 

nav ul ul li {
    float: none;
    border-bottom: 1px solid #b7b7b7;
    border-top: 1px solid #fff;
    position: relative;
    background: -webkit-linear-gradient(#eeeeee 0%, #d4d4d4 100%);
    background: linear-gradient(#eeeeee 0%, #d4d4d4 100%);
    background: -moz-linear-gradient(#eeeeee 0%, #d4d4d4 100%);
    background: -o-linear-gradient(#eeeeee 0%, #d4d4d4 100%);
    -moz-box-shadow: inset 2px 2px 5px #ccc;
    -webkit-box-shadow: inset 2px 2px 5px #ccc;
    box-shadow: inset 2px 2px 5px #ccc;
}

Is it possible that IE doesn't see the background? I attached the fiddle here: http://jsfiddle.net/VU37g/

Any help or comments on the CSS welcome and thanks in advance!

weebey
  • 3
  • 2

2 Answers2

1

Because IE 9 doesn't support gradients yet, you have to use the proprietary MS filter property to achieve a similar effect. If no value for background-color is specified, it is set to transparent by default.

Syntax for IE would be like:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc',  endColorstr='#000000');

More info

Adrift
  • 58,167
  • 12
  • 92
  • 90
0

To get Cross Browser compatibility please follow this guide

For IE Only:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

http://webdesignerwall.com/tutorials/cross-browser-css-gradient

feco
  • 4,384
  • 5
  • 27
  • 44