CSS global link background problem

Being my first project with CSS I'm a little confused on how to make the green background from the navbar buttons not continue onto the built-in buttons in the code viewer(SyntaxHighter) I'm using. If you view the website below and mouse over the code box, buttons appear for copying and printing, but they have a green background too. That is from the CSS I'm using to format my navbar, is there an easy fix to make the CSS file for the navbar just affect the navbar and not the code snippet styling section?

http://dl.dropbox.com/u/3209672/website/main.html

ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;开发者_如何学运维
}
a:hover,a:active
{
background-color:#7A991A;
}

Yes, apply a class (or an id) to the navbar list and move the color/background-color declarations to the css for that particular element.

<ul class="colorThisListOnly">

<!-- other stuff -->

</ul>

with the css:

ul.colorThisListOnly
{
color: #fff;
background-color: #98bf21;
}

What's causing the 'bleed' is that you're targeting the a (links) for styling, rather than the list itself. And as you use a tags in more than one place, they're all targeted by the same selector and thus styled the same.

You can, of course, still address the a tags if you'd rather, but select them based on their parent:

ul.colorThisListOnly > li > a:link,
ul.colorThisListOnly > li > a:visited
{
color: #fff;
background-color: #98bf21;
}

You need to override your catch all styles with something more specific like the following:

.toolbar a:link, .toolbar a:visited {background-color: #000;}
.toolbar a:hover, .toolbar a:active {background-color: #000;}