Strange styling through injected stylesheets in Chrome












7















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.










share|improve this question

























  • You collegues do not have this 'injected' stylesheet? (whatever injection may be, looks like a normal PF stylesheet) And check your zoomlevel...

    – Kukeltje
    Sep 24 '15 at 11:08











  • No my colleagues don't see this and if I switch my Chrome profile I don't see it either. Zoom level is 100%. When I inspect the component in the other profile I don't have the injected stylesheet. The normal ui-widget-header of the primefaces theme looks completely different (it is there in both cases but is overwritten in the one). Another strange thing is that the url in the injected stylesheet is using an absolute URI while all other styles normally use relative URIs.

    – Ben
    Sep 24 '15 at 15:17











  • Did you try clearing the cache?

    – Kukeltje
    Sep 24 '15 at 15:46
















7















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.










share|improve this question

























  • You collegues do not have this 'injected' stylesheet? (whatever injection may be, looks like a normal PF stylesheet) And check your zoomlevel...

    – Kukeltje
    Sep 24 '15 at 11:08











  • No my colleagues don't see this and if I switch my Chrome profile I don't see it either. Zoom level is 100%. When I inspect the component in the other profile I don't have the injected stylesheet. The normal ui-widget-header of the primefaces theme looks completely different (it is there in both cases but is overwritten in the one). Another strange thing is that the url in the injected stylesheet is using an absolute URI while all other styles normally use relative URIs.

    – Ben
    Sep 24 '15 at 15:17











  • Did you try clearing the cache?

    – Kukeltje
    Sep 24 '15 at 15:46














7












7








7








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.










share|improve this question
















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.







css google-chrome primefaces






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Sep 24 '15 at 15:20







Ben

















asked Sep 24 '15 at 10:21









BenBen

85521427




85521427













  • You collegues do not have this 'injected' stylesheet? (whatever injection may be, looks like a normal PF stylesheet) And check your zoomlevel...

    – Kukeltje
    Sep 24 '15 at 11:08











  • No my colleagues don't see this and if I switch my Chrome profile I don't see it either. Zoom level is 100%. When I inspect the component in the other profile I don't have the injected stylesheet. The normal ui-widget-header of the primefaces theme looks completely different (it is there in both cases but is overwritten in the one). Another strange thing is that the url in the injected stylesheet is using an absolute URI while all other styles normally use relative URIs.

    – Ben
    Sep 24 '15 at 15:17











  • Did you try clearing the cache?

    – Kukeltje
    Sep 24 '15 at 15:46



















  • You collegues do not have this 'injected' stylesheet? (whatever injection may be, looks like a normal PF stylesheet) And check your zoomlevel...

    – Kukeltje
    Sep 24 '15 at 11:08











  • No my colleagues don't see this and if I switch my Chrome profile I don't see it either. Zoom level is 100%. When I inspect the component in the other profile I don't have the injected stylesheet. The normal ui-widget-header of the primefaces theme looks completely different (it is there in both cases but is overwritten in the one). Another strange thing is that the url in the injected stylesheet is using an absolute URI while all other styles normally use relative URIs.

    – Ben
    Sep 24 '15 at 15:17











  • Did you try clearing the cache?

    – Kukeltje
    Sep 24 '15 at 15:46

















You collegues do not have this 'injected' stylesheet? (whatever injection may be, looks like a normal PF stylesheet) And check your zoomlevel...

– Kukeltje
Sep 24 '15 at 11:08





You collegues do not have this 'injected' stylesheet? (whatever injection may be, looks like a normal PF stylesheet) And check your zoomlevel...

– Kukeltje
Sep 24 '15 at 11:08













No my colleagues don't see this and if I switch my Chrome profile I don't see it either. Zoom level is 100%. When I inspect the component in the other profile I don't have the injected stylesheet. The normal ui-widget-header of the primefaces theme looks completely different (it is there in both cases but is overwritten in the one). Another strange thing is that the url in the injected stylesheet is using an absolute URI while all other styles normally use relative URIs.

– Ben
Sep 24 '15 at 15:17





No my colleagues don't see this and if I switch my Chrome profile I don't see it either. Zoom level is 100%. When I inspect the component in the other profile I don't have the injected stylesheet. The normal ui-widget-header of the primefaces theme looks completely different (it is there in both cases but is overwritten in the one). Another strange thing is that the url in the injected stylesheet is using an absolute URI while all other styles normally use relative URIs.

– Ben
Sep 24 '15 at 15:17













Did you try clearing the cache?

– Kukeltje
Sep 24 '15 at 15:46





Did you try clearing the cache?

– Kukeltje
Sep 24 '15 at 15:46












3 Answers
3






active

oldest

votes


















9














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.






share|improve this answer
























  • ran into the same issue

    – Mobius
    May 23 '16 at 13:31











  • Had the same issue with the "Mercury Reader" extension. Removed!

    – Alireza Noori
    Dec 14 '16 at 11:46











  • Ran into the issue because I had an id with the name "adspace" lol and my addBlock was doing that hidding. thx

    – Crazy Alien
    Oct 9 '18 at 10:45













  • Thanks @Ben, Solved my problem too. Mine was due to the d3coder extension chrome.google.com/webstore/detail/d3coder/…

    – user8576017
    Oct 24 '18 at 19:14



















2














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



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






share|improve this answer































    0














    remove your newly installed browser extensions and cache, that may solve your problem.






    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f32758890%2fstrange-styling-through-injected-stylesheets-in-chrome%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      9














      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.






      share|improve this answer
























      • ran into the same issue

        – Mobius
        May 23 '16 at 13:31











      • Had the same issue with the "Mercury Reader" extension. Removed!

        – Alireza Noori
        Dec 14 '16 at 11:46











      • Ran into the issue because I had an id with the name "adspace" lol and my addBlock was doing that hidding. thx

        – Crazy Alien
        Oct 9 '18 at 10:45













      • Thanks @Ben, Solved my problem too. Mine was due to the d3coder extension chrome.google.com/webstore/detail/d3coder/…

        – user8576017
        Oct 24 '18 at 19:14
















      9














      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.






      share|improve this answer
























      • ran into the same issue

        – Mobius
        May 23 '16 at 13:31











      • Had the same issue with the "Mercury Reader" extension. Removed!

        – Alireza Noori
        Dec 14 '16 at 11:46











      • Ran into the issue because I had an id with the name "adspace" lol and my addBlock was doing that hidding. thx

        – Crazy Alien
        Oct 9 '18 at 10:45













      • Thanks @Ben, Solved my problem too. Mine was due to the d3coder extension chrome.google.com/webstore/detail/d3coder/…

        – user8576017
        Oct 24 '18 at 19:14














      9












      9








      9







      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.






      share|improve this answer













      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.







      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Sep 24 '15 at 17:03









      BenBen

      85521427




      85521427













      • ran into the same issue

        – Mobius
        May 23 '16 at 13:31











      • Had the same issue with the "Mercury Reader" extension. Removed!

        – Alireza Noori
        Dec 14 '16 at 11:46











      • Ran into the issue because I had an id with the name "adspace" lol and my addBlock was doing that hidding. thx

        – Crazy Alien
        Oct 9 '18 at 10:45













      • Thanks @Ben, Solved my problem too. Mine was due to the d3coder extension chrome.google.com/webstore/detail/d3coder/…

        – user8576017
        Oct 24 '18 at 19:14



















      • ran into the same issue

        – Mobius
        May 23 '16 at 13:31











      • Had the same issue with the "Mercury Reader" extension. Removed!

        – Alireza Noori
        Dec 14 '16 at 11:46











      • Ran into the issue because I had an id with the name "adspace" lol and my addBlock was doing that hidding. thx

        – Crazy Alien
        Oct 9 '18 at 10:45













      • Thanks @Ben, Solved my problem too. Mine was due to the d3coder extension chrome.google.com/webstore/detail/d3coder/…

        – user8576017
        Oct 24 '18 at 19:14

















      ran into the same issue

      – Mobius
      May 23 '16 at 13:31





      ran into the same issue

      – Mobius
      May 23 '16 at 13:31













      Had the same issue with the "Mercury Reader" extension. Removed!

      – Alireza Noori
      Dec 14 '16 at 11:46





      Had the same issue with the "Mercury Reader" extension. Removed!

      – Alireza Noori
      Dec 14 '16 at 11:46













      Ran into the issue because I had an id with the name "adspace" lol and my addBlock was doing that hidding. thx

      – Crazy Alien
      Oct 9 '18 at 10:45







      Ran into the issue because I had an id with the name "adspace" lol and my addBlock was doing that hidding. thx

      – Crazy Alien
      Oct 9 '18 at 10:45















      Thanks @Ben, Solved my problem too. Mine was due to the d3coder extension chrome.google.com/webstore/detail/d3coder/…

      – user8576017
      Oct 24 '18 at 19:14





      Thanks @Ben, Solved my problem too. Mine was due to the d3coder extension chrome.google.com/webstore/detail/d3coder/…

      – user8576017
      Oct 24 '18 at 19:14













      2














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



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






      share|improve this answer




























        2














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



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






        share|improve this answer


























          2












          2








          2







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



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






          share|improve this answer













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



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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Aug 29 '18 at 14:56









          DautDaut

          1,075823




          1,075823























              0














              remove your newly installed browser extensions and cache, that may solve your problem.






              share|improve this answer




























                0














                remove your newly installed browser extensions and cache, that may solve your problem.






                share|improve this answer


























                  0












                  0








                  0







                  remove your newly installed browser extensions and cache, that may solve your problem.






                  share|improve this answer













                  remove your newly installed browser extensions and cache, that may solve your problem.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 25 '18 at 17:53









                  surajsuraj

                  12913




                  12913






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f32758890%2fstrange-styling-through-injected-stylesheets-in-chrome%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      404 Error Contact Form 7 ajax form submitting

                      How to know if a Active Directory user can login interactively

                      TypeError: fit_transform() missing 1 required positional argument: 'X'