fmz 14

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.


3 answers

fmz 14
This was chosen as the best answer

With a little help from our friends at Stack Overflow, that I found out that it is not a border at all but actually the link outline. Why it was behaving that way is not clear, but I was able to resolve it with:

a   { outline: none; }
a:hover, a:active, a:focus   { color: #c6132e; }

This retains the accessibility but gets rid of that nasty unwanted red underline.

Answered over 9 years ago by fmz

You might want to try this:

ul#main_nav li a:active     { border-bottom: 0; }

Or possible this:

ul#main_nav li a:active     { border-bottom: none !important; }
Answered over 9 years ago by Dan Barber
  • Hi Dan. Thanks for the suggestions, but alas, no luck. I tried that and several other options and still no luck. fmz over 9 years ago
Doug 1095

There's a missing comma after a:visited. Is that your problem?

Answered over 9 years ago by Doug
  • Hi Doug, I tried fixing that at it still does not make a difference. Thanks. fmz over 9 years ago