I'm getting started building out a blog with Middleman using the middleman-blog extension. Everything is working great so far on the home page. The problem occurs when I click on a link to see the full blog post. The full blog post page has no CSS being applied to it. After further inspection, I am receiving a 404 error. I fixed it on Dev Tools by moving 3 levels up in my CSS link href like so:
BEFORE (works in Home Page but not in Article pages)
<link rel="stylesheet" href="stylesheets/global.sass">
AFTER (moving two levels up no longer gives me a 404)
<link rel="stylesheet" href="../../../stylesheets/global.sass">
My question is: What do I need to modify so that Article Pages look for the CSS 3 levels up while the home page remains intact?
In your case, the easiest way would be to use webroot-relative paths.
To recap, you're using a regular relative path...
<link rel="stylesheet" href="stylesheets/global.sass">
If your page is at http://example.com/index.html, then the browser will look for http://example.com/stylesheets/global.sass.
But if your page is at http://example.com/blogs/2013/03/20/blogpost.html, the browser will look for http://example.com/blogs/2013/03/20/stylesheets/global.sass
Now, the solution...
If you add a slash to the beginning of the path, you make that relative path into a webroot-relative path. The web browser will start looking for the file at the webroot...
<link rel="stylesheet" href="/stylesheets/global.sass">
So, regardless of whether your page is at http://example.com/index.html, http://example.com/blogs/2013/03/20/blogpost.html or http://example.com/a/b/c/d/e/f/g/h/i/j/k/l/m/n/o/p/page.html, the browser will, in all cases, look for the file at http://example.com/stylesheets/global.sass.
The Adobe Dreamweaver documentation on linking and navigation explains this a bit more completely.
Related
I'm using Swiperjs in my website. Today I saw that swiper is not working, and in console were 404 errors, because css and js files could not be found.
I am using swiper from CDN, in the way that is written on swiperjs website https://swiperjs.com/get-started/
Now the problem: when I developed my website, there was a different url to swiper CDN (writen in swiperjs website, last year).
In my code, before, was this, and it worked:
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
Today, this code gave me errors. So I changed to:
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
And this now works.
My question is:
how can I be sure that in future there won't be any changes like this? Am I more safe if I download these scripts and include them in project?
I thought that CDN should always work.
thank you for your information. finally my gallery start to showing images. Realy appreciate about your search in change of swiper css resources. I think we should donate/bought the copy of swiper css and install to our website server, CMIIW.
I've noticed in my ELMAH log a few times the following error:
The controller for path '/assets/css/null' was not found or does not implement IController.
There's only one place on the site which references this file: inside our _CSS.cshtml view.
<link rel="stylesheet" type="text/css" href="/assets/css/style.css">
How can this somehow turn the 'style.css' into 'null'? I've not actually seen the problem happening but our log file shows that it has, and the user agent string identifies the browser as IE8. I've refreshed the page that is shown as the HTTP_REFERER for this error but can't simulate it myself.
It's a bit mystifying!
Thanks
How to get favicon website with Chromium Embedded Framework? I could look at the source code and get the url of the icon, but some sites, like Facebook, do not use a standard procedure to add a favicon, then, how do I get the favicon? Thanks.
The rules for the favicon are all explained on the Wikipedia page.
The standards use a link element with a rel attribute in the <head> section of the document to specify the file format, file name and a location can be specified for any Web site directory.
You need to look, inside the <head> element, for link elements of this form:
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
or
<link rel="icon" type="image/vnd.microsoft.icon"
href="http://example.com/image.ico" />
If you don't find such links, then use the fall back of looking for favicon.ico at the root directory.
I'm not certain why you think that Facebook don't follow the standard. I just looked at an FB page which contained this:
<link rel="shortcut icon"
href="http://static.ak.fbcdn.net/rsrc.php/yP/r/Ivn-CVe5TGK.ico" />
It's not possible for websites to use some other mechanism to get favicons to browsers. The browsers follow the well-defined rules for getting favicons. If a website did something different, the browser would not find the favicon.
From this blog entry, the best practice for cross-browser supported favicons is to include
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/image.ico"> <!-- For good browsers. -->
<link rel="SHORTCUT ICON" href="http://www.example.com/image.ico"/> <!-- For Internet Explorer-->
The first link is for real browsers and the second is for ie rubbish. On some websites you will see type="image/x-icon" in the link tag. There was a time when this was the correct implementation, but image/x-icon has now been superceded by image/vnd.microsoft.icon which is now part of the IANA standard for MIME types.
By the way, older versions of ie just looked for a file name /favicon.ico which was hard-coded. If you wanted to be ultra safe, you should name your favicon as favicon.ico. Of course that does not help you if your domain hosts multiple web-sites for different purposes.
Note: If you don't need to support favicons for IE, then you are then free to use png, gif and jpg formats for your favicon, as indicated below...
<link rel="icon" type="image/png" href="http://www.example.com/image.png">
<link rel="icon" type="image/gif" href="http://www.example.com/image.gif">
<link rel="icon" type="image/jpeg" href="http://www.example.com/image.jpg">
CEF1 has a callback named OnFaviconURLChange that's called whenever the favicon URL for a page changes. CEF3 doesn't support this callback yet, according to this bug in the CEF issue tracker.
You need to implement a client handler and at least CefDisplayHandler. This class have the OnFaviconURLChange (not sure in what version did appear, but for sure is present in branch 2357 and later).
C++ prototype is:
void OnFaviconURLChange(CefRefPtr<CefBrowser> browser,
const std::vector<CefString>& icon_urls);
icon_urls usually contains a single entry (if any), which is the URL of the favicon.
Consider also checking the favicon URL for its security, I passed the URL to a HTMLayout application only to discover that was on a self-signed https:// resource and all sorts of wininet security error (InternetErrorDlg for example) started throwing all the place.
I'm developing a new webapp based on the orbeon samples. I'm using orbeon 3.9 CE. I got VERY ERRATIC behavior when I use custom ressources. They are placed in following folders :
/orbeon/WEB-INF/resources/config/theme/*.css
/orbeon/WEB-INF/resources/config/theme/*.js
/orbeon/WEB-INF/resources/config/theme/images/*.jpg
In my custom theme file (/orbeon/WEB-INF/resources/config/theme-xnotes.xsl), they are linked like this (a few examples) :
<xhtml:link rel="stylesheet" href="/config/theme/bootstrap.css" type="text/css" media="all"/>
<xhtml:script src="/config/theme/bootstrap.js"/>
<xhtml:link rel="icon" href="/config/theme/images/icone_grue.png" type="image/png"/>
When I point my browser at the application (http://localhost:8080/orbeon), it SOMETIMES work, SOMETIMES doesn't (css are ignored, page transitions are wrong) and SOMETIMES it works partially (css are ok, js not, a few images are ok, others are not and so on)
When I look at the page source code, the links seems to be ok, to take the sames examples as above :
<link rel="stylesheet" href="/orbeon/config/theme/bootstrap.css" type="text/css" media="all">
<script src="/orbeon/config/theme/bootstrap.js">
<link rel="icon" href="/orbeon/config/theme/images/icone_grue.png" type="image/png">
But some links are not valid and point to the root of the application. The main problem is that I just can't make this behavior consistent to isolate the issue(s).
Help really appreciated ! It's driving me crazy...
I don't think there can be more than one GET or POST per request, but per open connection certainly.
However, this might be related to authentication since you mention j_security_check. Can you try to make sure that the CSS and other resources are not protected by form authentication?
i have this line in my asp.net-mvc page.
<link rel="icon" type="image/x-icon" href="/content/images/icons/favicon.ico" />
the favicon shows up fine in Firefox but it doesn't show up in IE8 at all.
any suggestions on why this doesn't work in IE8 ?
also, under RegisterRoutes, i have this:
routes.IgnoreRoute("favicon.ico");
i have tried everything on this page and it still doesn't seem to work for IE8
The Wikipedia article about favicon has a pretty good overview on how you specify the favicon and which file formats are supported.
The agreed standards is a bit in conflict with the de-facto standards. For example, the non-standard rel value shortcut icon has wider support than the standard value icon. You might want both a standard and a non-standard link tag to cover more ground.
Most browsers will pick up the favicon if you simply put it in the root folder, so that would be the best place to put it even if you also have a link tag that points to it.
Even if you do everything right, there is still no guarantee that the favicon will show up in any specific browser. Sometimes it simply doesn't work, for some unknown reason.
This seems to be an ASPX pages problem. I have never been able to show a favicon in any page for IE (all others yes Chrome, FF and safari) the only sites that I've seen that are the exeption to that rule are bing.com, msdn.com and others that belong to MS and run on asp.net. There is something that they are not telling us!
Even world-known sites can't show in IE eg: manu.com (most browsed sports team in the world) aspx site and fails to display the favicon on IE. manu.com/favicon.ico does show the icon.
Use "shortcut icon" instead
<link rel="shortcut icon" href="http://mydomain.com/content/images/icons/favicon.ico" />
This wikipedia page lists the compatibility
I would add that ideally for best browser compatibility the icon is best located in the root directory named favicon.ico if you are able to do this as most browsers will look there by default even without the link tag.
Is this locally?
Apparently: IE8 will never display the icon if the file is on your hard disk. It has to be on the internet. Other browers such as firefox will however show the icon even if they are on your hard disk.
EDIT
As this is happening locally and on the web-server - I would suggest saving down the stackoverflow icon to the same place as your icon and change the icon link accordingly. If it then works the problem is possibly with the file type of your icon file.
For IE, the Favicon must be in the root.
e.g
<link rel="icon" type="image/x-icon" href='<%: Url.Content("~/favicon.ico") %>' />