I'm having trouble making the links' hover color white. Any suggestions
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible.</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
<meta name="keywords" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<style media="screen" type="text/css">
/* <!-- */
/* General styles */
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
}
a {
color:white;
text-decoration:none;
}
a:hover {
color:white;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
clear:both;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
#ads {
width:100%;
padding:20px 0;
}
#ads #mjt {
float:left;
margin-bottom:20px;
}
#ads .adhere {
margin:0 10px 10px 0;
}
#ads img {
display:block;
margin:0;
}
/* download link */
.download {
clear:both;
float:left;
padding-top:10px;
}
.download a {
padding:.3em .5em !important;
margin-right:10px;
background:#00bd3e;
text-decoration:none;
color:#fff;
font-weight:bold;
font-size:1.5em;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
border-radius:.3em;
line-height:2.5em;
-moz-box-shadow: 1px 1px 2px #888;
-webkit-box-shadow: 1px 1px 2px #888;
box-shadow: 1px 1px 2px #888;
}
.download a:hover {
background:#5f534f;
text-shadow: 2px 2px 2px #000;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
#bookmarks{
font-size:50px;
font-family:impact;
color:black;
text-decoration:none;
}
#share{
font-size:50px;
color:black;
text-decoration:none;
font-family:impact;
}
#bookmarks a:hover{
color:white;
}
#bookmarks a:visited{color:black;text-decoration:none;}
#bookmarks a:link{color:black;
text-decoration:none;}
#share a:hover{color:white; text-decoration:none;}
#share a:visited{color:black;text-decoration:none;}
#share a:link{color:black;
text-decoration:none;}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
}
.col2{font-size:20px;}
.col1,
.col2,
.col3 {
float:left;
position:relative;
text-align:center;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background:#eee; /* right column background colour */
}
.threecol .colmid {
right:25%; /* width of the right column */
background:#fff; /* center column background colour */
}
.threecol .colleft {
right:50%; /* width of the middle column */
background:#f4f4f4; /* left column background colour */
}
.threecol .col1 {
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
/* --> */
</style>
</head>
<body>
<!-- BuySellAds.com Ad Code -->
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = '//s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<!-- END BuySellAds.com Ad Code -->
<div id="header">
<h1> </h1></div><div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<p> </p>
<!-- Column 1 end -->
</div>
<div class="col2">
<!-- Column 2 start -->
<div id="bookmarks"> <a href=""> BOOKMARKS</a></div>
<div id="share"><a href="">SHARE</a></div>
<p> </p>
<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->
<div id="ads">
<!-- BuySellAds.com Zone Code --></div>
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
<div id="footer">
<p> </p>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1848067-8";
urchinTracker();
</script>
</body>
</html>
Before you post, read our: 
