IE 7 adding underline to icon font elements

Question

Hi I have built a site using a font-icon from icomoon as image alternatives. Everything is fine however in ie7 they display with a text-decoration underline.

I have used a class to stop this when used in links which works in all browsers except ie7. I put the icon in as a data icon in the 'a' and the text for links in a span. And class like so..

a.{
text-decoration:none;
}

span{
text-decoration:underline;
}

This is fine in every browser except ie7???

Even in <i> elements it adds a random underline, so again I added a style

i{
text-decoration:none;
}

Still no joy.

Any help would be greatly appreciated.

Answer 1

I don't know exactly what you think the a. selector would do.

I suggest you use a descendant selector:

a i {
    text-decoration: none;
}