When inspect a website with chrome console, I normally can see where the css is coming from (e.g. test.css:143) but i recently see the following
What does mean in this case? It is not inline styling neither it is somewhere in the source of the page when I inspect it.
Thank you so much for your help!
Related
First, I've seen the duplicates
What is #shadow-root, and why does it put display none on my font awesome classes?
and
HTML / CSS - DIV Element hidden when it shouldn't be?
however both of these suggest the issue is with adblock and I have totally disabled adblock.
I am more concerned with where the #shadow-root is coming from, since I certainly did not put it there.
I have read that there is an option in chrome to disable it (and interestingly enough I have it disabled...), but this means that anyone using my website will need to do the same, and I'd rather just do away with it entirely as it provides zero usefulness in my application.
I have also googled and read many of articles about the shadow dom and none of them give any insight on why it would appear seemingly for no reason.
From what I have seen in inspector/view page source, the entire contents of my app are being rendered into this shadow dom and thereby not receiving any of my styles.
I am using rails, react, redux, react-redux, react-router
Chrome developer tool screen
Page Source screen
Notice that the source has nothing in the div that react should be rendering to.
Additional info:
displays unstyled page on chrome in normal and incognito
does not work at all in safari
A lot of chrome plugins automatically create this shadow root in your inspector. For example, ever since I downloaded Vimium, I've had a shadowroot div at the bottom of any page I've opened in chrome. It's nothing to worry about.
I was having the same issue and found that it was Adblock Plus that was adding #shadow-root. Thanks to the resources above I was able to assertain what the issue
For me it was also an Adblocker (uBlock) and it was actually hiding part of the webpage I was making which showed imported tweets. Turning the adblocker off for my site fixed it.
I have an anchor with the attribute href pointing to a pdf file, like 127.0.0.1/MyApp/myfile.pdf, but the anchor simply doesn't work on Internet Explorer 9. It's ok in FF and Chrome. I didn't get any error in IE's javascript console, and there isn't any traffic at all when I hit the link.
<label>Click to see the PDF file</label>
There's no css associate that is relevant...
As KatieK pointed out, you haven't provided enough information to work with here. However, I had faced something similar a while back, this helped me solve the issue:
Open Reader
Edit > Preferences.
Internet > Display PDF in Browser
But I am not sure if it's a similar issue with yours too.
The problem was resolved! The issue was that I was adding a label, inside the link, thus IE couldn't render the link properly. Instead, I put it on a span tag, and the link is working.
Thanks to all for your help!
I'm using Firefox alongside Firebug Developer tools.
Is the HTML shown in View Source (Ctrl + U) different from the HTML I see when inspecting elements using Firebug?
What are the differences between the two?
Yes they are different.
View source shows you the original HTML source of the page.
The inspector shows you the DOM as it was interpreted by the browser. This includes for example changes made by javascript which cannot be seen in the HTML source.
Oh and this also counts for the developer tools that allow you to view the DOM in other browsers, like the Chrome Web Inspector and Internet Explorer Developer Toolbar. The HTML source will always be the same across all browsers, the generated DOM might differ as it is an interpretation and render engines are not all the same (unfortunately).
It should also be noted that aside from the dynamic DOM manipulation which could be occurring via javascript etc, Firefox will also parse and "clean-up" malformed (X)HTML, so these changes will also affect what you see when inspecting an element.
The difference are (but not limited to) that in firebug console you can see dynamically changes, which occurred in web page. For example, DOM elements modifications (from AJAX or regular JavaScript), CSS in-place modifications, etc...
In Firefox, View Source may reload the page, changing what is on it. See this bug and vote for it if it is bothering you:
https://bugzilla.mozilla.org/show_bug.cgi?id=307089
In my website I have a stylesheet that is being rendering in the html with the following line:
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:61000/test/portal_css/Keith%20Theme/keithCustom.css"
All of these styles are being used on the site, but if I go to the resource tab of the developer tools it has my keithCustom.css stylesheet under the resources/images. This is annoying because it prevents me from being able to look at the stylesheet from the developer tools.
I was wondering if anyone's ever ran into this, or if this might be a bug with chrome.
I can always use Firefox to look at it, but I use chrome as my main browser and I would really like this too work.
Any suggestions or comments would be greatly appreciated.
EDIT: Turns out someone has already asked this question and I didn't find it in my original search Google Chrome Developer tools - CSS file showing as an image resource, the solution here worked like a charm
Apparently Chrome isn't interpreting your CSS file as an actual CSS file. Could it be its URL's fault? Does it happen when you browse the same page with its stylesheet on another server? Or try to use a relative path instead of an absolute path on the href attribute.
You could also check the CSS file's encoding. AFAIK the UTF-8 BOM signature can ruin lots of PHP scripts. It might be confusing Chrome, causing it to think the file isn't a plain text stylesheet…
Hope it helps at least clearing some possible suspects!
Am testing my webpage on firefox and everything is looking fine, but when i run my page on IE or chrome a section with
Clear ReCSS console DOM Object Close
What is it and how can i remove it?
This one had me going also for a while. If you are utilising the DOJO framework then you need to turn Debug=false as this is the firebug-lite console that is shipped with it! If not it is still the Firebug-lite console. Firebug-lite will not show on Firefox as it has the full Firebug hence why it shows up on other browers.
It's likely that you have malformed html that Firefox is handling differently than IE and Chrome. Make sure you have matching opening and closing tags throughout!
If you post the html in question, we might be able to help a bit more...