Question

I have a horizontal menu list with CSS using the following CSS:

#navigation li {
list-style: none;
display: block;
float: left;
width: 10em;
height: 2em;
text-align: center;
padding: .5em 0 0 0;
margin: 0;
border-left: .0625em solid #FFF;
border-right: .1em solid #CCC;
text-shadow: .0625em .0625em .0625em #ffffff;
filter: dropshadow(color=#ffffff, offx=1, offy=1);

Everything looks great in Safari, Chrome, Opera, and Firefox but IE is causing an issue (surprise!). The text looks blocky and disfigured. My assumption is I’ve done something wrong with text-shadow?

Answer 1

You haven’t done anything wrong. Applying the dropshadow filter in IE turns off the element’s anti-aliasing capabilities. It is a known issue.

Here is a hacky workaround that one person came up with… http://learningtheworld.eu/2010/ms-box-shadow/