Please look at the simple XHTML/CSS document below. When I click on the link in the <content> div the text of the link "disappears" because it takes on the value of the <sidebar> div a:visited css, which says the color should be #FFF or white (white on white disappears). What's extremely weird is that a:link works properly, taking its value from <content> a:link css (text-decoration: underline), not from <sidebar> a:link (tex-decoration: none). So why doesn't the a:visited work properly and apply color #036? Any help much appreciated. I'm really stumped on this one. . . I'm using IE7 browser, by the way. . .
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body{margin:0;padding
:0; font-family: Arial, Helvetica, sans-serif; color: #CC0033; background-color:#FEFEF3; font-size: 12px;}
div#container{width:950px;
margin:0 auto; position: relative}
div#content{float:right;wi
dth:760px;
}
div#sidebar{float:left;wid
th:160px;}
div#container{border: 1px solid #999999;background-color:#
FFF; margin-top: 5px;}
div#content a:link, a:visited {
color:#036;
text-decoration:underline;
}
div#sidebar ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
div#sidebar li
{
display: block;
padding: 5px 0px 5px 5px;
width: 155px;
background-color: #69c;
border-bottom: #f7fbfa 1px solid;
}
div#sidebar a:link, a:visited
{
color:#FFF;
text-decoration:none;
}
div#sidebar a:hover
{color:#F60;}
</style>
<script type="text/javascript" src="scripts/global.js"></
script>
</head>
<body>
<div id="container">
<div id="content">This is the link: <br />
<a href="
http://www.adobe.com">A regular hyperlink</a>
</div>
<div id="sidebar">
<ul>
<li><a href="description.html"><s
trong>Desc
ription</s
trong></a>
</li>
<li><a href="changed.html"><stron
g>What's Changed</strong></a></li>
<li><a href="benefits.html"><stro
ng>Benefit
s</strong>
</a></li>
<li><a href="tryit.html"><strong>
Try It</strong></a></li>
<li><a href="references.html"><st
rong>Refer
ences</str
ong></a></
li>
</ul>
</div>
</div>
</body>
</html>
Start Free Trial
