CODEWITHSUNDEEP
css
Zrb0529
Zrb0529

Reputation: 800

Ugly text in IE

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?

Upvotes: 0

Views: 280

Answers (3)

TimHayes
TimHayes

Reputation: 3724

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/

Upvotes: 1

LorDex
LorDex

Reputation: 2636

filter:DropShadow(Color=#ffffff, OffX=1, OffY=1)

Moreover, when you applying text shadow, you must style background color as well, because without background color, shadow will look ugly

Upvotes: 1

Teena Thomas
Teena Thomas

Reputation: 5239

i think dropshadow css needs to be like filter:DropShadow(Color=#ffffff, OffX=1, OffY=1)

Upvotes: 0

Related Questions