Question

I have a problem where our CSS file is not playing nice with the CSS in a wrapper we’re injecting our content into. I have some rules specified in our CSS file with !important declarations because the wrapper’s CSS is causing the browser to ignore my rules. Unfortunately, this is overriding the styles in the wrapper and I don’t want it to do that. You can see an example of this here:

http://fundcentre.newireland.ie/Results.aspx (our content is ‘FUND SEARCH’ & below)

The !important declaration in some of my CSS rules is causing the links in the navigation bar on the left to change size when you hover the mouse over them. If I remove the !important declarations however, the links in the table & the clipboard start to misbehave, in that they start changing size when you hoverover. (to see the clipboard in action, check a few of the boxes in the table & click “Check Your Selection”)

I know our CSS isn’t the best, but could someone suggest how I could go about getting both to work together? Thanks.

I also tried prefixing all my rules with “.content ” because all of our content exists inside a div with the class “content” but that had no effect.

Answer 1

In NewIreland.css, line 316, you define:

.displaycontent a:link, a:hover, a:visited, a:active {
    /*...*/
    font-size:11px !important;
    /*...*/
}

… which sets style for links inside .displayContent, any hovered link, any visited link and any active link.

It seems that you mean:

.displaycontent a:link, .displaycontent a:hover, .displaycontent a:visited, .displaycontent a:active {
    /*...*/
    font-size:11px !important;
    /*...*/
}

Or, on a better format:

.displaycontent a:link,
.displaycontent a:hover,
.displaycontent a:visited,
.displaycontent a:active {
    /*...*/
    font-size:11px !important;
    /*...*/
}