Member Avatar for xylude

I am perplexed as I have ever been in my 3 years of web development. I had a div class named ".bottomAds" that absolutely refused to even render on the page. It was like it wasn't even in the source at all (it was though, because I checked). So I thought I would rename it to just ".ads" - still no luck. So I named it ".adPad" and voila! it worked. I even renamed it back to "bottomAds" just to see if it would work, and it didn't. This is one of the weirdest things I have seen so far as a web developer. Has anyone ever came across something like this or is the word "ads" just a no no in CSS?

  • 3 Contributors
  • 4 Replies
  • 96 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: the most likely cause is a client-side content blocker or injected stylesheet that hides nodes whose class or id looks like an advertisement. That explains why the page can render normally on one machine but appear “missing” on another.

Quick troubleshooting you can apply right away: open the page in a different browser or in a private/incognito window with extensions disabled; inspect the node with the browser DevTools (Elements panel) and look at the matched rules in the Styles/Computed pane — the rule that hides it will show its origin (for extensions you will see a chrome-extension:// or moz-extension:// URL). Also search all loaded stylesheets for selectors containing common ad keywords (ad, ads, banner, advert) to find element-hiding rules. If the element is present in the DOM but has display:none/visibility:hidden set by a rule coming from an extension or injected stylesheet, that pinpoints the cause.

Practical fixes: avoid class or id names containing obvious ad keywords — change to neutral names like promo, sponsoredBlock, or prefix with a project-specific token (for example site- or x-) so filters do not match. If renaming is not desirable, a reliable test is to temporarily disable extensions and confirm the element reappears; this also confirms whether an ISP/proxy style inject is involved. Trying to override a hiding rule with author CSS is a fragile solution because some blockers inject user-level styles that are hard to beat.

Notes for thread context: since saw the section on their copy and suggested an overriding stylesheet, the issue is most likely environment-specific on 's side (browser extension or injected stylesheet). Inspecting the rule origin in DevTools will give the definitive answer.

Recommended Answers

All 4 Replies

Member Avatar for CJesusSaves

Hmm, strange. Maybe the browser or just..well I've never encountered such a situation so I don't know.

I did build a quick page with a DIV with ads included in it's class name. It showed. So CSS is not allergic to the characters ads bound together. Did you try creating an empty page with just one DIV and its class name as ads? I'm sure it might be something on your page. Hehe. Or NOT. :)

Member Avatar for xylude

The page is at -- The div I changed is now named "adPad". It really is weird that It just refuses to show if I name it "bottomAds" but works if I name it what it is.

Member Avatar for CJesusSaves

Well, I don't know what's going on over on your end, but I took the liberty and downloaded, edited and the section with Intellinet Winter Sales did show with the name changed to bottomAds. That is the section with the weirdness right?

?: - S

Member Avatar for MidiMagic

Your isp probably used those style names in its own stylesheet. That stylesheet overrode yours.

Edited by MidiMagic because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.