Css Hover Not Working in FireFox
You may have seen this weired problem; css hover for font not working in FireFox. However it works fine in IE.
I will give you an example. Lets say this is my document code:
<!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>
<style type=”text/css”>
.default { font-size: 12px; font-family: Verdana, Arial; color: #656565; }
a.default:link { text-decoration: none; color: #656565; }
a.default:hover { text-decoration: none; color: #017812; }
a.default:active { text-decoration: none; color: #656565; }
a.default:visited { text-decoration: none; color: #656565; }
</style>
</head>
<body>
<div class=”default”>
<a href=”index.html” class=”default”>products</a>
</div>
</body>
</html>
Funny enough this doesn’t work with Firefox.
Solution?
Make sure to put the hover style comes after the active and visited style.
So the refined code that works is:
<!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>
<style type=”text/css”>
.default { font-size: 12px; font-family: Verdana, Arial; color: #656565; }
a.default:link { text-decoration: none; color: #656565; }
a.default:active { text-decoration: none; color: #656565; }
a.default:visited { text-decoration: none; color: #656565; }
a.default:hover { text-decoration: none; color: #017812; }
</style>
</head>
<body>
<div class=”default”>
<a href=”index.html” class=”default”>products</a>
</div>
</body>
</html>
(No Ratings Yet)
Loading ...
Leave your response!