11

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>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
David Bradbury
  • 1,997
  • 3
  • 19
  • 23
  • I think you can only use `filter` once, and if you want more than one effect, use a comma to separate. Not 100% sure though. – Shaz Apr 22 '11 at 19:42
  • 3
    I can't believe I'm booting up [Windows XP Mode](https://www.microsoft.com/windows/virtual-pc/default.aspx) for this... – BoltClock Apr 22 '11 at 19:43
  • I'm only using one filter for IE. I use the comma separated `text-shadow` first, but then there are two fall-backs, one for IE8, and one for IE5.5-7.0, but the IE8 fallback doesn't seem to work without compatibility mode. Edit: Thanks BoltClock, haha – David Bradbury Apr 22 '11 at 19:45
  • 2
    I made this work, but the drop shadow looks so **awful** in IE8 that I'm not going to post it as an answer. Forget about the IE drop shadow, it looks disgusting: http://i.imgur.com/R1rBl.png – thirtydot Apr 22 '11 at 19:51
  • I guess this is why `text-shadow` didn't make it into IE9 either. – BoltClock Apr 22 '11 at 19:54
  • Something I just thought of - I could just use a different background image for my LI containers that had a dimmed middle to help the text pop up more. It's a bit disappointing on Microsoft's part though... as usual. – David Bradbury Apr 22 '11 at 19:56
  • Multiple filter effects don’t need commas: http://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx – Hugh Guiney Dec 05 '13 at 18:33

2 Answers2

11

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 */
}
leymannx
  • 5,138
  • 5
  • 45
  • 48
3

A website must not necessarily look the same in every browser. Plus MS filters are crap. I would recommend to use Modernizer an apply a different solution for IE8.

It will save you from headaches :)

Maverick
  • 1,988
  • 5
  • 24
  • 31
  • I am using Modernizr, but would rather not add non-semantic mark-up if I can avoid it. – David Bradbury Apr 22 '11 at 19:46
  • If anything is non semantic it is MS filters. Modernizer classes are as valid as you can get. – Maverick Apr 22 '11 at 19:49
  • Validity doesn't really matter too much to me. CSS should include all styling and HTML should include all the information. If I need to include an extra filter that isn't a standard, that is fine by me. But adding an extra span tag and duplicating the text seems a bit silly. I should also add that the shadow is a bit important as without it, there is very little contrast between the text and the background. – David Bradbury Apr 22 '11 at 19:53
  • Read the documentation for Modernizer, you don't need to add anything except write a few words in your CSS that will save you from lots of trouble. – Maverick Apr 22 '11 at 19:55
  • 1
    I was talking about doing a manual text-shadow to compensate for browsers that don't support `text-shadow`. I'll probably just use `.no-textshadow` and toss it a different background image. – David Bradbury Apr 22 '11 at 19:58
  • Yup :) That is exactly what i had in mind what I was suggesting to apply a different solution for IE8. Glad you solved it. – Maverick Apr 22 '11 at 20:04
  • I'd like to see an example of modernizr in action. – HPWD Aug 13 '12 at 21:08