|
CSS - Printing Html - Styles In Print Css Ignored
Hi, I've got a webpage that I need to print almost exactly as it appears on the screen.
Currently I've got two style sheets linked to, one for the 'screen' and one for 'print'. I know this is working because the top line of my print CSS is: @page {size: A4 landscape;} however I can't seem to alter any of the elements on the print CSS. If I adjust the width, height, even the color it always inherits the stuff from the screen CSS and uses that, ignoring the print CSS. In fact, I can't even define a margin for my page using @page {margin...}. The two style sheets look like this: for the screen: body {..... etc etc all works fine... for the print: @page {size: A4 landscape;margin:3cm;} body {.... etc ALMOST same as above the print CSS is essentially the same as the screen one, except that I want to define different widths and heights for table elements so I can fill an A4 page with a margin. The printing process ignores the widths and heights from the print CSS, and even ignores the margin definitions. It must be reading the print CSS because it knowns to print landscape. What am I doing wrong, or am I completely misusing the @page and media commands? Thanks in advance. Andy Similar TutorialsI've looked over my syntax a hundred times, but I can't get the print preview in IE to match the style declarations I've put in my css document. None of them work, so obviously it's something i've messed up in the overall structure of the code, and not minor errors. This is at the end of my .css document that I linked to my html: Code:
@media print {body {font-family: arial, helvetica, sans-serif}
a {text-decoration: none; color:pink}
img {border-width: 0px}
#hideprint {display: none}
#instruction {display: none}
#lpmap {page-break-after: always}
.notes {page-break-inside: avoid; margin: 30px 30px 30px 30px; }}
Thanks Hi, I have a series of divs, each of which contain some text and an image. The images are floated either left or write, so the text wraps around them. It works as intended in screen view, but when I try to print, the images lose their float in IE (the text no longer wraps around them). It works fine in FF. Any ideas? Thanks I've been involved in building an intranet site with about 1200 pages. Now that it's been launched we've found problems in printing many of the pages - there are blank pages printing before the content, probably because of floated divs being pushed down when the width is restricted to A4. (That's a guess). Now I know that what we should have done was create a print style sheet which would have solved this problem easily, but if we do that we'll have to place the link to it in every page, which involves quite a lot of signing-out of 1200 pages etc. I'm prepared to do that if there isn't another way but I wondered if there's any way the existing external style sheet can be amended so it loads (imports) the print styles dependent on some statement or other. I'm doubtful, but if anyone knows of a method that involves editing the one stylesheet rather than the 1200 pages I'd love to hear it! Hello, I'm design the web page printing feature, i apply a print button for trigger out the window.print() javascript command and it will set the button.style.display to none after button clicked. Whereas, It is happen when user using the CRTL-P and the button will continuous remain on printing paper . I wonder any optimize way to solve this problem? Can it be solve in CSS styling? How would one print an Internet document double sided? For instance, to create a brochure of products, listings etc... with double-sided pages. Thanks, Zane Because these are difficult issues to resolve from W3C documentation, I thought I'd post my notes on printing for HTML (which apply likewise to saving HTML as PDF, etc., or loading HTML pages into further client applications, to be saved as other formats): In printing HTML output, user agents ("browsers") will not honor usual CSS code, dedicated to screen output. Similarly, functions such as loading an HTML file into a document editor or saving an HTML page to PDF will not honor screen-dedicated CSS, either. Browsers are not equipped for instance with logic to determine whether to discard left and right margins or padding, surrounding the usual web page. Similarly, some content may be undesirable to print, as is. Images for instance may need to be scaled to a different size; font-sizes and weights may need to be adjusted, and so forth. The whole trick to accommodating the separate needs of screen and print output is to deploy separate media-specific ("screen"/"print") style sheets. When you save an HTML page as PDF, or when you load an HTML page into a document, the client application honors the CSS of the "print"-specific implementation. ------------------------------------------------- LINKING IN SEPARATE CSS FILES: For printing and file conversion functions to honor CSS, you have to link in media-specific style sheets as follows (media="screen" and media="print"): <head> <link href="css-pfmpe.css" type="text/css"rel="stylesheet" media="screen" /> <link href="css-pfmpe-print.css" type="text/css"rel="stylesheet" media="print" /> </head> ------------------------------------------------- ENCLOSURE OF MEDIA-SPECIFIC CSS CODE IN EACH FILE: All the CSS declarations of your "screen" style sheet (css-pfmpe.css) must be enclosed as follows: @media screen { /* all css code here */ } All the CSS declarations of your "print" style sheet (css-pfmpe-print.css) must be enclosed as follows: @media print { /* all css code here */ } ------------------------------------------------- GENERAL APPROACH TO MODIFYING THE PRINT-SPECIFIC CSS FILE: Assuming you have refined your screen-specific CSS to intended behavior, you would generally save a separate, further copy of your "screen" style sheet as the latter "print" implementation. You would then change the top "@media screen" expression to read instead, "@media print." The general focus of modification within the print-specific CSS file is as follows: 1. Eliminating outer, left and right margins or padding from exterior (enclosing) block constructs (within which your further block constructs are displayed). This reduces the left and right margins to default printing or file conversion values (which you may have no control over, even in the client application's preferences/settings). A screen-specific CSS implementation for instance will generally limit itself to some column width which, when/if printed, may result in huge left and right page margins. These are reduced by your modifications of the print-specific CSS, so that paper is used to best advantage. 2. Re-scaling fonts. Owing to translation differences, screen fonts are generally too large for printed media. Depending on the screen sizes you display, you may: a. determine a general scaling factor to apply to your font-size specifications; b. and manually apply that scale to converted font-size specifications. 3. Re-scaling images. You will generally want to apply a manually calculated scale to your images as well. a. This means that standard images (used in many pages for instance) may require separate image-specific styles, indicating size; and that height and width specifications must be avoided in scaled images, in your HTML markup. 4. Indicating page break preferences. Print-specific page break specifications (not needed in your screen CSS) indicate whether page breaks can be inserted before, after or within block content. 5. Indicating whether to print content. Content which you don't want/need to be printed can be marked, "display: none;". ------------------------------------------------- TYPICAL CHANGES IN EACH PRINT-SPECIFIC CSS FILE: The general manner of addressing each concern is: 1. Eliminating outer, left and right margins or padding from exterior (enclosing) block constructs (within which your further block constructs are displayed). a. Follow a pattern of engineering with an outer enclosing block, determining either margins or padding, and/or width of the outer block. b. Set the margins or padding to 0, and/or the width to 100% in the print-specific CSS. 2. Re-scaling fonts. a. Determine a general scaling factor to apply to your font-size specifications. For instance, if your screen output declares a font-size of 17px for a given style class, and experiments determine that the desirable size ratio for print output is 11px, open your calculator, enter "11," divide by "17," store the result (ratio) in memory, and multiply your further font-sizes by the ratio to get resultant sizes. You will discover a minimum size in this process. If the answer is less than the minimum, apply the minimum instead. b. Once you have calculated each scaled font-size, use global search-and-replace, starting with the smallest sizes to convert, and progressing to the larger. This will avoid double-processing errors (modifying the result of previous scaling, versus your intention to scale only unscaled declarations. 3. Re-scaling images. a. Apply image-specific styles, indicating height and width in the style declaration. Scale height, width and margins as needed for print output. 4. Indicating page break preferences. Print-specific page break specifications (not needed in your screen CSS) indicate whether page breaks can be inserted before, after or within block content. These declarations are generally made for the base style, so that properties are inherited to subclasses (where exceptions can be declared, if desirable): a. HEADINGS - TITLES, SUBTITLES Break before, but not within, nor after (next paragraph sticks to title, or title breaks off to next page with succeeding paragraph). hx.MyStyle or p.MyStyle { page-break-after: avoid; page-break-befo auto; page-break-inside: avoid; } b. IMAGE Break before or after, but never within image. img { page-break-after: auto; page-break-befo auto; page-break-inside: avoid; } c. LIST ITEM Break before, after, or within (but not in area occupied by image). li { page-break-after: auto; page-break-befo auto; page-break-inside: auto; } d. PARAGRAPH Break before, after, or within (but not in area occupied by image). p { page-break-after: auto; page-break-befo auto; page-break-inside: auto; } 5. Indicating whether to print content. a. Content which you don't want/need to be printed can be marked: BaseClass or BaseClass.Subclass { display: none; } Typical objects of this treatment for instance might be RSS subscription links. ------------------------------------------------- PRINTING BACKGROUND COLORS OR IMAGES: Note that according to W3C standards, printing of background colors or images is optional to the end user; and that by default, each are disabled in printer configuration options. It may be desirable to enable background colors or images for saving an HTML page to PDF for instance, while it may be undesirable for printed output (owing perhaps to vast consumption of ink). To enable either for a particular purpose, access your printer preferences. Hi all I'm using a reset.css file that sets the text-align for TDs to left. Now I'm using an old CMS that displays an admin bar on top of the page, which is so very old that it is based on tables and uses HTML styles like align="center" to align its content. Naturally, those styles are now overriden globally by the reset.css file. Is there a way to reset this style to "undefined" or something for this admin table, so the browser listens to the HTML styles like align="center" again? Thanks for help Josh hello. i have a button that pops up to a floating div. this div gets applied html from a source called by ajax. in the html that is being called, i added <style></style> tags to embed specific css for that html. i do this because this html will be used globally across the site it works fine in every browser except safari. safari doesn't seem to render the css. any suggestions? I am trying to print an HTML page in the landscape orientation using a css print style sheet. I have added the link to the style sheet in my document
Code: <link rel="stylesheet" href="print.css" type="text/css" media="print" /> the code in the stylesheet itself is Code: @page {size: landscape; margin: 0.25in;}
When I print the page from Internet Explorer the settings from my browser are used. What do I need to do to have the page printed in the landscaped orientation without the user configuring their browser settings? Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? We're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content. eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle. This seems to happen in all browsers. We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear. One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently. But this seems to defeat the purpose of using a print stylesheet in the first place. Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either. So my question is - What happens when a browser prints a page? Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable) Or does the client's browser simple request the CSS file and reformat the page it has already downloaded? If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded Hi , I am trying to print my html page in the landscape mode.I should print this automatically in landscape mode with css orientation landscape. i am using the below code to print all tables in my html page in landscape mode @page rotated { size : landscape } table { page : rotated } Its not working . Is this write or wrong? Is there any other way to do it. Thanks, Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>CLOColors3</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="mainstyle.css" type="text/css" /> <link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" /> the print css: Code:
@media print {
html{
height:auto;}
body{
background-color:#FFF;}
#header{
display:none;}
#body{
position:relative;
background-color:#FFF;
background-image:none;
height:auto;
width:auto;
left:0px;
top:0px;
z-index:0;
padding-bottom:0px;}
#textbox{
position:relative;
overflow:visible;
float:none;
margin-left: 0px;
top: 0px;
width:auto;
bottom:0px;
background-color:#FFF;
border:hidden;
border-color:#FFF;
z-index:0;
padding:0px;}
#textbox img{
display:none;}
.searchbar{
display:none;}
#linkbar{
display:none;}
.map{
display:none;}
.video{
display:none;}
#linktext{
display:none;}
#clear_both{
display:none;}
#menu{
display:none;}
#footer{
display:none;}
}
Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!! UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive. I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page. This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly? Hello -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body. Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag. I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place. So, how do we handle using different style properties for the same tag within the body? Perplexed, Mike I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this: Quote: hr { border: none 0; border-top: 1px dashed #000; width:98%; height: 1px } However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap? Any ideas? Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me. The code is as follows <div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '> Now what happens is the words I type in this box are beautifully laid out because of the padding... The images placed in the box should stretch border to border - but obviously don't because of the padding.... Can anyone please tell me what I can change to give my text padding but images with no padding? Thanks so much Hi, I remember reading that there is a css attribute for removing all browser-specific formatting from an element, for example forms, H tags and divs (which are pre-formatted differently in ie and firefox) but I can't recall what it was! Does anyone know how this is achieved as I find it very laborious when creating stylesheets to have to remember to reset all of these elements' formats. - before anyone says it, I know I could set up a generic, cross-browser-ready stylesheet for use with all my sites, and this is a system I already employ, I am simply concerned with saving bytesize and achieveing smaller stylesheets that are more easy to work with. I remember it was something like this: instead of: form{ margin:0px; padding:0px; } I'm sure you can do something like: form{ preformatting:none; } Does anyone know what I'm talking about? Or did I dream it?... cheers in advance |
|||||||