I included several CSS files in my website, other works good but one my CSS file (on localhost) :
<link href='http://127.0.0.1/ndf/nekib-css.css' rel='stylesheet' type='text/css'/>
loads as an image. Here's a screenshot of what I see in the Chrome Developer Tools.
Double checked the MIME-type, added it on different position but none work.
I am using WAMP.
Any idea what's wrong ?
You may be having an issue similar to the post below. Their issue came from having some non-standard css, in their case background:url()
Google Chrome Developer tools - CSS file showing as an image resource
Related
I'm using standard bootstrap with ASP .Net C# and it seems to be generating a lot of files like _navbar.scss. These work fine on localhost in both IE and Chrome. When I publish, it works in Chrome, but in IE none of the styles are being applied. I unfortunately have to code to IE as our standard.
I could understand it not working in IE both locally and in deployment, that would just be an issue with IE not complying with basic standards, but it does work on IE locally. I could understand it not working in production, that would likely indicate that something wasn't being copied over or something. I can't understand why it would work in production, and work in IE, but not specifically IE while in production.
Just to try and clear some of that up...
.scss files
The standard template does not generate .scss (Sass) files. It actually returns a standard .css file. The reason when debugging in chrome it shows .scss files is because of a source map which sort of deconstructs the .css file to tell you where in the .sass files that created it where the code originates.
You can read about source maps here
And find out more about Sass here
Css Differences Between Development and Production
The default template in _layout.cshtml has something like the following :
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
</environment>
What This Means:
In development you get the un-minified css
In production it will try and use a CDN for the bootstrap css
If the CDN is not available it will use the local minified css
You can read more about the Environment tag helper here
Bootstrap IE Support
Bootstrap only supports IE10+ so if you are trying to use an older version of IE that will be your issue. See here
If you do use polyfills to get it working with older versions of IE, IE still has some quirks to watch out for. For one if using additional style sheets IE 6-9 had a maximum number of rules they could deal with before freaking out, which you may easily exceed. See here
Working Out The Issue
If it is IE 10+ try and:
Verify is that the production site is correctly pointing to the
right CDN path
Verify that the fullback css path is accurate and not returning a 404
Hope that helps.
Something strange is happening and I can't figure out why: On my website I have the following CSS for providing Ionicons:
<link rel="stylesheet" href="https://www.domain.tld/themes/places/assets/fonts/ionicons/css/ionicons.min.css">
I decided to move them to CloudFront CDN, now the link looks like this:
<link rel="stylesheet" href="https://[...].cloudfront.net/assets/fonts/ionicons/css/ionicons.min.css">
The link is not broken, the same CSS are now accessible through the CDN, but the Ionicons are gone - I see empty rectangles only. When I change the link back to my server's local CSS file, the icons appear again. Everything else (CSS, JS, Images), which has been moved to the CDN, works as usual - only the Ionicons not. Does someone has an idea where this strange behaviour comes from?
I have CSS files that are being loaded correctly in FireFox (52.0.1). They are listed in the Style Editor tab, but not in the Network Monitor tab. It doesn't matter if I click All or CSS in the Network Monitor tab, no CSS files show up.
I am including the css files in the <head> like so:
<link rel="stylesheet" type="text/css" href="https://{path}/css/print.css" media="print">
<link rel="stylesheet" type="text/css" href="https://{path}/plugins/components/jquery-ui/themes/base/all.css" media="all">
I'm assuming they're supposed to show up in the Network Monitor tab considering there is a CSS option, so what gives?
As your screenshot says that there were only 15 requests but you obviously have 8 files in the Network Monitor and an even larger number of CSS files, this looks like a bug in the Firefox DevTools.
I suggest you first try out a new Firefox profile. If it works there, its obviously a bug in your profile. You may track it further down to a specific preference or add-on causing the CSS files not to be listed within the Network Monitor, but in any case you should file a bug.
I'm using brackets.io for web dev.
The page looks great in the live preview, but when I just open the file from chrome by "file:///localurl/index.html" The page is not styled at all.
I'm using this in the <head>:
<link href="css/mystyles.css" rel="stylesheet">
Using "inspect element" on the page opened in chrome, it seems no stylesheet is applied. (There is also a bootsrapt CSS included, which I omitted for simplicity, but that one is not applied in chrome as well)
What am I doing wrong? The stylesheets are in the css subfolders.
Solved it, should have used ./css/mystyles.css and not css/mystyles.css
for some odd reason Firefox doesn't render FontAwesome properly. It works in Chrome and in Safari, just not in Firefox.
Font Awesome was added via Bower and therefore loaded locally. Nothing via CDN.
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" type="text/css">
This is how it looks in Firefox (wrong):
This is how it looks in Chrome & Safari (correct):
Things I have tried:
Tried to load it via CDN and added "Access-Control-Allow-Origin" to
.htaccess
Moved fonts into same directory (to check if it was a relative path
problem)
Nothing worked up until now.
/// EDIT
This is how its shown in the Inspector
I have fixed the problem. I was under the impression that it wouldn't matter at which position I would load the Font Awesome css file. It was one of the first css files loaded in the header. I moved it to the last position and now it works just fine.
I couldn't find out why exactly this fixes the problem in firefox, but it did the trick. What I still find extremely strange is, that it matters the order in which the css is loaded in firefox, but not in chrome and safari.
Maybe someone else knows more about this.