0

I am in ASP.NET, but the problem is completely HTML related. I have this following code:

<asp:Panel runat="server" CssClass="message-box">
    <asp:LinkButton ID="LogoutLinkButton" runat="server">Logout</asp:LinkButton>
</asp:Panel>

The equivalent HTML is:

<div class="message-box">
    <a href="#">Logout</a>
</div>

And the CSS classes are:

a {
    text-decoration: none;
    color: inherit; 
}

.message-box {
    width: 1000px;
    margin: 0 auto;
    text-align: right;  
}

.message-box a:hover {
    text-decoration: underline; 
    text-shadow: 0.1em 0.1em 0.2em black;
}

The demonstration can be found in jsFiddle.

This text-shadow of the anchor text is not working in IE8/ IE9. How can I achieve this?

Thanks.

Tapas Bose
  • 28,796
  • 74
  • 215
  • 331

1 Answers1

3

text-shadow is a css3 property. so you can not user it in IE. But you can user filter:shadow to meet you requirement

lioncin
  • 145
  • 1
  • 1
  • 7
  • Thanks for reply. I have tried to use .message-box a:hover { text-decoration: underline; text-shadow: 0.1em 0.1em 0.2em black; filter: shadow(color=#000000,direction=135,strength=5); -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=5)"; } but it is not working. – Tapas Bose Apr 08 '12 at 09:16
  • 1
    On a side note, the MDN is often a good source for browser compatability, e.g. [text-shadow browser support on mdn](https://developer.mozilla.org/en/CSS/text-shadow#Browser_compatibility) – Jeroen Apr 08 '12 at 09:24
  • @Tapas The element must have _layout_ for the filter to work. – MrWhite Apr 08 '12 at 10:01