Box shadow CSS to work in all IE versions WordPress

• REFUNDED

Hi there,

I want the top menu on my website [[LINK href="removed"]][removed][[/LINK]] to look the same in all IE versions.

Right now I have it working on all versions except IE8. However, I dont really like te results of it. When you hover, the item jumps a bit to the side.

So I want it to work in all IE verisions and it has to look like when you view it in Firefox/Chrome.

This is the CSS that I have right now:

#menu-main-nav li a {
background: #F6F6F6;
padding: 15px;
border:1px solid #DDD;
color:#444;
text-shadow:1px 1px 1px #DDD;
-moz-box-shadow: 0px 2px 2px #444;
-webkit-box-shadow: 0px 2px 2px #444;
box-shadow: 0px 2px 2px #444;
zoom:1; /* This enables hasLayout, which is required for older IE browsers */
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color=#444444);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color=#444444, positive=true)";
}
#menu-main-nav li a:hover {
background: #FAFAFA;
border:1px solid #AAA;
color:#000;
text-shadow:1px 1px 1px #FFF;
-moz-box-shadow: 0px 0px 1px #444;
-webkit-box-shadow: 0px 0px 1px #444;
box-shadow: 0px 0px 1px #444;
zoom:1; /* This enables hasLayout, which is required for older IE browsers */
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=140, Color=#444444);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=140, Color=#444444)";
}

As you can see, the code for IE8 is right there but it doesn't work.

Answers (2)

2011-09-21

Kannan C answers:

Try applying the shadow to li tag instead of anchor

#menu-main-nav li {
-moz-box-shadow: 0px 0px 1px #444;
-webkit-box-shadow: 0px 0px 1px #444;
box-shadow: 0px 0px 1px #444;
zoom:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=140, Color=#444444)";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=140, Color=#444444);
}


---

priktop comments:

Well, I want the whole block to be clickable.

---

Kannan C comments:

why not? just keep your other styles as it is and just move the shadow styles to li. Otherwise try like this

#menu-main-nav li {
float: left;
line-height: 50px;
margin-right: 20px;
border: 1px solid #DDDDDD;
-moz-box-shadow: 0px 0px 1px #444;
-webkit-box-shadow: 0px 0px 1px #444;
box-shadow: 0px 0px 1px #444;
zoom:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=140, Color=#444444)";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=140, Color=#444444);
}

#menu-main-nav li {
background: #F6F6F6;
color: #444444;
line-height: 50px;
display:block;
text-shadow:1px 1px 1px #DDDDDD;
}


---

priktop comments:

Thanks, but I've already got it to work.

---

Kannan C comments:

Great! Good day!

2011-09-21

Pixel Coder answers:

Or if you don't like the creepy -ms-filters you could try..

http://css3pie.com/

---

priktop comments:

Already tried that, but that still doesnt work in IE8

---

Pixel Coder comments:

As you can see from the image attached here, if done correctly CSSPie works in IE8.

It works in IE6, 7, 8 and 9 as described by the author.