Beginner advice please. My #horiznav top border is not working in chrome. Firefox and ie are fine. Does anyone know of a fix for this or if i have a coding error.
Here is my code
HTML
<html>
<head>
<title>CSS Practice</title>
<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"> Header 1 </a></li>
<li><a href="http://www.tesco.co.uk"> Header 2 </a></li>
<li><a href="http://www.screwfix.co.uk"> Header 3 </a></li>
<li><a href="http://www.google.co.uk"> Header 4 </a></li>
</ul>
</div>
</div>
<div id="horiznav">
<div id="navlinks">
<ul>
<li><a href="http://www.amazon.co.uk">Nav Link 1</a></li>
<li><a href="http://www.argos.co.uk">Nav Link 2</a></li>
<li><a href="http://www.facebook.co.uk">Nav Link 3</a></li>
<li><a href="http://www.clymac.co.uk">Nav 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>
CSS
html,body, h1,h2,h3,h4,h5,h6,p,div,ul,li,a {
margin:0;
padding:0;
border:none;
}
#container {
width:1000px;
margin: auto;
}
#header {
position:relative;
width:1000px;
height:100px;
background-color:yellow;
}
#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; top:78px;left:230px;
}
#horizlinks li {
margin: 0px 40px 0px 0px;
list-style-type:none;
display:inline;
}
#horizlinks a {
background:red;
color:black;
padding:7px 24px 6px;
text-decoration:none;
font-weight:bold;
font-size:14px;
border-radius:5px
}
#horizlinks a:visited {
colorurple;
text-decoration:underline;
background-color:blue;
}
#horizlinks a:hover {
background-color:gray;
color:white;
}
#horiznav {
width:1000px;
height:30px;
position:relative;
background:gray;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#navlinks {
position:absolute; top:5px;left:230px;
}
#navlinks ul {
margin: auto;
}
#navlinks li {
margin:0px 36px 0px 0px;
list-style-type:none;
display:inline;
}
#navlinks li a {
padding:7px 19px 6px;
background:gray;
color:white;
text-decoration:none;
font-size:14px;
font-weight:bold;
}
#navlinks a:visited {
colorurple;
}
#navlinks a:hover {
color:black;
}
