I am working on a website that isn't loading properly on Mozilla Firefox.
It loads great on Google Chrome, Opera and Safari but experiencing troubles loading on Mozilla and IE.
Using Bootstrap, HTML and CSS for the website.
Website link: http://alumniapp.in
Problems being faced on Mozilla: It loads the Bootstrap Stylesheet but not my style.css.
Problems being faced on IE: Does not work at all.
Any insight is extremely helpful. This is the first problem I haven't been able to solve.
Many thanks.
try to change
<link href="style.css" rel="stylesheet" type="style/css">
to
<link rel="stylesheet" type="text/css" href="style.css">
This should fix the problem.
Related
I am working on building a website using GitHub Pages and am having a bit of trouble getting the favicon to display properly. My understanding is that, due to compatibility concerns, you need to add various custom bits of code to make sure that your favicon displays correctly across different browsers.
I am currently using Safari 14.0.3 and Google Chrome to test this.
I have included the following HTML code to display my favicon:
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon_2.png">
<link rel="icon" href="/images/favicon_2.png">
The only problem with this is that it is not displaying on the tab bar in Safari. It correctly displays on Google Chrome and in the search bar at the top of Safari, but not in the tab bar. I have included images below for reference:
Where it is showing correctly in Safari:
Where it is not showing in Safari:
Note: I am trying to get the globe favicon to display.
I have read some similar questions that have talked about clearing cache etc., but none of these seem to have worked.
What I have tried so far:
Clearing all of my Safari Cache (clearing all of the history)
Emptying all of the Cache
Deleting all of the files in the Safari Favicon Cache folder on my Mac
When I did two, and then initially launched Safari, the correct favicon briefly displayed in the tab bar before switching back to the other one.
I am a little bit unsure of what to do here. Does anyone have any ideas? Do I need to add additional code? Any links to any examples or resources would be greatly appreciated. Also, as a side note, are there any links to documentation where I can read further about what all of the different rel="" do here?
Thanks.
you can try use this tool:
https://realfavicongenerator.net/
it's worked for me
I figured it out -
There are two different lines of HTML code required to make favicons display on Safari properly. Changing the line:
<link rel="icon" href="/images/favicon.ico?v=M44lzPylqQ">
will make the favicon display in the top search bar on Safari as well as on Google Chrome.
The favicon displayed on a Safari tab is managed differently. This requires the use of HTML code for the Apple mask-icon for Safari Pinned Tabs. Consequently, this requires the editing the following code below:
<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ"
color="#000000">
Editing this line will allow for the favicon to be displayed on the Safari tab.
Note: Both lines are necessary for the favicon to display in both the Safari search bar and the Safari tabs.
First, check that there aren’t any other web pages on your site that are setting the favicon. If there aren’t it is just a little safari bug.
I have had a similar issue and it seems that safari will hold onto the favicon for extended periods of time even if the code is changed. Unfortunately, you may just have to wait.
For me, the problem was that Safari doesn't support SVG. I should have known not to trust W3schools when it said that Safari supports it (I've submitted a page correction). Based on https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 which I found via https://caniuse.com/link-icon-svg, the correct method for having an SVG icon (in supported browsers) while still supporting old Safari users appears to be:
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
Unless you've already got an .ico file, in that case you might as well use that file instead of a PNG. Note that you must now use sizes=any to trick Chrome into doing the right thing and using the SVG which it supports.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
I'm trying to use a Google font on my website in different weights. Here's the code I'm using:
<link href="//fonts.googleapis.com/css?family=Roboto:100,300,500" rel="stylesheet">
Everything works fine in Chrome and Safari. But in IE, everything looks bold, no matter what font-weight I set an element to have.
I have found one work around. If I load each font-weight individually (with the code below), everything works in IE.
<link href="//fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
That works, but it's inefficient. Anyone have a better solution?
Thanks!
Try putting the proper google fonts suggested line:
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,500' rel='stylesheet' type='text/css'>
Or put the fonts into your css file:
#import url(https://fonts.googleapis.com/css?family=Roboto:100,300,500);
Don't know what else could help, sorry.
It turns out the issue was that IE was set to load intranet sites in compatibility mode. Since the dev environment is on the local network (and thus an intranet site), IE was switching into compatibility mode without my knowledge. Turning that setting off fixed the issue
I stumbled across an issue with Bootstrap Glyphicons not working with Firefox but working with other browsers faultlessly.
Q:How to make Glyphicons from Bootstrap 3.1.1 work with firefox?
(I answered this myself and this was part of the original post)
When i sought information as to what might be causing this issue there are only a few articles that did not solve my issue focusing mainly on older versions and not explaining the required fix.
I then after some time worked out that by solely removing the 'www' from the <link href='www.domain.co.uk'> to the bootstrap.css the glyphicons began working within Firefox as well.
This appears to be due to the following error:
Cross-Origin Request Blocked:
I thought perhaps this worth sharing as seems there has been a fair number of people with similar issues as myself without there being any articles covering this method of fix.
Change
<link href="http://www.domain.co.uk/css/bootstrap.css" rel="stylesheet">
to
This <link href="http://domain.co.uk/css/bootstrap.css" rel="stylesheet">
The issue is the following error:
Cross-Origin Request Blocked:
I fixed this by removing the www from the <link href='http://www.domain.co.uk'>
Change <link href="http://www.domain.co.uk/css/bootstrap.css" rel="stylesheet">
to
This <link href="http://domain.co.uk/css/bootstrap.css" rel="stylesheet">
This allows the Glyphicons to work on all browsers including firefox.
#Damathryx solution for this issue is the real solution for working locally:
This only happens when you work locally and not from files on a
server. You have to change a setting in Firefox to display the
glyphicons when you develop locally.
-open about:config in your address in Firefox
-Then search for security.fileuri.strict_origin_policy property and change it from "true" to "false".
I'm just writing a framework for responsive web development. I just started yesterday and began with the css today. Everything works fine in Chrome as well as in IE, but Firefox doesn't recognize the stylsheets at all.
I did validate everything and didn't get any errors.
This is the way I integrated the CSS:
<link rel="stylesheet" type="text/css" href="/WebDesign/Projects/Framework/css/reset.css" />
Oh, and maybe it's important: I only used the <!DOCTYPE html> as declaration.
Thanks for any answer :)
If the style sheet is in the same root, you don't really need the whole link to the root when getting the style:
<link rel="stylesheet" href="./styles.css" type="text/CSS" />
I know this question has been asked but I haven't found the answer to my question.
My website, http://www.rastorant.com isn't displaying in Opera and Firefox, the css and some of the html is just not there for some reason. I have validated the site multiple times and it works perfectly in Safari, Chrome and IE. The site's in Bulgarian but it's very simple.
There are six cards that link to the rest of the site, they go in this order:
Gallery, Menu, Contact info,
Birthdays, Events, New Years.
The html is very short if you look at the source and the css is the same across all pages.
You use \ in your urls, which causes 404s in firefox. Use / instead.
e.g use
<link href="stylesheets/style.css" rel="stylesheet" style="text/css">
instead of
<link href="stylesheets\style.css" rel="stylesheet" style="text/css">