Why is my CSS overriding the CSS in the Wrapper?

I'm trying to figure out why the text in the left navigation panel on the following page is shrinking & underlining when you mouseover in Firefox.

http://fundcentre.newireland.ie/

Everything on the left & top is part of a wrapper that we inject our content into. Our content is everything from "FUND CENTRE" down.

Can someone suggest something I could do to sort this issue ou开发者_如何学Ct? Thanks.

Stick .content in front of all your CSS rules.

So a:hover { ... } becomes .content a:hover {...}

This will limit any damage to the content div which appears to be all yours.

There are a couple of styles applied in your newIreland.css files. Which are causing this behaviour.

.ClipboardLink a:link, a:hover, a:visited, a:active {

font-family:Arial,Verdana,Helvetica,Sans-Serif;

font-size:12px !important;

padding-bottom:2px;

text-decoration:underline !important;

// check this line making css important causes it to be underline when you hover over

}

Text on the menu with mouse hover louses "bold" and gets "underline", this because you have :hover behaviors assigned with does properties...

I've took a sneak-peak to your css, but it's way to dense for my time right now... and to repetitive as well!

Try simplifying your css with common class's and find all your :hover events, taking a closer look to does who work on the same html elements as the one's used for the menu...

better yet, assign to the menu id or class an :hover event with the same properties than does used for the menu in normal state!!