Is there a way, without setting up a web server, to make Firefox or Chrome treat a locally stored site's root as it would be if viewed on the web?
So that when an HTML file is opened that contains URLs beginning with /
<link rel="stylesheet" href="/css/style.css">
instead of the browser searching for
file:///Users/me/Documents/Websites/Site/httpdocs/css/style.css
...and finding nothing, it would instead look for the file relative to httpdocs (because the browser was instructed to), and therefor find style.css?
When building a site that has root path URLs it's annoying that I can't view the pages in my browser without copying the whole site to the computer's root folder. All CSS, images, and scripts are not found because they are being searched for in my local machine's root. The URLs should remain as root paths however, because that will be "correct" once the site goes online.
Setting up a web server just for this purpose, on projects where I don't need it for anything else (when PHP and the like are not needed), is inconvenient.
Is there perhaps a setting or add-on that can be used to make a browser treat a specific site root folder stored locally as if it were hosted on the web? Thanks.
Related
Situation
Recently I started a photo gallery on my server — https://mailo.svetel.cz/photos.
This gallery is generated by gem (third-party plugin). All the photo assets are located in /photos. In HTML the image assets are referenced via relative path
The strange part is, browser (Safari and Firefox) is loading it as if the path is absolute.
Pretty logically server responds with 404, because there is asset https://mailo.svetel.cz/photos/po_tydnu_venku/thumbs/DSC2433.jpg, but the browser is asking for https://mailo.svetel.cz/po_tydnu_venku/thumbs/DSC2433.jpg .
Before uploading, I did test the page in same browsers and the same code works locally.
Questions
Why does browser think I am giving him absolute path?
Do I need to configure something special for relative addresses when using HTTPS?
Do I need to configure some header in nginx to use relative addresses?
The root path for https://mailo.svetel.cz/photos is https://mailo.svetel.cz/
To make the browser see /photos as a folder, you need to add the directory separator at the end: https://mailo.svetel.cz/photos/
I am using bootstrap.min.css and my entire website uses this single CSS file for all pages. There are 179 pages on my website and my bootstrap.min.css is just 117Kb
is there any way to store this file on the client's system when he opens home page
and when user moves to the next page how can I use CSS file stored on the client's system ?
this how am linking file this right method
<link href="../../../css/proper align.css" rel="stylesheet">
If the css file is accessed via the exactly same URL (same server, same path, same filename, no attached parameters) and the caching headers are set properly (which they are by default), the file will be cached by the browser.
You can check this behavior using the development tools of your browser.
Here you have a screenshot from the devtools of Google Chrome (hit F12). On the network tab I have selected bootstrap.min.css and I see that it is served from the browsers cache. All fine here. If you don't get it from cache, you can check the caching settings inside the response header.
(http://imgur.com/wSliBMk)
By default the .css file will get cached on client side.
This means it will only be downloaded once for all the 179 pages you have on you website.
All of this caching and reading from cache is handled by the client browser.
If you are not planning on doing any weird "magic" with the css file you won't have to worry about it.
If you reference the same path in the html file the browser will "know" that it has to use the already cached file.
This cache will most of the time persist after the client closes the browser and returns to your website a later time.
Well, the file IS stored on the clients system, it's called caching and is done automatically by browsers. If you reference the same file on all pages, then it's loaded from the same location.
If you worry about bandwidth, I recommend using a CDN-service for your Bootstrap file.
(eg. "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css")
My first assignment in web programming class is to design a website without browser side and server side script.
I made an HTML 5 document, linked to a CSS file, all of them were validated in W3C validator, everything is good. I test the web page locally on my laptop on Chrome36, Firefox30 and IE11, all good.
But I'm required to upload it to University's server, all good in Chrome and firefox but IE, however I tried to put it on the server on my laptop and access it on IE from University's PC, it behaves all good.
Apache server on my laptop, access from Uni's PC
On Uni's server, access from Uni's PC
My lecturer says I'll lose mark if it behaves so, what could be the problem and how can I solve it? Do server settings affect html's behave? Thanks!
Also, if you want, you can access it via deakin.edu.au/~yshengk/a1
Maybe the html file can't see your css? Check file path's.
The only change I would see is the file and folder path looks different. Check whether you have used correct file/folder path. Try changing the CSS, JS, images folder path between relative folder path or absolute folder path.
I have a webpage where the images are not being found (running chrome). I synced the remote directory with my local one, so all files should be identical, however I can see the images locally but not on the remote site. Can anyone explain why?
I have the following directory where my index.html is:
icons/circle/*.png, where * is some generic social media i.e. (facebook, twitter, etc.)
using this code to show it on html
<img class="social-media" src="icons/circle/facebook.png">
But it only shows when I view my webpage locally, not when everything is uploaded to the server.
See webpage footer at dmacmill.com
Full directory listing:
Temp solution
I decided to just create another folder to hold all my icons, now they work for some reason. Still never found out the underlying cause of this.
This is probably a stupid question, but its hard to search for effectively. I am have defined the following:
<img src='/images/image_name.ico' />
This properly creates the path to the root directory then the images directory in all of the browsers I have tested, including IE10, but IE9 will not get the path right. Is there a known problem with using / to indicate the site root with IE 9? I just get a broken image even though the file exists at that path.
No. There are no known issues with IE's ability to resolve root relative URIs.
The usual debug steps you should take are: Check your server logs and browser debug tools to see what is actually being requested, if the request was successful, and if the correct content-type is being specified. Make sure the image file is OK. Check the browser can resolve the URL and open the image directly (without going through a webpage).