CSS - Rotate Page Before Print
dear all,
i'm trying to rotate a page , in order to print it horizontaly ,with the folowwing code : <script language='javascript'> var rot = 1 function rotateMe() { oDiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation='+ rot +')' rot = rot + 1 if (rot == 5) rot=1 } </script> ===================================== <DIV ID="oDiv" STYLE="position:absolute; left:0px; top:50px;"> ===================================== <BUTTON onclick="rotateMe()" id=button1 name=button1> Rotate 90 degrees </BUTTON> ===================================== the page appears fine :) on screen ( it rotates in 90 degrees each click ) but the print (god forbid) rotates in 45 degrees !!!! :( Any idea why print rotates in 45 instead of 90 ??? :confused: Blass u , ido Similar TutorialsWe'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 All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks hey all, my pages do not print, err they only produce a white page. i have my css set to all media - maybe there is sth. wrong with my jungle of css? i hope someone can help me out on that one. the site is: http://www.chocolateriewanders.com I have a three column layout page which looks fine in IE as well as Firefox. But if I try to print the page, it prints the entire page in one column. Also, backgrounds are not printed. Searching on google, it seems CSS is the cause behind this. I could not find any solution though. Here is my CSS. Code: html {overflow-y:scroll;} body { font-family: Arial, Helvetica, sans-serif; color: #354963; font-size: 8pt; font-weight: normal; padding: 0; margin: 120px 0px 0 0; } #wrapper { position:absolute; top:0; left:0; margin:0; padding:0; background:#003333 url(/corporateBanner/corporateBanner.jpg) 0 0px; width:100%; height:100px; font-size:8pt; } #bannerWrapper { position:absolute; top:0; left:0; z-index:2; } #bannerTitle { position:absolute; top:28px; left:80px; color:white; font-size:26pt; width:600px; margin:0; border:0; font-weight:normal; z-index:2; white-space: nowrap; } .hiddenLabel { display:none; } #topmainMenu { position: absolute; right: 0; } #topmainMenu a:hover { text-decoration:underline; } #mainTabs { position:absolute; top: 82px; left: -6px; width: 600px; margin: 0px; padding: 0px; } #mainTabs ul li { float: left; padding: 0; margin: 0px; list-style-type: none; } #mainTabs ul li a, #mainTabs ul li a:visited { font-size:8pt; font-weight:bold; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width:105px; text-align: center; height:19px; display:block; } #mainTab1 a:link, #mainTab1 a:visited, #mainTab2 a:link, #mainTab2 a:visited, #mainTab3 a:link, #mainTab3 a:visited, #mainTab4 a:link, #mainTab4 a:visited, #mainTab5 a:link, #mainTab5 a:visited, #mainTab6 a:link, #mainTab6 a:visited, #mainTab7 a:link, #mainTab7 a:visited { background: transparent url(../images/tabs/primary/tabBG.gif) top left no-repeat; color: #FFFFFF; } #mainTab1 a:hover, #mainTab2 a:hover, #mainTab3 a:hover, #mainTab4 a:hover,#mainTab5 a:hover,#mainTab6 a:hover, #mainTab7 a:hover { color: #000000; background-position: left -19px; text-decoration: none; } #T1 #mainTab1 a:link, #T1 #mainTab1 a:visited, #T2 #mainTab2 a:link, #T2 #mainTab2 a:visited, #T3 #mainTab3 a:link, #T3 #mainTab3 a:visited, #T4 #mainTab4 a:link, #T4 #mainTab4 a:visited, #T5 #mainTab5 a:link, #T5 #mainTab5 a:visited, #T6 #mainTab6 a:link, #T6 #mainTab6 a:visited, #T7 #mainTab7 a:link, #T7 #mainTab7 a:visited { color: #000000; background-position: left -19px; } #subMenu { position:absolute; top:100px; left: 0px; margin: 0; padding: 0; background: #FFF; height:15px; width:100%; } #subMenu ul { border: 0; margin: 0; padding: 0; text-align: center; } #subMenu ul li { float: left; padding: 0; margin: 0px 10px 0px 7px; list-style-type: none; } #subMenu ul li a { float: left; padding: 0; margin: 2px 1px 0px 0px; color:#000066; text-align: center; display: block; line-height: 16px; font-size: 8pt; font-weight:normal; text-decoration: none; width:auto; height:15px; letter-spacing: 0px; } #subMenu ul li a:hover { text-decoration:underline; color:#0A3C91; } #subMenu ul li a.current { text-decoration:underline; font-weight:bold; color:#0A3C91; } #dateStamp { position:absolute; right:5px; top:83px; letter-spacing:0px; font-size: 8pt; font-weight:bold; z-index:2; } #subContentWrapper { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width:100%; height:auto; border-top:1px solid #000; background: #fff; line-height:normal; } /* For the text under column */ #subContentWrapper p { padding: 0; margin: 5px; font-size:8pt; } /* IE7 1px rounding error. margin-left:-1px; */ /* 25% + 50% + 25% does not work in IE6. (24.8% + 50% + 24.8% works). Overwrote the code in the Home Page. */ #main3Column { float: left; width: 50%; } #leftColumn { float:left; width:25%; margin-left:-1px; } #rightColumn { float:right; width:25%; } .columnBoxLeft { padding: 0px 0px 0px 6px; margin: 5px 0px 5px 0px; } .columnBoxMiddle { padding: 0px 5px 0px 5px; margin: 5px 0px 5px 0px; } .columnBoxRight { padding: 0px 5px 0px 0px; margin: 5px 0px 5px 0px; } /* Clears the column floats so the footer can center directly below them. */ .cleaner { clear:both; height:1px; font-size:1px; border:none; margin:0; padding:0; background:transparent; margin-top: -1px; overflow: hidden; } #revdate { padding: 0px; font-weight: normal; font-size: 8pt; height: 17px; width: 100%; text-align: center; color: #354963; } /* Footer styles */ #mainFooter { margin: 0px; padding: 0px 0px; background-color: #363459; color: #fff; font-weight: bold; font-size: 7pt; height: 25px; border-top: 1px solid #000066; text-align: center; float: left; clear:both; width: 100%; } #mainFooter p { margin: 0; padding:0; background: transparent; color:#FFFFFF; font-size:7pt; font-weight:bold; width:220px; } .rightFloat { float:right; text-align:right; } .leftFloat { float:left; text-align: left; } #mainFooter p.leftFloat { margin:6px 0 0 4px; } #mainFooter p.rightFloat { margin:0px 5px 0; } #mainFooter p span { visibility: hidden; } Here is a simple page that I put up using the above CSS (main.css) which has the issue I described above. Use print preview and you will see all the 3 columns one below another. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <link rel="stylesheet" type="text/css" href="main.css" media="screen"/> </head> <body> <div id="subContentWrapper"> <div id="leftColumn"> <div class="columnBox"> <h2 class="channeltitle">Left Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/leftColumn--> <div id="main3Column"> <div class="columnBox"> <h2 class="channeltitle">Main Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/main3Column--> <div id="rightColumn"> <div class="columnBox"> <h2 class="channeltitle">Right Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/rightColumn--> </div> </body> </html> Hello, I have tried to make a print page using CSS to set the display to none for areas that I don't want printed. This works fine in Firefox but Exploder always pritnts a blank page first. Has anybody had similar problems? Thanks I have to design a site using a 750 pixels table. Of course, when I print the text, my text get cut off on the right hand side. Using a Print style sheet, is there any ways to avoid loosing the text on the right. Everywhere I look suggest to design into a 600 pixels table but they really want it to 750. Thanks for any help. I am trying to print a table withing a loop. Whenever the loop reaches class = "end" I want the printer to start a new page. Code: <div id = "texter"> <table><td></td> . . . <td class="end">sdfs</td> <td>hh</td> . . . <td class="end">kkk</td> <form> <input type="button" value="Print this page" onClick="window.print()"> </form> </table> </div> Code: @charset "utf-8"; /* CSS Document */ body { font-size: 10pt; font:Arial, Helvetica, sans-serif background-color: #FFFFFF; margin: 0; color:#000000; background-color: #FFFFFF; } #texter { width:auto; height:auto; position:absolute; top:2.6mm; left:3.9mm; background-color:#333333; } input, button { display:none;} #texter.end { page-break-after:always} THANKS Hi, Is there anyway to specify the printed page orientation using CSS? e.g. make the printed copy landscape or portrait. thanks! In the html below I try to print (click print-icon) all letters "a" on page 1 and all letters "b" on page 2. For this I use the css .break (pagebreak-after: always). But I don't get it working. Could some-one help? This is the HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <style type="text/css"><!-- .break (pagebreak-after: always) --> </style> </head> <body bgcolor="white" text="black"> <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br class="break"> <br>b <br>b <br>b <br>b <br>b <br><br> <a href="javascript:print();" onfocus="this.blur();"><img id="print" src="http://www.inspiration-company.nl/printnew.gif" alt="Print page " width="29" height="29" border="0" style="position: absolute; left: 100px; top: 100px;"></a> </body> </html> I noticed that in IE6 when I go to print, or even look in print preview, it cuts off the right side of my page. Is there any code to avoid that? Or even any tips? I have a page that is laid out with in a table. It has a header and a footer area. Ive defined a stylesheet for printing, and my content shows up correctly when printing (or print preview) with the header and footer items left out. What is not right though, is the 1st page is blank when i do a print preview. Help ? to add: This is an asp.net web page, that has a form with several images that render inside a div element and this form is within the main table. i have a page that must printed as lanscape. as default users printer is configured as portrait. how can i change it (portrait to landscape) programatically. is this possible using css or other techniques? 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? I have CSS attached to a php page of which none of the CSS information gets printed. what I mean is that if we have a style "purple" which was used on the top sentence of the page, when you go to print that page, it still comes in black instead of the purple color for the purple CSS. What is worse, is that the tables that are setup and shaded for columns from the CSS style's come out without any color. It actually doesn't even print the outline borders of the table. I have several pages on a website I am developing that will not print correctly in IE7. They print fine in FF 2 & 3, Opera, and Safari. In IE7 the page prints the Header, the menu, and the end content on the second printed page, the main content on does not print on printed page 1. If I comment out enough of either the middle or the end of the html page to make it a single printed page document it prints fine. I have tried building the end of the body content using tables but with the same result: only part of the page prints. Any ideas on what may be causing this behavior or directions in which I should look? Any help will be greatly appreciated as I have run out of ideas. Thanks, John White Hello, I'm new to CSS. I've been developing a website in PHP. I have a report that is meant to be printed. It is formated for printing. However, if the user doesn't have his/her browser print page margins set to a max of 0.25in then some of the printed area will get clipped off. Can CSS be used to control these margins on the page? I've been looking into this and have been lead to the media = "print" area. However, it only seems to be controling the webpage's body margins and not the browser's print page setup margins. I've gotten to the point of using the following style code on my page, but now I'm at a loss as to what to try next. Code: <style type="text/css"> <!-- .style1 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; } body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; } body { margin-left: 15px; margin-top: 15px; margin-right: 15px; margin-bottom: 15px; } .style4 { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-weight: bold; } .style15 {font-size: 10pt} .style21 {font-size: 18pt} .style24 {font-size: 24pt} .style25 {font-size: 16pt} .style28 {font-size: 12pt} --> </style> <link href="file:///C|/Webs/ures/k058_styles.css" rel="stylesheet" type="text/css"> <style type="text/css" media="print"> <!-- .style19 {font-size: 14pt} .style29 {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; } .style22 {font-size: 9pt} .style23 {font-size: 12pt; font-family: "Times New Roman", Times, serif;} .styleprint { margin: 0in 0in 0in 0in; margin-top: 0in; margin-left: 0in; } --> </style> I added the ".styleprint" style to the page only to try and control the browser's print page setup margins. What you see above are actually two attempts to do this. Like I said above the margin settings seem to only be contoling the margins on the displayed page and not the browser's print page setup margins. How can I control the browser's print page setup margins? CAN I control the browser's print page setup margins? If I cannot, what do you do to make sure that the user can print a "printer formated" page with the correct margins? Thanks, Paul Hi all I am using a style sheet with the print media type to controll how my site looks when it is printed out. It works very well the only problem being that I have <div>s which make boxes for the content and I would like for the boxes to not get split upon diffrent pages. Idealy I would like to make it so that if the the <div> is going to split over two pages it just gets put at the start of the next page. This probaly isn't possiable but you never know. Any Ideas would be helpfull Nick Carlevaris 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? |