CSS - Unwanted Border-Bottom

Question

Just doing a little touch up before finishing a conversion project and I have an unwanted border-bottom that needs to be removed.

The base code is:

a:link, a:visited   { color: #000000; text-decoration: none; border-bottom: 1px dotted #c6132e; }

However, I don't want it to show up on all links, particularly the main navigation. When you click on any of the links there it shows up.

On line 56 of the css I placed this code to remove the border-bottom, but it doesn't seem to be working:

ul#main_nav li a:link,
ul#main_nav li a:visited
ul#main_nav li a:hover,
ul#main_nav li a:active     { border-bottom: none; }

Would appreciate a second set of eyes to look this over and help me find the solution.

Thanks!

BTW: here is the link: http://www.rouviere.com/aav/index.html just click on any of the main navigation buttons.

Answer 1

You missed a comma. Should be:

ul#main_nav li a:link,
ul#main_nav li a:visited,
ul#main_nav li a:hover,
ul#main_nav li a:active     { border-bottom: none; }

Your rule is not applying to visited links.

Answer 2

Have you tried using the !important decleration? It may be that your new styles are being overridden somewhere.

ul#main_nav li a:link,
ul#main_nav li a:visited,
ul#main_nav li a:hover,
ul#main_nav li a:active     { border-bottom: none !important; }

Also, as noted by @iamtooamazing, you missed a comma after the visited decleration.

Answer 3

As Timhessel said, it's your focus outline... although this isn't recommended you could add this to get rid of it:

ul#main_nav li a { outline-color: transparent; }