Ignore a CSS rule from a stylesheet

Question

I am using Telerik Reporting with an MVC 3 site. I followed this tutorial to set up my report viewer page and have the CSS conflict issue mentioned at the end of the tutorial. They recommend just removing the rules from Site.css so their styles will apply properly.

I don't really like that solution. I want to be free to use the Site.css styles on all my non Telerik report pages and still have Telerik work properly. Is there a way (css or javascript) to remove the offending rules from my stylesheet on the report page only?

What types of rules are you trying to ignore? are they rules on specific elements or classes? there are ways to remove classes from elements so you may not need to remove the CSS rule. On the other hand, if we are talking about CSS rules on specific elements, you might have to change the CSS to the default or make a new class to override the old CSS rules. — aug, Jul 12 '13 at 16:58

score 2 · Accepted Answer · answered Jul 12 '13 at 16:58

2

Put a class on the body of your report page

<body class="report">

And then in your style sheet:

.report .someelement {
     // The styles that fix the problem, e.g.
     position: static;

}

answered Jul 12 '13 at 16:58

Alfo

4,801
9
38
51

Ignore a CSS rule from a stylesheet

1 Answers1