5

I am building a website and I am using the text-shadow function, however it doesnt work for IE.

Graphic:

2

text-shadow: 0.1em 0.1em 0.2em black;

Is there any solution or hack to over come this, or something that mimics the text-shadow function for IE.

Spudley
  • 166,037
  • 39
  • 233
  • 307
David Garcia
  • 3,056
  • 18
  • 55
  • 90

4 Answers4

5

For some versions of IE, Dropshadow filter may do what you need:

http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx

Osvaldo
  • 270
  • 1
  • 11
2

I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn't involve extra mark-up, js and works in IE7-9 (I haven't tested 6), and doesn't cause aliasing problems.

This is a combination of using CSS3 text-shadow, which has good support except IE, then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.

IE Filters:

The glow filter looks terrible, so I didn't use that.

David Hewitt's answer involved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.

I then combined some of the elements suggested on useragentman with the dropshadow filters.

Putting it together

This example would be black text with a white stroke. I'm using conditional HTML classes by the way to target IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}
Community
  • 1
  • 1
crdunst
  • 1,034
  • 9
  • 16
  • Nice, though you can use Glow with Chroma and it looks not too bad - [see my answer to a similar question](http://stackoverflow.com/a/13925485/568458). Might be better than 4 shadows. What is the role of the `XImageTransform.Microsoft.Alpha(opacity=100)` here? – user56reinstatemonica8 Dec 18 '12 at 02:50
  • Hi, take a look at the useragentman link above, it explains a bit more about the IE filters. IE filters aren't my strong point so it took some playing around with them, but the above works for me across IE versions. If the filters can be improved, it would be great to hear back. Cheers – crdunst Jan 18 '13 at 14:19
0

The IE filter class also puts a shadow on any background images you have. For instance, I have an H1 tag that has a line as part of the background, when I put the IE text shadow filter on, the line in the background inherits that shadow.

Anthony Duncan
  • 13
  • 2
0

I've been looking and investigating this issue also for some time now and would like to share a maybe contradictory finding while testing my site on IE10.

I have this html structure :

<p>Meer info op onze <a class="links" target="_self" href="/leden">ledenpagina</a></p>

combined with CSS :

p { display: inline-table;
    color: #FFF;
    text-shadow: 0px 1px 2px #111, 0px 1px 0px #111;
    margin: 0px 20px; }

a.links {
    text-decoration: underline;
    color: #FFFF60;
    font-size: 1.1em; }

If i look at the outcome of this in IE10, the achor text "ledenpagina" does receive the text-shadow style as defined in the parent (p tag). The assumption this could have anything to do with a combined text-decoration:underline selector was false (tested by applying text-decoration also on the p tag)

Result can be witnessed here : http://tczelem.be (slide down the header slider tab)

So the text-decoration selector does seem to have some effect in IE10.

![enter image description here][2]

rawdesk.be
  • 65
  • 3