Hi all please forgive me but i am very new to web design and would like some help with my CSS.
My problem is with my background color in my visited links. All is well in ie but when i load into firefox or google chrome my background color doesn’t appear.
Here is my HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link href="style.css"rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">This is the header
<div id="horizlinks">
<ul>
<li><a href="http://www.ebay.co.uk">Link 1</a></li>
<li><a href="http://www.google.co.uk">Link 2</a></li>
<li><a href="http://www.google.co.uk">Link 3</a></li>
<li><a href="http://www.google.co.uk">Link 4</a></li>
</ul>
</div>
</div>
<div id="leftnav">This is the left Nav</div>
<div id="rightnav">This is the right Nav</div>
<div id="body">This is the body</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
And here is my CSS
#container {
width:1000px;
margin:0 auto;
}
#header {
position:relative;
width:1000px;
height:100px;
background-color:yellow;
border-bottom: 1px solid #000000;
}
#leftnav {
width:150px;
height:500px;
float:left;
margin-top:5px;
background-color:gray;
border-right: 1px dotted #000000;
}
#rightnav {
width:150px;
height:500px;
float:right;
margin:5px 0;
background-color:gray;
border-left: 1px dotted #000000;
}
#body {
width: 700px;
height:500px;
margin-top: 5px;
margin-left:150px;
}
#footer {
clear:both;
width:1000px;
height:50px;
background-color:yellow;
}
#horizlinks ul {
margin:0;
position:absolute; left:250px; top:80px;
}
#horizlinks li {
margin: 0 50px 0 0;
list-style-type:none;
display:inline;
}
#horizlinks a {
color:black;
padding-top:5px;
padding-right: 10px;
padding-left: 10px;
text-decoration:none;
font-style:verdana;
font-weight:bold;
font-size:14px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
#horizlinks a:visited {
color:purple;
text-decoration:underline;
background-color:blue;
}
#horizlinks a:hover {
background-color:gray;
color:white;
}
I would be very grateful for someones help with this and also to let me know if i can improve my code in any way.
Many thanks in advance.
