I have put together a tab navigation system with CSS.
In Firefox everything works perfectly but in Internet Explorer it appears fine until the links are marked as visited.
Then they keep the color they're supposed to have when they are hovered.
How can I fix this so it looks properly in IE?
This is the HTML part:
<ul id=tabnav>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"1.html" class=active>Page 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"2.html">Page 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"3.html">Page 3</a></li>
</ul>
This is the CSS code:
#tabnav{height: 29px;
margin: 0px;
padding-left: 0px;}
#tabnav li{margin: 0;
padding: 0;
display: inline;
list-style-type: none}
#tabnav a:link,
#tabnav a:visited {
float: left;
-moz-border-radius:9px 9px 0px 0px;
background: #333333;
font-size: 12px;
line-height: 22px;
font-weight: bold;
padding: 2px 13px 2px 13px;
margin-right: 5px;
border: 3px solid #000000;
text-decoration: none;
border-bottom: 0px solid;
color: #999999;
margin-bottom: 0px;}
#tabnav a.active:link,
#tabnav a.active:visited {
background: #0c0c0c;
color: #ffffff;
border-bottom: 0px solid;
margin-bottom:0px;}
#tabnav a.active:hover,
#tabnav a.active:hover:visited {background:#000000; color:#ffffff}
#tabnav a:hover,
#tabnav a:hover:visited {background:#ffffff; color:#000000}This sure doesn't look right.
#tabnav a.active:hover:visited {background:#000000; color:#ffffff}
In Firefox everything works perfectly but in Internet Explorer it appears fine until the links are marked as visited.
Then they keep the color they're supposed to have when they are hovered.
How can I fix this so it looks properly in IE?
This is the HTML part:
<ul id=tabnav>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"1.html" class=active>Page 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"2.html">Page 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"3.html">Page 3</a></li>
</ul>
This is the CSS code:
#tabnav{height: 29px;
margin: 0px;
padding-left: 0px;}
#tabnav li{margin: 0;
padding: 0;
display: inline;
list-style-type: none}
#tabnav a:link,
#tabnav a:visited {
float: left;
-moz-border-radius:9px 9px 0px 0px;
background: #333333;
font-size: 12px;
line-height: 22px;
font-weight: bold;
padding: 2px 13px 2px 13px;
margin-right: 5px;
border: 3px solid #000000;
text-decoration: none;
border-bottom: 0px solid;
color: #999999;
margin-bottom: 0px;}
#tabnav a.active:link,
#tabnav a.active:visited {
background: #0c0c0c;
color: #ffffff;
border-bottom: 0px solid;
margin-bottom:0px;}
#tabnav a.active:hover,
#tabnav a.active:hover:visited {background:#000000; color:#ffffff}
#tabnav a:hover,
#tabnav a:hover:visited {background:#ffffff; color:#000000}This sure doesn't look right.
#tabnav a.active:hover:visited {background:#000000; color:#ffffff}