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.
Related
My computer is having an error where the CSS stops working. For example before, when I modify the CSS and save it, it would work on the webpage and all would be fine.
Now however, if I edit and save the CSS the webpage does not change at all, its almost as if the CSS is stuck in a cached version or something.
I am using sublime text 3, wamp server and chrome.
Anyone have any ideas on what the error could be?
Do
CTRL + SHIFT + R
This will hard refresh your browser. This command helps you to clear the browser's cache for a specific page.
Try deleting images and files in cache.
Then you can also use a workaround if it's a cache problem: you can add a get version parameter to your css src when you include it, and upgrade the parameter.
For instance:
<link rel="stylesheet" type="text/css" href="your/src?v=0.1">
Then if you modify the css, you can change the v value
<link rel="stylesheet" type="text/css" href="your/src?v=0.2">
Without have to delete cache or something else
Close your files in text editor and open again your files in text editor.Recheck the file address you want to open in wamp server or open again.
I have a simple reverse proxy server using Apache 2.4.20 which gets HTML files from an internal Apache web server. The page fetching and URL rewriting is working fine, but there is a problem occurring.
After any webpage is passed through the proxy, three things are incorrect: the contents of the head tag appears in the body, the head tag is missing and a mysterious ">" character in a "p" tag is added at the top of the body tag.
This extra <p>></p> code suggests to me something wrong with the detection of a HTML tag (it could be part of <head>). Also, even without content in the head tag, the body tag still begins with that weird code.
Proxied content - viewed in developer tools, Google Chrome browser:
Proxied content - original source of fetched file:
Original HTML file - opened directly from internal server filesystem:
Proxy server configuration file - section about transfer and ProxyHTML:
I know the original server is working correctly so this isn't causing the problem.
Here's a screenshot of the HTML file viewed directly from the original server in a browser (on the proxy server device), along with source code shown in Chrome Developer Tools:
Update: As expected, mod_proxy_html is the main cause of my problem (turning it off left the original file). However, this isn't a solution for me because I need the tool to rewrite relative URL references in the proxied documents. I read the documentation page but it didn't describe any features that undoubtedly caused my problem.
List of mod_proxy_html directives from the documentation which I think aren't relevant, some tested: ProxyHTMLBufSize, ProxyHTMLCharsetOut, ProxyHTMLDocType, ProxyHTMLEnable, ProxyHTMLEvents, ProxyHTMLExtended (default off), ProxyHTMLFixups (tried from suggestion), ProxyHTMLInterp, ProxyHTMLLinks, ProxyHTMLMeta (default off), ProxyHTMLStripComments, ProxyHTMLURLMap.
I had the same issue. However, on the same machine, other sites that used the same reverse-proxy worked fine, even when they have exactly the same config, but different URL. I could not understand... except after I have noticed that the files that had problem had the BOM signature at the beginning of the file!
This caused the ProxyHTML to be confused so much that it had removed the <head> and </head> tags.
After I have removed the BOM using the dos2unix utility, files were shown properly.
Your post gave me extra motivation for fighting this. Thanks.
you are using mod_proxy_html
This mod will try to affect HTML resources proxied through depending on the directives. My advice would be to remove the ProxyHTML directives and see what comes back. If it is unaffected then you know its something to do with mod_proxy_html.
Then look at adding this directive below the ProxyHTMLEnable
ProxyHTMLFixups off
Your problem is the document type definition
<!DOCTYPE html/>
the tag should not be closed. It should look like this:
<!DOCTYPE html>
mod_proxy_html tries to fix what it sees as an extra > character by wrapping it in paragraph.
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
My goal is to have a page, served by a web site, containing a to a stylesheet, that is available not on the web site, and not on a different web site, but on a local drive.
Something like;
<!DOCTYPE html>
<html>
<head>
<link href="/styles/something.css" rel="stylesheet" />
<link href="file:///C:/custom.css" rel="stylesheet" />
</head>
My initial research shows that browsers don't seem to support this, but I'm willing to be proved wrong, or discover some sneaky way of doing it. (I tried the above, that doesn't work.)
[I know, I know, you wanna know "why". This is for the site designer - it would allow him to edit the css locally while designing and see the effect on the "semi-live" site. ie the round-trip for edits would be very fast, and I wouldn't need to give him access to the actual site. By extension, for teaching purposes, it would allow multiple people to simultaneously practice their CSS skills locally]
Obviously any edits made to the local file will only be visible on that local computer - that's the whole idea. If you had 10 students each would see the same site with a different css file.
Well, if you can setup Apache on your machine, this is easily done.
This is assuming the question is this
I want to be able to have a site in a
central location (live) and allow users
accessing that site to be able to make
changes to the site by editing a local
file. These changes will only be
visible to the person making the
change and the rest will just see
whatever CSS is on their local copy.
So this means that you have to serve a local file from multiple computers and each person viewing the site may have a different looking copy. If I'm right, read on.
Setup a local environment (maybe with WAMP?) on all the machines you want to be able to allow local edits. The important thing is that everyone must have the same hostname defined (either localhost, or something else - don't forget to add it to your hosts file). Place the CSS file inside your webroot and add a link to your live site pointing to that link.
<link href="http://www.mysite.com/base.css" rel="stylesheet" />
<link href="http://localhost/custom.css" rel="stylesheet" />
And voila! Local editing.
Caveats
Everyone needs to have their files placed in the same local URL otherwise it won't work
You need to setup a local environment (very easy)
Just press Shift+F7 on Firefox (or Tools->Web Developer->Style Editor). In the window that opens you can import an entire file or you can also edit the styles loaded.
Obviously, you can't. But why not try it and find out if this didn't work?
If the purpose of your needs is only for testing, i'll advice you install web developer extension where you can add local CSS to a website - for testing only.
Just for the purpose of answering the question, yes he could serve a CSS file to your website, but he would have to have a server installed on his computer and a public access to his server IP.
Then in the href of the stylesheet you would write something like <link href="190.181.169.118/styles.css" rel="stylesheet" />.
Of course this is not the recommended solution, i would advise you to use some sort of browser extension / plug in for that.
Yes you can!! Just need Firefox as a browser and you also need add on WEB DEVELOPER installed on it...
It allows to disable the inline CSS and add user CSS...
Download the add on WEBDEVELOPER
Once installed...after you restart firefox you will get a menu on the firefox window in which click on the CSS menu which will allow you options to disable and add user CSS
You will have to disable the inline CSS to see the CSS applied by the user to full effect
When opening a file from your hard drive into your browser, where is the document root? To illustrate, given the following HTML code, if the page is opened from the local machine (file:///) then where should the css file be for the browser to find it?
<link href="/temp/test.css" rel="stylesheet" type="text/css" />
You can, but probably don't want to, set the document root on a per-file basis in the head of your file:
<base href="my-root">
It depends on what browser you use, but Internet Explorer, for example, would take you to the root directory of your harddrive (eg. C:/), while browsers such as Firefox does nothing.
On a Mac, the document root is what you see in the window that appears after you double click on the main hard drive icon on your desktop. The temp folder needs to be in there for a browser to find the CSS file as you have it written in your code.
Actually, you could also write the code like this:
<link href="file:///temp/test.css" rel="stylesheet" type="text/css" />
Eric, the document root is the folder in which your file is, wherever it may be.
As far as local, static html goes, unless you specify it, most browsers will take the location of the html file you are viewing as the root. So any css put in there can just be referenced by it's name only.
The lazy way to get the correct reference for your css file is to open it in your browser. Then just grab the url that you see there - something like: file:///blah/test.css and copy that into your stylesheet link on your html: <link href="file:///blah/test.css" rel="stylesheet" type="text/css">
Either that or you can just take the url for the html file and amend it to refer to the stylesheet.
Then your local page should load fine with the local stylesheet.
If you're interested in setting the document root, you might look at getting a web server installed on your machine, or, if you already have one (like Apache or IIS), storing your project-in-development in the web root of that server (htdocs in Apache, not entirely sure in IIS). If you'd rather leave your files where they are, you can set up virtual hosts and even map them to addresses that you can type into your browser (for example, I have a local.mrwarshaw.com address that resolves to the web root of my personal site's development folder).
If you're on Windows and don't want to mess around with setting up a server on your own, you could get a package like XAMPP or WAMPP, though bear in mind that those carry the extra weight of PHP and MySQL with them. Still, if you've got the space, they're a pretty easy drop-in development environment for your machine.