Mouseover links in Firefox vs IE

My sample page, http://www.collegeessaybootcamp.com/essay.html

displays exactly how I want it in Firefox, but in IE, when I mouse off the "over the lazy dogs" link, it stays red. How do I get it to behave like it does in Firefox?

My code follows:
.class1 a {COLOR:black; background:#FFFFCC; text-decoration: none}
.class1 a:visited {COLOR:black; background:#FFFFCC; text-decoration: none}
.class1 a:hover       {COLOR:black; background:#FFFF66; TEXT-DECORATION: none; font-weight:bold}

.class2 a {COLOR:black; text-decoration: none}
.class2 a:visited {COLOR:black;text-decoration: none}
.class2 a:hover {COLOR:black; background:white TEXT-DECORATION: none;}
phitaAsked:
Who is Participating?
 
RoonaanCommented:
phita,

Possibly you have interfering css or javascript coding. When I create a document containing only the lines below, both Firefox and Internet Explorer behave as intended:

Code:
<style type="text/css">
.class1 a {COLOR:black; background:#FFFFCC; text-decoration: none}
.class1 a:visited {COLOR:black; background:#FFFFCC; text-decoration: none}
.class1 a:hover      {COLOR:black; background:#FFFF66; TEXT-DECORATION: none; font-weight:bold}

.class2 a {COLOR:black; text-decoration: none}
.class2 a:visited {COLOR:black;text-decoration: none}
.class2 a:hover {COLOR:black; background:white TEXT-DECORATION: none;}
</style>

<div class="class1">
<a href="#">test</a>
</div>

<div class="class2">
<a href="#">test</a>
</div>

Kind regards

-r-
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.