0

If you look at the main navigation menu on this page you see that I'm using a drop shadow on a:hover, however, in IE9 the shadow is buggy - it doesn't always show, and often remains after the hover is no longer active. I want to either fix it, or get rid of the shadow only in IE.

my css is:

    #menu a {
  color:#fff;
  padding-top:10px;
  padding-right:10px;
  padding-left:10px;
  text-decoration:none;



}

#menu a:hover {

 background:#e58f56;
 border-top: 0px solid transparent;
 border-bottom: 10px solid transparent;
 border-left: 10px solid #bbb2b1;
 border-right: 0;
 border-top-right-radius:5px;
 border-bottom-right-radius:5px;
-webkit-box-shadow: #888 4px 4px 4px;
-moz-box-shadow: #888 4px 4px 4px;
box-shadow: #888 4px 4px 4px;



}

Any ideas?

Findo
  • 87
  • 1
  • 3
  • 8
  • add -ms-box-shadow (go ahead and add -o-box-shadow too) – albert Nov 12 '11 at 19:45
  • 1
    IE9 uses the standard `box-shadow` property, so there is no need for `-ms-box-shadow` (in fact, I'm not sure if a prefixed version even exists since IE didn't support box-shadow until version 9 anyway). – daGUY Nov 12 '11 at 19:55

3 Answers3

0

If you dont see the DropShadow, it's probably that your IE9 is in Compatibility View Mode. Try to set explicitly in your page the compatibiltiy with IE9 with some code like:

<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=10; IE=11" />

In the header of your page, before calling any Css.

Franky
  • 1
0

I just dropped your code above into a js fiddle and it worked fine in IE9! Must be something to do with the 'pie' fix your calling in. Maybe try remove it and have a check.

The effect you are attempting is definitely 'do able' in IE9.. Don't give up:)!

NullUserException
  • 83,810
  • 28
  • 209
  • 234
Brad
  • 275
  • 1
  • 4
  • 9
0

Are you sure the shadow isn't showing at all? IE9's implementation of box-shadow renders the blur at about half the distance that other browsers do (I actually posted a question about that here). For low values, it's possible that IE9's rendering is so slight that you don't notice it. Just as a test, try making the blur radius much larger to see if it shows up in IE9.

Community
  • 1
  • 1
daGUY
  • 27,055
  • 29
  • 75
  • 119
  • I don't see any reason why it wouldn't work the way you have it set up. Maybe try adding `box-shadow: none;` to the `#menu a` declaration? – daGUY Nov 13 '11 at 17:48