Search code examples
htmlcssfirefoxhoverunderline

Mouse hover not working in only firefox

I have tried and isolated the problem below after spending hours on this. First link is not underlined on hover in FF but works in all the other browsers I have tried. The second link properly works in Firefox too. Most of the existing html on the site is structured in the below way so a site wide fix will be appreciated.

HTML: (pasting as code here removes tags) http://pastebin.com/duqfKGeY

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
FF test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="ff.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <table>
        <tbody>
    <tr>
            <td>

        <ul type="disc">

                    <li>
            <a target="_blank" href="http://example1.com">
                <font size="2" color="#b80000"><b>Example Link 1</b></font></a>

                        <br>

            <font size="2" face="Verdana"> 

                example text  example text  example text  example text  example text  example text                  example text  example text  example text  example text  example text  example text                   example text  example text  example text  example text             example text 
                <a target="_blank" href="http://example2.com/">
                 <font size="2" face="Verdana" color="#b80000">Example link 2</font>
                </a>

                  example text  example text  example text  example text  example text  example text                    example text  example text  example text  example text  example text  example text  example text                example text  example text  example                 text  example text .
            </font> 
         </li>

        </ul>
        </td>
        </tr>
    </tbody>
</table>
</body>
</html>

CSS:

a{color:#b80000;}
a:link{color:#b80000;text-decoration:none;}
a:visited{color:#b80000;text-decoration:none;}
a:hover{color:#b80000;text-decoration:underline;}
a:active{color:#b80000;}

Edit: Validates without any errors on W3C Validator

Solution

  • The <B> tag is overriding the text-decoration. Just add this:

    a:hover b{text-decoration:underline;}

    If there are others you could probably even do:

    a:hover > *{text-decoration:underline;}