Member Avatar for VenusCrystal

Hi Everyone,

Some of the styles on my html page is coming only in chrome browser(not in firefox or IE) which I do no want. Using chrome browser developer tools when I tried to inspect them, I found a very strange thing, it is not showing the css source file name for the style.

Please find the developer tool pic below:

1c8b90f114e1dc08ebf65028ceb2a181

In the pic you can see that for class .app-background there is no source file showing up in developer tool.

Has anyone come across such situation? Any help or suggestions to remove these styles appreciated.

Thanks in advance!!

Regards,
VenusCrystal

Edited by VenusCrystal
  • 4 Contributors
  • 4 Replies
  • 330 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by VenusCrystal

Dani AI

Generated

This kind of DevTools output usually means the rule isn’t coming from a normal external stylesheet with a filename DevTools can show. Common sources are inline <style> blocks, element style attributes, styles injected at runtime by JavaScript, or extension/user styles — all of which can appear with no file name. The quick checks suggested by (try a different class name) and (verify filenames/folders for stray whitespace) are sensible first steps; ’s point about accidental typos in attributes is also worth verifying because malformed markup can hide or alter where styles end up.

Useful troubleshooting steps (repeatable and safe):

  • Search across all loaded sources in DevTools (Sources -> Search, or Ctrl/Cmd+Shift+F) for the selector or unique property text.
  • In Elements, look for inline <style> tags or style attributes that contain the rule.
  • Test with extensions disabled (Incognito/Guest or disable extensions) to rule out injected styles.
  • Run a quick console check to list stylesheets and spot inline ones:
Array.from(document.styleSheets).forEach(ss => {
  console.log(ss.href || '[inline]', ss.ownerNode && ss.ownerNode.tagName);
  try {
    Array.from(ss.cssRules || []).forEach(r => {
      if (r.cssText && r.cssText.indexOf('.your-selector') !== -1) console.log('found in', ss.href || '[inline]');
    });
  } catch(e) {
    // cross-origin stylesheet: cssRules can't be read
  }
});

If the rule shows as “[inline]” it’s coming from a style element; if nothing is found it may be injected after load (re-run the check after interactions) or created via CSSOM methods. Fixes: move rules to a proper external stylesheet, correct any malformed attributes or filenames (remove invisible whitespace), remove/adjust extension styles, or rename conflicting selectors. These checks normally reveal the origin and resolve the Chrome-only, filename-missing behavior.

Recommended Answers

All 4 Replies

Member Avatar for rtrethewey

At a guess, I'd bet that you accidentally used a class name that is also used by Developer Tools or some other add-on/plug-in.

Change the class name and I bet it fixes the problem.

commented: Yes changing class name worked :) Thanks! But I was wondering if there is a list of class names used by Developer tools and firebug so that next time I avoid using them. +1
Member Avatar for karand19

I had same problem and their was Blank Space between foldername.
Make sure should be no space in filenames and foldernames.

Member Avatar for <M/>

I am sorry in advance if i make a mistake (i am on a rush today), but on the line within your body tag, you have -oncontextmenu. I don't know if that is exactly correct, i think it is supposed to be oncontextmenu (without the under score.
http://reference.sitepoint.com/html/extended-event-attributes/oncontextmenu)

Edited by <M/>
Member Avatar for VenusCrystal

I am finding this issue in many places in my app now :(

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.