Unwanted underlining on links in IE8

Question

I am working on a site where a number of links on the home page are styled:

text-decoration:none;

This works fine in all browsers, except IE8. Please look at the home page in Firefox or Safari first then look at it in IE8 and you'll see what I mean. IE is usually more in synch thank IE7 but in this case IE7 works fine. Any clues why this is happening?

Thanks.

Answer 1

Interesting detail: it only get underlined when you mouseover the container element. It "works" when the mouse is somewhere else outside the page. Thus, you're forgotten an </a> somewhere. Look here at line 361 (scroll about 3/4 down). Fix the other problems as well ;)

Answer 2

Have you checked the Trace Styles in the IE8 developer tools?

For instance, in the See All Events link, the text-decoration has the following inheritance.

text-decoration - underline
    A - underline    dghi.css
    A - underline    dghi_ie8.css
    A - underline    dghi_print.css
    A.link - underline    dghi.css
    A.link - underline    dghi_ie8.css
    A.link - underline    dghi_print.css
    A.readmore - underline    dghi.css
    A.readmore - underline    dghi_ie8.css
    A.readmore - underline    dghi_print.css
    #kickers A - none    dghi.css
    #kickers A - none    dghi_ie8.css
    #kickers A - none    dghi_print.css
    #kickers A.readmore - underline    dghi.css
    #kickers A.readmore - underline    dghi_ie8.css
    #kickers A.readmore - underline    dghi_print.css

Answer 3

IE 8 underlining issue ,

here is how to solve the probleme you have to use the selectors a,a:link like so ;

a,a:link,a:focus { text-decoration: none; }