I have this displayed in my Firebug console
"NetworkError: 404 Not Found - http://********.com/images/slider-img/ajax-loader.gif"
So it's telling me it can't find a background image. But can it pinpoint which CSS file this image has been declared as a background-image property?
I have about 4-5 CSS files being referenced in the document and the manual way of finding it out would to open each of the files and find for this image. So I was wondering if this could be avoided and have Firebug tell me which CSS file is the culprit...
Firebug currently (as of version 2.0.x) doesn't directly show you the initiator of a network request. This requires platform support, which is requested in bug 563623.
So, as a workaround you can do this:
Switch to the CSS panel.
Click into the search field at the right side of Firebug.
Ensure that the option Multiple Files is checked.
Enter ajax-loader.gif
=> The CSS panel will switch to the CSS source containing the rule containing the image value.
Notes:
There may be several properties referring to different images named ajax-loader.gif. So you should also check whether the path to the image corresponds to the one shown in the error message. (Within the search field you can hit Enter to get to the next match.)
It's not sure that the request comes from CSS. It may also come from JavaScript, e.g. through an AJAX request or by appending an <img> tag dynamically.
Related
I'm having trouble locating where the CSS class is defined that is styling an element on my page. When I inspect the element in Chrome, normally it shows the file name from which the CSS is originating, which I can then click on and go see the CSS file where it's defined. But this particular rule doesn't show any location. And when I look through all the code of my app, I can't seem to find the class anywhere. Any suggestions?
In the screenshot below, you can see that I'm trying to locate the .hom-whoc CSS class.
And in case it's helpful, the place this website is being hosted (and all the code is located) is in ClickFunnels. Unfortunately, the code is not in a repo anywhere, which would have made it much easier to search. This was all done in the ClickFunnels GUI in sections called things like "custom CSS" and "custom element." It's scattered through the interface, making it difficult to find where it's defined. But it should still be in SOME file that the page is using to style itself, which I imagine would be reference in the Chrome inspector.
I want to do something hackish in order to have responsive images generated automatically with js & php. I would like to do this with my css background-image: url(#/path/to/image.jpg), so that I can specify various image paths that javascript can grab but which won't actually result in separate HTTP requests.
The browser interprets the above code as http://example.com/cssfolder/#/path/to/image.jpg. Which means it is just pointing to the css folder. In my brief tests, if there is an index file in the folder the Chrome console will complain "Resource interpreted as Image but transferred with MIME type text/html" but if there is no index it will give a 404 message.
So that feels kind of bad, but it doesn't seem to affect the browsing experience. I guess developers may not like this method since it pollutes the console with errors, but is there an objective reason to avoid this? Are there some browsers that would actually mess up the page, bearing in mind that a real background image would be immediately supplied with javascript?
I have a website and I want hide the CSS and script files address from source, when user clicked right and press "view source", CSS and script files address were changed. (as well as in firebug).
Like google! please go to google.com and press right click, then "Inspect Element With Firebug", see Style in right box. You will see "www.google.com #2 (line 9)" for example! and you won't see any address for CSS files!
How is this possible?
If you meant viewing the page source and not seeing any style links there, that's because Google uses some JavaScript framework, perhaps GWT: https://developers.google.com/web-toolkit/ . You can see a lot of JavaScript gibberish on the page, right? That JavaScript creates all the style elements etc. in the DOM. And you indeed can see the resulting style definitions when inspecting the elements, be it Firefox or Chrome.
You can do the same. But that design is quite different from classic HTML + JavaScript.
But others are right, you can't hide anything that way, and you shouldnt. It's security by obscurity at best.
As far as I know, you cant prevent users from seeing these files. They can see these files as well as can also download them if they want.
All you can do is to minify these files using some kind of minifier like JS Minifier for JavaScript code.
You can place your css in inline tags. Simply copy/paste the contents into your .html document in a ... block. Then you won't have an external .css file.
The advantage is that you save an http hit. The disadvantage is that you have to download the full css every time because you can't cache it.
You can also minify your css which will obfuscate it to a certain extent. But you can never really hide css from someone who downloads it.
Is there a possibility to check if all of the background images exist in a CSS file?
Without using every selector on the page so that this appears in Firebug NET tab.
There is no in CSS way to do this, since the standard says that "an image that is empty (zero width or zero height), that fails to download, or that cannot be displayed (e.g., because it is not in a supported image format) [...] draws nothing" (cite).
You have to parse your CSS file and check all paths. You could do this with JavaScript in your browser, however I believe it's easier to write a Python script or even a small binary application that parses your CSS files and checks whether the files actually exists.
I am developing a feature where I want to increase the size(width and height) of Facebook Like button which is getting rendere on my page.
I have tried overidding the css but it is not working as my css is loading very late.
Help required.
Are you sure you're using the correct overrides in your CSS? If I'm not mistaken, it doesn't matter when the CSS is loaded, just that it is loaded.
Be sure to check your CSS includes in the header file to make sure you're using the latest version. Also double check the classes or ids you need to override.
Perhaps you could post the code containing the like button you're trying to manipulate. If you're loading it in via Javascript you can use Firebug or other Web Inspectors to find out the actual HTML that gets inserted.
First of all, the css MUST be interpreted by the browser before the html element it refers to is loaded...
Second, the reason you can't select the button through CSS directly, is because it is rendered inside an iFrame that is controlled by the Facebook framework (you can check this out with firebug or any other inspector).
I'm not sure if it's feasible, but you have two possible ways to do it:
use javascript and the DOM to access inside that iFrame, select the button and style it.
create a button yourself, and give it the same href as the one generated originally, thus losing the fan-counter capabilities and whatever else is part of their framework