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.
Related
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.
I'm trying to change what shows up in the margins when I print out a page from my website. I've read here that it should be possible to set the content of "page-margin boxes" like so:
#page {
#top-center {
content: "Page " counter(page);
}
}
...But no matter what I try, this style seems to be completely ignored. I've tried in Chrome, Firefox, and Edge. I'm starting to wonder if the print preview functionality each browser has is somehow overriding this, as they provide their own margin content?
Has anybody ever got this to work? I assume the major browsers should handle this as caniuse.com says so (I blindly believe it :) ) and multiple examples I've found online imply that others have met with success.
In case this helps anyone, I've found that most modern browsers - including all three I tested with (Chrome, Firefox, Edge) - do not support #page margin boxes at this point in time!
I learned this from user alex's comment on an answer to another SO question here -
Page numbers with CSS/HTML
And his source was https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)#Grammar_and_rules
I use CSS to count sections in an HTML document:
body {counter-reset: sect;}
section:before {
counter-increment: sect;
content: 'Section ' counter(sect, upper-alpha);
}
The result is:
Section A
Section B
How can I style the counter to output numbers written in English?
Section One
Section Two
I have a solution via jQuery (using an array of strings) but I am looking to only use CSS. Is there a way to do this without using JavaScript?
Not yet. There's a spec in the works that allows setting custom glyphs and repeaters but it's currently still in working draft status and I'm not aware of any browsers supporting it yet. I just tried Chrome latest beta and it certainly doesn't, and MDN doesn't even seem to be aware yet of its existence despite the current version being over 2 years old already.
I have just found something very weird while developing a website. While trying to get a div element to display across the top of the screen, I noticed that I wasn't achieving a desired result in any browser except for old versions of IE. In order to test some different code, instead of deleting the faulty line, I used '//' to comment it out (I'm not really even sure if that works in css) but what happened was, the compatible browsers used the uncommented code, while IE used the code marked by '//'. here is the code:
#ban-menu-div{
position:fixed;top:0;
//position:relative; //<-- IE keeps the banner with rel pos while the other
display:block; // browsers used fixed
margin:auto;
padding:0px;
width:100%;
text-align:center;
background:black;
}
so basically, it seems as though // can be used to instruct newer browsers to ignore specific lines of code, and instruct older versions of IE to use it? If this is common practice someone please let me know. it sure makes developing for older browsers a hell of a lot easier
// is not a valid CSS comment.
Browsers that parse CSS properly will ignore //position because //position is not a valid property name (details are here, property -> IDENT S* -> follow it through).
This only works in IE7 due to its well known bug of accepting properties with junk prepended to them.
It's not just // that works. IE7 will have red text here:
body {
!/!*//color: red;
}
This is most typically exploited with *, for example *display: inline; as part of the display: inline-block workaround for IE7.
Don't fall into the temptation of commenting out single lines or blocks and not using the correct /* */ couple. A customer who has access to the website folder just chose by himself to comment out a single line using this:
//* comment here *//
Actually, Chrome and Safari will ignore ANYTHING that follows this line. I would call it a "css killer". :D
What is the best way to handle browser-specific CSS file loading? Assume you are running in the context of a proper MVC framework.
Here are some options, you are free to discuss the pros and cons of these options as well as any other methods you know of, and prefer:
Server-side solution: use the controller (e.g. servlet) to analyze the user-agent header in the request and return the proper CSS file in the view.
Use browser specific hacks to load files, such as: <!--[if IE]> ... <![endif]-->
Load CSS files asynchronously in client side by inspecting user-agent and adding respective files
Use a client side framework to handle browser-specifics (such as jQuery browser-specific css rules)
I'm going to suggest a 4th option...
Don't use browser specific CSS files.
Seriously, don't do it.
It is possible to write one CSS implementation for all standards compliant browsers... it will only need to be lightly hacked to work with IE.
Maintaining browser specific CSS files will become a nightmare on any sizable website.
Design a single stylesheet that works cross-browser. Get IE as close as you can, and then use IE Condition Comments to load the rest.
IE Conditional Comments are the accepted way to load IE (including version) specific CSS rules.
They are most definitely not a hack.
Don't use anything that relys on user-agent as that is easy to spoof. I also stay away from client side CSS frameworks because (for the most part) they are just glorified table layouts (you can check out this StackOverflow post for more details on frameworks).
I think the idea is to deliver minified CSS in one file that is appropriate for the browser which is determined by the server.
Google web toolkit (GWT) uses the controller to deliver just this, and I'm sure is the standard best practice.
Conditional tags don't work for every browser. Javascript loads too late and gives you overhead.
here is an example of part of a css file i have where i handle browser specific stuff for a drupal theme I implemented... this handles webkit (safari/chrome,etc), gecko (firefox) and khtml (konqueror). the page work normally for ie7/8
using 1 file saves an http request and makes things clearer (IMHO)
/**
* IE6 fixes
*/
* html ul.primary-links {
height: 23px;
}
/***
* WebKit fixes
*/
#media screen and (-webkit-min-device-pixel-ratio:0)
{
ul.primary-links {
height: 24px;
}
}
/***
* Gecko fixes
*/
#-moz-document url-prefix(){
ul.primary-links {
height: 28px !important;
}
}
/***
* KHTML fixes
*/
#media screen and (-khtml-min-device-pixel-ratio:0)
{
ul.primary-links {
height: 22px;
}
}
hope this helps.
I'd prefer frameworks, they work great (mostly) and help you save a lot of time. Because instead of rediscovering the solutions again, some one has already done it for you.