Overwrite/disable user stylesheet in chrome

Question

On chrome (Version 39.0.2171.71 m) I have an issue with all (bootstrap-based) modals.

I've found the problem, but need help fixing it:

The hide class of the modal is being overridden by the user stylesheet:

/* user stylesheet */ 
.hide {                               
  position: absolute;
  top: -9999px;
  left: -9999px;
}

How do I prevent this from happening?

(If, for example, I go to strato.nl, and click on the play button (in the middle of the page) for the commercial, I do see the backdrop, but the modal itself doesn't show.)

Edit

Let me clarify: I am not building a website, I just have trouble with viewing some sites where they have a hide class.

Like in a bootstrap modal with class="modal hide fade in", here it should display the modal (because it is faded in), but chrome's user stylesheet actually overwrites the CSS of bootstrap's hide class.

http://stackoverflow.com/questions/14046738/how-to-disable-css-in-browser-for-testing-purposes ? — jbutler483, Dec 03 '14 at 13:59
I think he search a method to make it programatically... I don't think it exist. :S — MartaGom, Dec 03 '14 at 14:01
@jbutler483 I do not wish to disable _all_ CSS, I just want to prevent chrome from overwriting the _hide_ class from the _user stylesheet_ — Sanjii, Dec 03 '14 at 15:45
@Sanjii, I would recommend reading [this previous answer](http://stackoverflow.com/a/4873902/3436942) — jbutler483, Dec 03 '14 at 15:49

score 0 · Answer 1 · edited Dec 03 '14 at 15:47

0

In the post that jbutler483 showed you, you have this code:

var el=document.getElementsByTagName('*');
for(var i=0;i<el.length; i++){
      if(el[i].getAttribute("type")=="text/css")
             el[i].parentNode.removeChild(el[i]);
};

Try it, maybe works.

edited Dec 03 '14 at 15:47

jbutler483

24,074
9
92
145

answered Dec 03 '14 at 14:04

MartaGom

501
6
27

This removes all CSS from the page and I want to prevent the _user stylesheet_ from overwriting the _hide_ class – Sanjii Dec 03 '14 at 15:49

score 0 · Answer 2 · answered Dec 03 '14 at 15:53

0

There are two methods to over-riding a subsequent stylesheet.

The first is the beloved !important:

/* your stylesheet */ 
.hide {                               
  position: initial !important;
  top: auto !important;
  left: auto !important;
  /* your other styles here*/
}

The alternative is to make your selector more specific than theirs:

/* your stylesheet */
div.hide {
  position: initial;
  top: auto;
  left: auto;
}

answered Dec 03 '14 at 15:53

Richard Parnaby-King

14,703
11
69
129

I would like to point out the `!important` tag should only be used **when it must**, not all the time. – jbutler483 Dec 03 '14 at 15:54
I absolutely agree. I prefer the second method. Even if I only have to prefix the selector with `body` (e.g. `body .hide {`) – Richard Parnaby-King Dec 03 '14 at 15:56
I actually use this method to be able to see the modal if I have to (temporarily adding '!important' manually), but I'm looking for a permament solution. – Sanjii Dec 03 '14 at 16:01

score 0 · Answer 3 · answered Dec 03 '14 at 16:07

From your clarification:

Open your developer settings (right click) -> inspect element
Go down the right hand side (presumably that's where you saw the css)
Un-check the css you don't want to display

For more information, see here

To permanently remove a full element, read this article

score 0 · Accepted Answer · answered Dec 03 '14 at 16:27

After looking around alot, I found out that the issue is an extension which defined:

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

By editing the stylesheet of that extension (or removing the extension completely) this issue is fixed.

So basically I dislike the way how chrome displays this in de styles-sidebar of the developer tools, it showed it as user stylesheet instead of pointing to the stylesheet of the extension.

Thanks for the answers anyhow.

Overwrite/disable user stylesheet in chrome

4 Answers4

Linked