Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Strange styling through injected stylesheets in Chrome

We've just purchased a Primeface Theme&Layout Sentinel. However I've noticed a strange styling on tables in Chrome. The Table header and footer has an orange border. My colleagues don't see this and if I change my chrome profile I don't see it either.

The screenshot is from the Sentinel live preview (Documentation page)

The original can be seen here: http://www.primefaces.org/sentinel/documentation.xhtml#j_idt38

I've noticed that Chrome is injecting a stylesheet:

.ui-widget-header {
    border: 1px solid rgb(231, 143, 8);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background: url(http://primefaces.org/sentinel/images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x rgb(246, 168, 40);
    color: rgb(255, 255, 255);
    font-weight: bold;
}

Where is this injected stylesheet coming from? How can I stop it? I know that chrome extensions can inject stylesheets but this stylesheet has a url to primefaces, or is that just a red herring and the extension just modified an existing valid stylesheet?

Update:

.ui-widget-header {
    /* border: 1px solid #3f7506; */
    /* background: #3a8104 url("images/ui-bg_highlight-soft_33_3a8104_1x100.png") 50% 50% repeat-x; */
    color: #ffffff;
    font-weight: bold;
}

This is the normal style sheet (it is being overwritten by some other styles, that's why some part is commented out). This style sheet is present in both profiles. As one can see from the URL, the styles normally use relative URIs but the injected one is using an absolute URI.

like image 253
Ben Avatar asked Sep 24 '15 10:09

Ben


People also ask

What is an injected stylesheet?

Injected stylesheet – these are the codes injected from third-party resources outside the webpage.


2 Answers

Okay I've found the culprit! I've disabled each of my extensions one by one until the page showed correctly. It was the 'CSS Selector Tester'. I think it is a great tool that I often use but it shouldn't screw with my pages when I don't use it!

Interestingly the CSS Selector Tester does not work on the pages where I saw the styling problems. On other pages it works fine.

like image 106
Ben Avatar answered Sep 18 '22 16:09

Ben


I had the same issue with injected stylesheet, hiding social buttons from my website.

It turned out my Adblock plus was blocking Facebook and YouTube social buttons.

like image 23
Daut Avatar answered Sep 19 '22 16:09

Daut