Top border not working in chrome

**foshan** · Oct 26, 2012 11:40

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

Code HTML4Strict:

<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

Code 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;
 
 
}

**foshan** · Oct 26, 2012 11:44

Edit:

I copied the correct code in your first post, and added the appropriate code tags.

guido2004 - Community Team Advisor

**ralph.m** · Oct 26, 2012 19:42

Originally Posted by foshan

My #horiznav top border is not working in chrome.

It's working fine for me in Chrome. What are you seeing? Just no line at all, or ...?

**foshan** · Oct 27, 2012 02:18

Originally Posted by ralph.m

It's working fine for me in Chrome. What are you seeing? Just no line at all, or ...?

Its working but what i'm seeing is that it is broken where my #horizlinks are.

**ralph.m** · Oct 27, 2012 02:22

Originally Posted by foshan

Its working but what i'm seeing is that it is broken where my #horizlinks are.

OK, important detail.

The problem is not the border, but that the links are overlapping the border. You could reduce the padding on them, or preferably, just get rid of the unnecessary background color. So eliminate the line in red:

Code:

#navlinks li a {
padding: 7px 19px 6px;
background: gray;
color: white;
text-decoration: none;
font-size: 14px;
font-weight: bold;
}

**foshan** · Oct 27, 2012 03:18

Thanks Ralph. Worked a treat i reduced the padding and all is ok. I'm learning all the time with help from this site. Thanks again.

Originally Posted by ralph.m

OK, important detail.

The problem is not the border, but that the links are overlapping the border. You could reduce the padding on them, or preferably, just get rid of the unnecessary background color. So eliminate the line in red:

Code:

#navlinks li a {
padding: 7px 19px 6px;
background: gray;
color: white;
text-decoration: none;
font-size: 14px;
font-weight: bold;
}

**ralph.m** · Oct 27, 2012 03:26

Cool, glad to help. Don't hesitate to ask more questions.

User Tag List

Thread: Top border not working in chrome

Thread Tools

Display

Top border not working in chrome

Bookmarks

Bookmarks

Posting Permissions