Fix overlapping CSS

Question

I started to use Miniprofiler in my site but encountered rendering issues in its popup. The problem is that my site's CSS are "too global", for example:

thead th:last-child {
    background: url("img/rb.gif") no-repeat scroll right 0 transparent !important;
    height: 42px;
}

and that conflicts with MiniProfiler's styles and its popup looks like hell (specifically its tables do not need background images, etc.). I tried to narrow down my CSS scopes but the site is huge and that brings more issues (I'm not a designer). However, I can modify MiniProfiler's source code/styles and rebuild it. What I need is that elements in container with profiler-results class ignore all "global" styles. What would be my best options?

if this is an issue it should probably be reported as a bug with a repro so we can fix our css up. https://github.com/SamSaffron/MiniProfiler/issues?direction=desc&sort=created&state=open — Sam Saffron, Dec 31 '12 at 02:29

score 1 · Answer 1 · answered Dec 29 '12 at 02:11

1

Maybe you can try CSS Scoped, it's an HTML5 features. You can try to find a workaround using this feature since you said that your site so big. And just want to apply a css rule on a particular division on your site.

Scoped CSS

answered Dec 29 '12 at 02:11

Durty

457
1
7
14

Almost what I need, thanks! Unfortunately it looks like `scoped` attribute can only be specified for embedded styles, not in CSS files or `link` element. – UserControl Dec 30 '12 at 04:07

Fix overlapping CSS

1 Answers1