Question

At http://www.test.webitry.net is a a main site navigation and header that I have installed onto a blog script so as to integrate it with the main site. The main site navigation is being snagged by a white line passing through the links and it is is also impacting on the rollover. See image attached.

What could be causing this clash?

Answer 1

You have a break tag (<br style=”clear:both” />) inside the ordered list tag (<ol>) that’s malformed HTML and should not be done. The only tags which should be inside an <ol> tags are <li> tags.

Try removing the border-bottom here as well…

.nav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
padding: 0;        /* <----- you can also remove this line since it's a duplicate */
background-color: #3b3b44;
border-top: 1px solid #ccf;
border-bottom: 1px solid #ccf;  /* <---- remove this line    */
}

If you don’t want the white line, it shouldn’t be in the CSS.

In addition, you have all links styled with a border on the bottom, you may need to specifically set that attribute for the navigation links so the general anchor properties are not “picked up”.

.nav li a {
display: block;
padding: 2px 20px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff; 
border-right: 1px solid #ccf; 
border-bottom: none;  /* <------------ add this line */
}