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">
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">
This is by far one of the weirdest things I've seen. I decided to check back on a site I made a while ago, and of course something was off. I now mainly use Firefox and noticed the formatting looked odd. I switched to Chrome and everything looked great. I switched to Edge and everything was wrong again. I inspected element in all three and only in chrome did it show the CSS for each included class in the elements (login button, text entry boxes). In Edge and Firefox, only the CSS for the last class seemed to be included.
The site is https://avonctnhs.org
Does anyone have any idea what is going on here? The classes are set in HTML, there is no JavaScript adding the classes at runtime, etc; just HTML loaded from a file on a server.
Thank you so very much.
Edit: I spent a while searching and the only answers I could find where for people trying to add classes in JavaScript or people with typos that didn't work in any browser.
Additionally, all the code that should be needed should be visible with a nice quick inspect element.
Your CSS files fail to load because your page relies on HTML imports which is not supported by all the browsers.
Your source code has the following lines which should be replaced.
<!-- Additional Headers -->
<link rel="import" href="/core/custom-elements/text-input/text-input.html">
<link rel="import" href="/core/custom-elements/button/button.html">
The above lines can be replaced with the below code which is actually the contents of the above two files.
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
This should fix your issue. Here is an excerpt from MDN which states Firefox doesn't yet support HTML imports.
Firefox will not ship HTML Imports in its current form. See this status update for more information. Until there is a consensus on the standard or alternative mechanisms are worked out, you can use a polyfill such as Google's webcomponents.js.
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.
I have a stylesheet that is working perfectly in IE, removing headers and footers and displaying my content in a more easy-to-print way. however when printing in chrome, it does not work. If i emulate a print media query in the developer tools it does.
I suspect this is because Chrome converts the document into a pdf before printing. Is there any way around this?
in my html code, my css files are linked as follows:
<link href="/css/form.css" rel="stylesheet" type="text/css" />
<link href="../content/PrintConfirmation.css" rel="stylesheet" media="print"/>
as i said, this works perfectly in IE when printing, but in chrome when going to print, it doesnt.
Duplicate question, See answer: Chrome: Print preview differs from simulate CSS media print
Particularly transition: none !important;
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".