The strangest thing is happening since a few days. Inspect element doesn't recognize a css file anymore (See attached image). Somehow the css file gets listed as an image.
I copied the content of this css file into another (working) css file to check if the problem was the content or something else like permissions. But then the working file didn't get recognized anymore either. So there's something really strange with the content.
Anybody got an idea?
http://sbx.mujjo.com/media/images/sc.png
Solved! The following line caused this issue: background: url('') top left no-repeat; Apparently it's not allowed to leave the url blank. This confuses inspect elements at least! – Remy Nagelmaeker Dec 17 '11 at 18:04
Are you sure your putting your stylesheet in like so?
<link rel="stylesheet" type="text/css" href="path/to/styles.css" />
Related
When I inspected my webpage, and clicked for a particular element, which is not rendered as I wanted, I saw some faults in the Css used in the style section of the browser. How to find that particular Css in the Code base.
You should see, in addition to the CSS and the warning about a fault, an indication of which file that CSS came from.
For instance in this trivial example:
<style>
body {
background: rubbish;
}
</style>
<body></body>
I saw:
Notice that to the right of the faulty CSS is the file which it came from.
Search in that file for the CSS that is causing a problem
Chrome version: 44
When working in my normal development environment (C#, IIS Express) css files downloaded by the browser are available in the sources tab and I can see what styles come from what files in the element inspector. However, in my current development environment (PHP, Apache, Xammp). The stylesheets are being downloaded and rendered as style tags and are not available in the sources tab. This is rather annoying as I can't save locally edited styles to my working copy. I've never seen this before and can't seem to find any answers with a quick google. Does anyone know what would cause dev tools to render this way? I feel like it must be some sort of server configuration issue but I can't be sure. Example below:
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
is rendered as:
And looks like so in the element inspector:
Any help greatly appreciated!
I just met the same issue. Not sure if my case can fix your problem, but I found out that I had a script 'prefixfree' requesting redundant css files at loading. So I just commented this line out and my style in Element Inspector just back to normal.
<script src="~/Scripts/prefixfree-1.0.7.js"></script>
In my case, the problem appeared to be caused by a bad/malformed CSS style that was being applied to the target element. I'm able access the element's style normally after removing this style:
background: -webkit-gradient(linear,0% 0%, 0% 100%, from(#2521BC), to(#1C1957), color-stop(.5,#3A33E7));
Here's a weird problem:
I configured my Apache httpd server just now. I wrote a simple test.php and it works correctly.
Then I wrote a css file which looks like:
.home div.sma{
background:url('../images/carlos.png') 50% 0px no-repeat;
}
The problem is:
The css file loads correctly and all other styles work fine. The only problem with it is that all images referenced in a CSS file using background:url won't work, but all images directly referenced in PHP file(<img src="" />) work well.
I've tried replace ../images/carlos.png by http://stacktoheap.com/images/stackoverflow.png, the problem still exists.
Weird problem, does anyone have a solution to this?
The class reference on you test.php is good ?
In home element class, the div with the class name sma :
<div class="home">
<div class="sma></div>
</div>
You can put a border to see if the size of your div.sma is good...
Did you put some special security params in apache ?
OK，problem solved. It turns out to be a problem with php.ini:
Certain class names are generated by PHP code with short_open_tags(<? //code ?>), but short_open_tag is Off by default in Windows.(It's On in Mac and Ubuntu). So, even the CSS file is loaded correctly, some selectors can't find corresponding class names because they haven't been generated.
By the way, I've also encountered that certain CSS files are categorized to Images when inspecting elements in Chrome, which brings trouble to debugging. To solve this, simply remove all background:url(path) statements within which path is an empty string.
I am working on a site (www.eticket24.at) and have to create an external CSS for both the header and footer.
If I view the header, for example, seperately in FireFox by going to www.eticket24.at/header.php, it looks fine — the CSS is all there, and it's styled the way it should be. However, in IE8, if I do the same, the style is gone compeletely. It works on the index page, but not when I view it alone.
I am using link rel="stylesheet" href="http://www.eticket24.at/et24_header.css to include the CSS at the top of my header.php page. Same goes for my footer.php page.
So, what's the problem with Internet Explorer this time? Why won't it behave?
Thanks.
header.php doesn’t return a full HTML page, so maybe Internet Explorer is borking on that. Even though Firefox renders it, I don’t think you can necessarily expect all browsers to do so.
As ifaour mentioned, you might want to move your <link> tags into the <head> tag, as they’re not meant to go in <body>.
Your link is inside the body of the page... try putting it inside the <head /> section. Also add type="text/css" to the <rel /> tag.
It's because when you're vewing the header on its own, Firefox will correct the incomplete markup and make the page a valid html document with the <html><body>...</body></html> tags.
IE will not do this, so the styles will not be applied as it doesn't know to do this on an invalid page.
This is also why the page looks correct on the live site.
I included all the css inside the .php files themselves instead of linking them and changed some div names (from to , and to . This helped because css styling of the divs before were being overridden by the other companys css styling, so I had to create my own unique div names, instead of the standard HTML5 ones
I don't have a lot of information here. My site has been working in IE8, but now no styles are applied. The developer tools show all of the CSS files being loaded, but no elements show any evidence of those styles being applied. Chrome & Firefox still apply all styles with no problem.
I know you can't help me without more information, but maybe you have an idea of where I could look for an error? All of my javascript is running fine. Is it possible that an invalid CSS file would just stop all style application, or something like that?
Thanks for any suggestions!
PS: possibly relevant - my base css file imports several others - about 8 in total.
Just on a lark, try removing all the imports then putting them back in one by one.
Run your CSS through the W3C CSS Validator.
Attach a new CSS file, test that it works, then slowly migrate across to the new file until it breaks. Try to track down where it breaks.
There is a cap on number of css files that can be included in a page on IE. Check if u are including lot(>31) of css files refer http://drupaleasy.com/quicktips/internet-explorer-css-file-limits
Look at the files that do get imported, say, based on body, and see if they appear chopped off. That will show a syntax error.
Even if one css file had an error (say an unclosed curly brace) that made the entire file invalid, it shouldn't affect other css files. I'm assuming you don't have html comments around all of your includes.... It's possible you're doing something systematically that invalidates all css. Try adding this code at the top of your document (let's just say below any doctype, just because), and see if that affects anything:
<style type="text/css">
* { background: #f00 !important; }
</style>
check if you have mentioned DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd in your file... I faced similar problem once.
Not sure if it'd works but give it a try.