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;
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 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">
I was working on a print stylesheet earlier and came across a problem with IE8. I am using HTML5 and several layout tags including header, nav and footer.
For some reason in my print stylesheet the display:none; declaration on these tags is being ignored in IE8 (and I can only assume subsequent lower versions). I first thought that Developer Tools in IE9 could be causing a false representation, however I have a Windows XP installation in VirtualBox which shows the problem also.
My guess its because HTML5 tags aren't seen properly by anything below IE9. The print stylesheet hides the layout tags in Firefox and Chrome.
Is there anyway to get around this?
Edit:
Here is what I have at the moment:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/print.css" type="text/css" media="print" />
Ignore the PHP Statements, they are specific to my CMS which is WordPress.
Then I simply hide the layout tags in the print.css:
nav,footer {
display:none;
}
This works for IE9, Firefox, Chrome but not in anything lower than IE9. It seems to ignore HTML5 tags.
I suggest you try html5shiv. The main shiv does document.createElement() as you have but it's been optimized / minified like crazy. More importantly, it includes printshiv (IE Print Protector) which will let you style HTML5 elements for print.
Use Modernizr. In the Extra, make sure html5shiv /w printshiv is selected. Include this javascript library on your site and it should work like a charm.
Since all i can do is guess without actually seeing the code, my first guess would be that the html5 shiv that is being used after the css declarations, and the css simply skips the html 5 tags, without applying the css styles to them. Try setting the script at the very top, before any css link tags in the head.
You could try a workaraound using Javascript by including a pair of functions onbeforeprint and onafterprint in which you hide/show the content that should be display:none.
I highly recomend for the use of boilerplate for your trouble. Is a nice compilation for web standarts and some know and common issues in almost every browser. It use modernizr and have an awesome stylesheet that have a #media print that you can use for all your printing troubles in all browsers.
I'm trying to print this page under the link graded fabric ArcCom in IE and Firefox. However, the first page that I printed out appears blank and it is not a complete content. Does anybody know how to fix this by editing the HTML or any other code?
I reccomend creating a print stylesheet.
<link rel="stylesheet" type="text/css" href="print.css" media="print">