Hi all and sorry for my english...
I have this strange problem on a website built in html and css
On localhost works correctly...
When I upload the site on the server, this work for some second, then the page refresh without CSS style page!
I can't understand why
If open the source of page, before there is
<link type="text/css" href="styles/simple.css" rel="stylesheet"/>
After
<style></style>
Any suggestions?
is it a self hosted site or you are using a provider? Or in other words, do you have access to the server configuration? Looks like there are some .htaccess rewrite rules if there are no instructions on your code to reload the page.
EDIT: I have seen that you get these errors on reload:
TypeError: $(...).PikaChoose is not a function;
Error: Permission denied to access property 'toString' (2 times);
TypeError: $slider.after(...).cycle is not a function
These means that you have some js that is making troubles. This also means that the browser stops including files (like js plugins that are returning error on call). SO: if you load css after this error you miss that css.
My suggestion is to:
load all the css first
load all the js after
consolidate all the css since you have many rules that overwrite each other
disable some wierd plugins like mod_pagespeed since it looks like this is one that is causing the issue
Related
I'm developing my app from the backend side. My page is supposed load the css locally. I'm using nodejs, express.js, and ejs(for my pages) - The MEN/MEAN stack.
<link href="../public/stylesheets/style.css" rel="stylesheet" type="text/css">
I'm 100% sure the link is correct since VS Code allows you the check, but I've gotten an error when loading the page up. The error: "The resource from “http://localhost:3000/public/stylesheets/style.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)"
The CSS works fine when I use the style tag instead. What's going on here?
Okay so I solved it. The issue is with Express, it changes the "text/css" part to "text/html". A quick easy workaround would be to remove the "rel=stylesheet" but that can produce mixed results. The best thing is to use app.use(express.static("public")) - this will let express know that the public folder is for styles and scripts.
The link now should look like <link href="stylesheets/style.css" rel="stylesheet" type="text/css"> and it will work.
You should tell express that you have a static assets that you parked all on public folder.
app.use(express.static("public"))
To know more express magic, follow this github repo.
https://github.com/sagormax/node-admin/
I have an HTML form that I'd like to format using Bootstrap styles. Styles only, no Javascript (yet). I'm running this locally, not on any server, since it shouldn't need a server yet. The page in question already has some extensive styling that I wrote myself, in a separate stylesheet.
I put some Bootstrap styles into my HTML, then included a link to the bootstrap.min.css stylesheet in the HTML page. Result? The Bootstrap styles won't load -- and on top of that, some of my own styles, which load before the Bootstrap stylesheet, stop working. When I disable the link to Bootstrap.min.css, my own styles work again.
When the link to Bootstrap.min.css is enabled, I get this error:
Source map error: TypeError: NetworkError when attempting to fetch
resource. Resource URL: file:///[local-path]/bootstrap.min.css Source
Map URL: bootstrap.min.css.map
How do I fix this error? How do I get my own styles to work properly when I include bootstrap.min.css?
The error seems to happen when bootstrap.min.css.map is not in the same folder as bootstrap.min.css.
Try to include the .map file in the same folder.
So I'm using XAMPP (if that matters) and every time I restart the local server, the styling stops working.
For example I have this style link right now:
<link href="style/mainstyling.css" rel="stylesheet" type="text/css"/>
Everytime when I restart the local server the styling is actually working, but when I make a change into the css file itself, it doesn't affect the page at all. The fix right now is when I copy all the css code and put it into another file with completely different name and connect it again with the php (html) page itself.
I've been reading articles about it and I couldn't find any particular answer that could actually be the problem solver in this situations. It's either the cache of the browser or I don't know.
And yes, everything is in the right directory.
Open up Developer tools in Chrome (F12), go to your network tab and look at the HTTP response of
mainstyling.css Check that:
Got a 200 OK and not a 404.
The response Content-Type is "text/css"
Check the response body has CSS in it.
Run the CSS through a css format checker and check it is valid.
Everything works fine locally but when the stylesheets are uploaded to the server, the styles aren't being applied to the page. Chrome shows this error:
Resource interpreted as Stylesheet but transferred with MIME type text/x-asm
If I open the .css files in Chrome inspector and make any change to them there (including trivial changes such as hitting backspace or enter), then the styles are applied to the page and everything works as it should. But replicating this change in the actual stylesheet and re-uploading to the server does not solve the problem.
I validated the CSS using the W3C CSS Validator in hopes of finding something that would cause a parsing error on the server. All files validate but the problem remains.
Answers to similar questions on Stackoverflow point to server configuration. I'm a front-end developer at a large agency and don't have easy access to server configuration. What's more, stylesheets for other sites being served from that server do not incur that error. And when I link the problematic site to a stylesheet from another site, I get the same error. Which makes me think that the problem isn't server configuration or the stylesheet itself, but something else. I'd post more code but my employer's policy prohibits me from doing so.
Is there anything client side which could be causing this error?
If your company is using HTTP-Server-Simple-Static for serving CSS file it might be a server bug: https://rt.cpan.org/Public/Bug/Display.html?id=91321 It looks like the used method to autodetect the mime type sometimes get wrong results. Does it help, if you change the first lines of your CSS?
I had this same problem with Firefox telling me the (static) stylesheet was not loaded because the type of the static CSS file was "text/x-asm" instead of "text/css". Server mime types were all correct. Turned out, the stylesheet had tabs instead of spaces for indentation. I converted the tabs to spaces, and it was served and loaded properly.
Linux-based Webservers often use a program called file to determine the mimetype of a file to be downloaded.
file appears to have a problem with css if any of your class names start with any of the following:
.asciiz
.byte
.even
.globl
.text
.file
.type
To resolve the problem, rename the offending class.
Reference: https://serverfault.com/questions/597777/how-to-correct-the-mime-type-from-being-recognized-as-text-x-asm-to-text-css
I am a beginner with node.js and am using express with the ejs layout, and I want to know how to get rid of the .html extension when putting up a page. For example if I go to my localhost:3000/about.html - that works but I want it to show up as just /about. Also, having trouble figuring out how to change the favicon if anyone knows how to quickly change that from the express default.
Any help would be great thanks.
(I realise this question is old, but it appears high in Google search results, and the accepted answer isn't the best solution.)
The best solution for serving up static content in express.js is express.static. To avoid having to specify file extensions in URLs you can configure it with a list of default file extensions that it will use when searching for static files:
app.use(express.static(pathToBaseFolderOfStaticContent, {
extensions: ['html', 'htm'],
... // Other options here
}));
This will serve up pathToBaseFolderOfStaticContent/somePage.html or pathToBaseFolderOfStaticContent/somePage.htm in response to a GET request to http://www.example.com/somePage, which is what you want. For example, if you visit https://arcade.ly/star-castle, the file it serves up is just a static file called star-castle.html. I haven't had to add any special routing for this, or any other static file - it's all just handled by express.static.
I only need to add specific routes for content that requires active work on the server to return. A big advantage here is that I can use a CDN to cache more of my content (or nginx if I were running an internal line of business app), thus reducing load on my server.
You can obviously configure as many default file extensions as you like, although I'd tend to keep the list short. I only use it for resources where the URL is likely to appear in the address bar, which generally means HTML files, although not always.
Have a look at the following documentation on serving static content with express.js:
http://expressjs.com/en/starter/static-files.html
http://expressjs.com/en/4x/api.html (the express.static documentation is at the top)
This is also answered at In express what is the common way to associate a default file extension with static content requests?.
The favicon.ico issue can be solved by dropping your favicon into the root folder from which you serve static content, as well as implementing +Costa's solution where you reference it using a <link> in the <head> of your documents.
In theory you shouldn't need to do put the favicon in the root folder but, in practice, some browsers will still ask for it from the site root even though it's referenced in the <head> of your document. This leads to a spurious 404 error that you'll be able to see in client side debugging tools (e.g., Chrome dev tools).
The Favicon issue is usually a caching problem. As long as you have this code in your base html layout:
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
Then just navigate to wherever that image is with your browser, and that should force your cache to update.
I figured it out. I looked at this post Render basic HTML view? which solved the problem I was having.
app.engine('html', require('ejs').renderFile);
app.get('/', function(req, res){
res.render("index.html");
});
And this all goes in the app.js or whatever file you are running.