How to get 2 CSS files to work together? - Problem with !important overriding rules

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

<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />

if two stylesheets have same element declaration it will take from the the one which include later.

i.e. if in stylesheet.css

a{
  color:red;
}

and in lightbox_new.css

a{
  color:blue;
}

Then in following code color of link "Check Color" will be blue.

<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
<a href="http://www.google.co.in"&gt;Check Color</a>

Answer 2

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;
    /*...*/
}