Have following code not acting appropriately (new to css and actively studying and learning) - Could somebody diagnose why visited link on left hand navigation bar is now staying white??
Specificity doesn't carry between selectors separated by commas. In other words, rather than doing something like #topnav li a:link,a:visited, you'll need to use #topnav li a:link,#topnav li a:visited
code as follows:
#mainconatiner {
background-color: white;
color: black;
width: 100%;
height: 640px;
position: relative;
}
#topmainheader {
background-color: white;
color: black;
font-family: verdana, sans-serif;
width: 100%;
height: 120px;
position: absolute;
top:0px;
}
#labelcontainer {
background-color: white;
color: #364355;
width: 100%;
height: 30px;
position: absolute;
top:120px;
}
#toplabel {
background-color: white;
border: 1px solid black;
color: #364355;
margin: auto;
padding: 5px;
font-family: verdana, sans-serif;
font-size:16px;
font-weight:bold;
}
#topnav {
background-color: #364355;
color: white;
font-family: verdana, sans-serif;
font-size:12px;
font-weight:bold;
width: 100%;
height: 40px;
position: absolute;
top:150px;
}
#topnav ul {
margin:0px;
padding:0px;
list-style-type:none;
margin-left:130px;
}
#topnav ul li {
display:inline;
height:30px;
float:left;
}
#topnav li a:link,a:visited {
display:block;
font-weight:bold;
color: white;
background-color:#364355;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
#topnav li a:hover,a:active {
background-color:#7E2217;
}
#leftcolumn {
background-color: #364355;
color: white;
font-family: verdana, sans-serif;
font-size:12px;
font-weight:bold;
width: 120px;
margin-bottom: 10px;
position: absolute;
top:190px;
left:0px;
}
#leftcolumn ul {
list-style-type:none;
margin:0;
padding:0;
}
#leftcolumn a:link,a:visited {
display:block;
font-weight:bold;
color: white;
background-color:#364355;
padding-top: 10px;
padding-bottom: 10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
#leftcolumn a:hover,a:active {
background-color:#7E2217;
}
#rightcolumn {
background-color: white;
color: black;
font-family: verdana, sans-serif;
font-size:12px;
text-align:justify;
margins: auto;
position: absolute;
top:190px;
left:125px;
right:10px;
}
#rightcolumn a:link,a:visited {
font-weight:bold;
color: black;
background-color: white;
padding-top: 10px;
padding-bottom: 10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
#rightcolumn a:hover {
font-weight:bold;
color: #364355;
background-color: white;
padding-top: 10px;
padding-bottom: 10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
#bottomcr {
background-color: #364355;
color: white;
font-family: verdana, sans-serif;
font-size:9px;
width: 100%;
height: 40px;
position: absolute;
top:600px;
left: 0px;
}
That is stylesheet in its entire fashion (besides comments at top)
Thanks in advance