When am printing a page from internet explorer v11, the printed document contains the URL of the webpage which the client doesnt want to appear. I have searched various forms and articles for the solution but the effort gone in vain.
Is there a working solution to hide the url in IE 11?
Try it by css:
#print {
#page :footer {
display: none
}
#page :header {
display: none
}
}
This is often a browser-specific print setting.
See Firefox and Internet Explorer examples. The client will have to adjust their print settings in IE11 before printing the page.
sorry, we cant control the print job header and footer with css nor with Javascript, its browser and printer setting,
http://www.mintprintables.com/print-tips/header-footer-windows/
If the header and footer is a part of your web page than you can try to control it using CSS code.
Here, you want to access and change the IE browser page settings for print using code which is not possible.
User have to change their browser page settings for print and need to remove URL manually is only the way.
Related
I've been creating a website and a portion of the site is designed to be printed on tabloid paper in portrait mode. The problem I'm having is when the print dialog comes up in Chrome it's missing the "Layout" options.
In this screen shot, the left side shows how my dialog box looks vs. how it looks when I print other websites. The ironic thing is even other sites I've created have the option as shown on the right, which is the desired behavior.
My question is, what controls this behavior? How do I correct it? In searching the web the only mention I've see of this is when Chrome is displaying PDF files, but I'm displaying a web page.
Any insight you can give would be greatly appreciated.
Thanks in advance
If you have an #page size declaration in the print CSS, this will override (and hide) the orientation on the print dialog. To override a declaration that is set elsewhere (e.g. Bootstrap 4 does this) you can add:
#page {
size: auto;
}
Just a quick addition to the accepted answer..
For those who are unable to edit the css of the page you're trying to print, you can install the Chrome extension called 'Stylus' (link here), and create a new style with just the above suggestion:
#page {
size: auto;
}
This will enable the missing options from the print dialog on any/every web page..
I'm trying to include a header text in all pages of the document while printing as well as faxing using CSS #page rule. But it's somehow not working for me when i see the preview in Chrome. I'm checking this in jsfiddle. Here's my link for the code i have been working on Code Link
I know that using #media print content can be added. But i want to do this using #page css.
If you add
.subpage: after {
content: "name";
}
The content is added. But if you do the same thing as
#page {
#top-right {
content: "name";
}
}
It does not work. Is there a way to make this work?
This is exactly the way it works and your example is correct. However, modern browsers do no support #page just yet. You have to use software like Prince XML, PDF Reactor of Antenna House Formatter.
You can download a evaluation version of PrinceXML
pwavg is correct. None of currently-used renderers support #top-right rule, which is the reason why it is not working for you. You can see it here on Wikipedia (search for #top-right).
I know Wikipedia is not the most reliable/updated source, but still better than nothing, I guess. And at least on this particular page it looks relatively actively updated.
As far as I can remember, the only rendering engine that ever supported it (except Prince) was old Opera Presto renderer, but that is not developed anymore.
I'm using TinyMCE but the images for the icons don't show up in Internet Explorer. I've checked the discussion here, but I'm already doing the necessary code right.
In firebug when I'm using firefox, I can check the CSS and I do see that the image (img/icons.gif) is loading, so it must be loading in IE as well, but the toolbar is still blank. If I roll over the toolbar, I get the right tooltips and can figure out which button it is, which means the buttons in the advacned are working. I think the problem is in CSS.
I'm using the latest jQuery version of TinyMCE, and running IE9. When I try it in compatibility view of IE9, it does show up the icons.
Is there any specific CSS that needs to be tweaked for IE9?
Are you using a responsive layout? If so, try this:
.mceEditor img {
max-width: none;
}
In my case the reason was the blocking of download of fonts in the IE-Security-Settings. (IE -> Internet Options -> tab 'security' ) Here the screenshot of the settings in a German IE:
If you cannot change the security settings, You can find a proposal here in TinyMce UserGroup to use a skin that does not use fonts. You can download the skin 'lightgraynofonts' here. Extract the zip-file into a directory /tinymce/skins/lightgraynofonts and initialize the tinymce editor like this:
tinyMCE.init({
selector: ideditor,
theme: "modern",
skin: "lightgraynofonts",** ...
I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show.
when you then F5 the page, the background images all load in.
When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image.
Neither when you check the downloaded resources are there even any mention of the background-images downloading.
you then refresh the page and it works fine, tool-tip of the css url even shows a preview.
The bug only randomly happens on first load occasionally, no way to guarantee to reproduce this.
Also its worth to note, it you untick then retick the background-image property on chrome it then downloads and displays the image.
I've got a piece of jquery that solves the issue but as you can see its hardly very elegant!
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);
});
this happens on every instance of windows in multiple versions of chrome.
any ideas would be great! thankyou!
you might be able to see it happen on http://ensa.ac.uk
here is a video demonstration # http://youtu.be/oLTyhk5rXgE
Just to note.
The problem had been solved.
The issue was that the browser downloads all the css background images last. So if you refresh the page before its finished downloading the images, when the page loads again it loads from the cache. but because the images did not fully download they dont show correctly.
First of all, fix these:
backg1round-color: #c7dfe3;
backg1round-color: rgba(255,255,255,0.67);
If images is a subfolder then use
url('images/logo-bg2.jpg');
instead of
url('/images/logo-bg2.jpg');
in main.css
Try this instead. Not tested though;
$('*').each(function(){
var bg = $(this).css('background');
$(this).css('background', 'none');
$(this).css('background', bg);
});
And make relevant changes (ie, background-image to background) in your CSS also.
OR try;
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image','url(bg)'); // or try url("bg") i am confused :P
});
From some search and research I came to a conclution;
The way I would tackle this is with classes. Have a separate CSS classes for each of the states, then simply use jQuery to change the class. This would ensure that all of the images are actually downloaded and available when you set the class -- which is where I think Chrome is failing (probably all WebKit browsers would do this)
Change css class as:
#nav
{
background-image: url(../images/logo-bg2.jpg);
height: 180px;
}
Owen,
I still see this problem on the application that I'm working on. I know this is also a hacky solution, but it's a little less hacky than the jquery solution that you had posted. I simply threw a version number based on time after the css include and it
e.g.
" rel="stylesheet" type="text/css" />
I know that this causes the css to never be cached, but I have not found any other solution.
I need to prepare print css style for some page. It's possible to have footer on every printed page?
I tried the code, I've found on the web:
display:block;position:fixed; bottom:0px;
but it works only in Firefox.
I can try to fix it with table, but in Q. here: CSS: Repeat table headers in print mode is info, that it doesn't work in IE5 (maybe I made some error, but it seems, that it doesn't work even in IE7).
Does anybody fixed problem with printing footer on every page in IE? Doesn't matter if with tables or without them.
Thanks for help.
I do not think it is possible to print headers and footer using IE current, since Even in IE8 it is compliance to CSS 2.1. But there are other tweaks to get around the problem. Hope this URL will help: http://msdn.microsoft.com/en-us/library/dd433064(VS.85).aspx.
PS: The URL you referenced, on the bottom of the page specifically said works only on safari.