Alright, so I'm trying to implement text-shadow
across various browsers. I have IE6, IE7, FF, Chrome, and Opera all working... but IE8 wont' show any shadows unless it is in 'Compatibility View'.
I've looked at a number of 'solutions' via search / Google, but the shadow is still only appearing in 'Compatibility View'.
Any ideas on how to get it to show up without having to change modes?
Note: Using HTML5 Boilerplate and Modernizr.
edit: Added that I'm using Modernizr, and I clicked the wrong button in my tester. This isn't working in IE9 either, but I don't think it is related.
CSS:
#links li a {
font-size: 24px;
text-shadow: 0 3px 3px #102530, 0 3px 3px #102530;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530');
filter:DropShadow(Color=#102530, OffX=0, OffY=3);
zoom: 1;
}
HTML
<ul id="links">
<li><a href="#"/>Text</a></li>
</ul>
I tried Modernizer (also with heygrady's polyfill). I tried cssSandpaper. I tried CSS3PIE. But none of them displayed me a text-shadow in Internet Explorer 8 (CSS3PIE doesn't feature text-shadow
). I also tried the double-markup method. But that really can't be it.
And then I found Whykiki's blog post and simply added filter: dropshadow(color=#000000, offx=2, offy=2);
in combination with display: block;
. And that's it. Some of you might try zoom: 1;
instead of display: block;
to activate it. filter: glow(color=#000000,strength=2);
works, too. As you will see, the MS dropshadow doesn't come with blur. I can live with that.
h1 {
color: #fce934;
text-shadow: 2px 2px 2px #000000;
-moz-text-shadow: 2px 2px 2px #000000;
-webkit-text-shadow: 2px 2px 2px #000000;
filter: dropshadow(color=#000000, offx=2, offy=2);
display: block; /* that's the important part */
}