One div mimicing another - don't know why

HTML & CSS
1

I am starting a re-design of a website based on the client’s mock-up they have provided. It’s going to be a very simple design. But, evidently, simple can be the most aggravating! LOL

Here is the CSS: http://www.benefitsus.com/sitestyle.css
Here is the page: http://www.benefitsus.com/index-build.php

I have no idea why the #top-nav div is wanting to mimic the #left-nav div.
The #top-nav div has a different background image (a long bar that I still need to resize) and no <li>. The 3 links for that div will be straight across, using a | as a divider. This you can see in the HTML.

What am I missing that, surely must be plainly obvious, would be causing the #top-nav to mimic the #left-nav?

2

Instead of

#left-nav ul li a, a:visited, a:hover {
background: #FFFFFF url('/pix/nav-btn.png') no-repeat center top;
height: 50px;
text-decoration: none;
display: block;
padding: 16px 4px 0px 50px;
color: #000000;
}

you should use


#left-nav ul li a, #left-nav ul li a:visited, #left-nav ul li a:hover {
background: #FFFFFF url('/pix/nav-btn.png') no-repeat center top;
height: 50px;
text-decoration: none;
display: block;
padding: 16px 4px 0px 50px;
color: #000000;
}

you can remove the “ul li” part btw since you don’t really need it (there are no links that are not in an li, and there are no li’s that are not in an ul)


#left-nav a, #left-nav a:visited, #left-nav a:hover {
background: #FFFFFF url('/pix/nav-btn.png') no-repeat center top;
height: 50px;
text-decoration: none;
display: block;
padding: 16px 4px 0px 50px;
color: #000000;
}
3

Thank you so much - that solved the problem :smiley:
I knew it had to be something obvious.
Hopefully, that will be my only issue with this site (fingers and toes crossed).
Now to go fix the background bar in the #top-nav.