Skip to main content
Galeodan
Galeodan
Known Participant
January 11, 2023
Answered

CSS styled text is hidden in Windows Chrome but shows in other browsers

  • January 11, 2023
  • 2 replies
  • 784 views

I am using a CSS selector to style some text in a website. 

 

.addtitle {
    padding-left: 0;
    margin: 3px 0;
}

 

In the HTML page, I have several para's styled with this selector, for example: 

 

                        <p class="addtitle">
                            <strong>Móvil\WhatsApp:</strong>
                        </p>
 
These paragraphs do NOT display in Windows\Chrome (they are hidden). But they do show the way they should in FireFox, Explorer, Edge, Chrome on Android. I have cleared cache, forced reload, used another PC, but it makes no difference.
 
If I use an identical selector, but call it ".addrtitle", in the CSS file and HTML page, it displays in all browsers!
 
Anybody have an idea why this happens? Is "addtitle" some sort of reserved word in Chrome? 
 
 
    This topic has been closed for replies.
    Correct answer Nancy OShea

    Disable all browser extensions/add-ons especially AdBlockers.

     

     

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 11, 2023

    Occam's razor.  The simplest explanation is usually the correct one.

     

    I'm with @Jon Fritz about conflicting styles. 

    Ctrl + Shift + F > Basic tab.  Look for: .addtitle.  In: Entire Current Local Site.  Hit FIND ALL.   Click on each result in Results panel.

     

     

     

    Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    January 11, 2023

    I wonder if there isn't something else going on in your code that's causing a conflict. 

    Run your page through the html validdator here and repair any errors: https://validator.w3.org/nu/ 

    Run your CSS file through this validator and do the same: https://jigsaw.w3.org/css-validator/ 

     

    If everything validates, it's possible you have competing styles in multiple locations (in an external .css file and embedded in the .html for example). Sharing a link to your page online will help us see if that's the case.

    Galeodan
    GaleodanAuthor
    Known Participant
    January 11, 2023

    I have run W3C Validation on CSS and HTML files and it shows no errors (only a bunch of warnings related to closed void tags - Thanks to Prettier).

     

    I forgot to mention - Chrome DOES display the text properly when displaying the file on my HD. But once I upload it, the online version has the anomalous behaviour.

     

    Only one page on one of my websites uses this selector . It is the "Contact & Booking" page of galeodansuites.com, The Spanish version of this page is at:  www.galeodansuites.com/ratespolicies-es.html  The affected text is immediately under where it says: "Reserve Directamente con Nosotros". It should show an email address and a telephone number. I find it IS visible on Windows FireFox, Edge and Explorer, and also Chrome on Android - But it is NOT visible in Windows Chrome. The problem selector is ".addtitle". Every para styled with this selector is invisible. 

     

    Now, for the English version of the page (use the flag at top-right) I am using an identical, but differently named selector. This one is ".addrtitle". The English page displays properly in all browsers. 

     

    So, it seems it has something with me calling the selector "addtitle". If I change the name everything is OK. I have done a global search for "addtitle" and it doesn't popup anywhere except in the CSS file and the affected page.

     

    Now here's another wrinkle - And I don't know if it is the cause of the anomaly. When inspecting the header of the online page, in Chrome, I see a script that I never put in there. It is NOT there in the offline file. Neither is it present when inspecting online with FireFox. The line is just above the header closing tag:

     

    <script type="text/javascript" src="https://s3.scriptcdn.net/cdn/c7fa7451-6f95-4815-ac32-b8cc2537837a" data-awssuidacr="XrSJfj7ZvrJmV9ehSr2ePmhtaX3YVXrG"></script>

     

    Do you guys see it? In Chrome? In FireFox?
    How did it get there? And why only in Chrome?

    Is this what causes the anomaly? 

    Why does it interact with "addtitle" but not "addrtitle"?

     

    Maybe the rogue line is not actually there in Chrome, but just appears to be - Like a Schroedinger script.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    January 11, 2023

    Disable all browser extensions/add-ons especially AdBlockers.

     

     

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices