|
CSS - Css Print Problem
I've just created a print stylesheet for my site but I'm having troubles with it working in Firefox.
It works great in ie but in Firefox when a page goes onto more than one page the first page is printed but not the rest. http://www.skillair.com/employers/employers.asp http://www.skillair.com/stylesheet/print.css Any help would be really great. Thanks Jemes Similar Tutorialsi have a weird problem with a stylesheet for printing on one of my pages. Th e page is he http://www.qrglaw.com/judges.php There is some "hidden" info on the page that shows up when a visitor clicks the links in the left-hand margin. The hidden info then pops up on top of th e page to display driving directions to the location selected. the driving directions display 2 html buttons on screen: one to close the "w indow" and the other to print the directions. i have some css so that the "print directions" button "hides" everything on the page except for the directions and the site banner. everything works pre tty well... except that I'm having trouble w/ text at the right margin getting cut off o n some of the pages (Johnstown, in particular). I can't understand this at a ll. i started w/ a "width:auto" , then went to defining left and right margi ns. that works for most of the pages, but not for Johnstown or Uniontown lin ks. I think the text should be able to wrap w/o any explicit margin settings . Hi, For some reason my css sheet for printing is producing huge text on the printouts in the main section of the page and I can't figure out why. style sheet included by: <link rel='stylesheet' href='print.css' type='text/css' media='print'> section in question: .pr{color : #000000; font-family: verdana; font-size: 10px} for some reason the font size is being ignored and the text come s out massive. the whole code for the page is too long to post but the section in question has a lot of tables enclosed in: <span class='pr'> </span> I know the stylesheet is being included properly cos it is hiding lots of other sections. Anyone got any ideas? Thanks I need to print some aspx pages and that is performed with style sheets (I use print.css that is referenced with media=print) Problem: On several pages I have MS TabStrip control. When I attempt to print page it is always the first tab printed no meter which tab is active. I'd like to print active tab (printing all tabs will also be acceptable alternative) What is the best way to perform this? JavaScript? Am I missing something with CSS? Thank you in advance, Natalie 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 My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? 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? Hi, All the content of my web page is in a table which is 760 pixels width. This is fine on the screen, but when printing, the right part is cut. I tried to set a new css print stylesheet <link rel="stylesheet" type="text/css" href="print.css" media="print"> to avoid this problem, but it is not working. I tried to change the margin and padding, but there is no change. I still have the same problem. I tried many different configurations, but none of them worked... I did probably something wrong. I know that the page is properly printed if I change manually the print setting (file -> page setting) margin to 5mm, but how can I do it with the css, in order than everybody who would like to print the page has the complete page printed? Could someone help me? Many thanks Hello all, I have been trying to get my website to comply with googles page speed and yahoo's yslow. I had 2 seperate css files one for print and one for screen and they wanted them combined. I searched and searched for a way to do this and well I am going to post here how I got things to work in hopes it helps someone else. <link href="style.css" rel="stylesheet" type="text/css" media="screen, print" > NOTE if I make it media="all" print does not work here is code for the main css file that combines the 2 into 1. NOTE also the print is NOT loaded until it is needed. @media screen { /* all screen CSS goes in here */ } @media print { /* all print CSS goes in here */ } U ask why a print.css file? simple it lets me force page breaks so images don't get cut in half. it lets me set a legable size font or larger than what is displayed on screen. Ok here is my problem... in the print.css I don't want to print my backround image. I want just a plain white background. I use a "sprite" to call picture frames for screen. These frames use part of my background image... thus they look bad printed. How do I in the print.css file tell it NOT to print this frame.png file? I assume I will use .noprint DISPLAY:none or something to that effect but where and how to impliment this is over my head and I cannot find any examples of how to do it. Thanks in advance for any suggestions or help whonoes 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> Hiya, theres a website I'm creating a print stylesheet for which includes the company logo in the header, with a footer of contact details. problem is, the website is all static pages and 100 odd pages, so as I'm having to deal with the static state of the site for now, is there a way I can have in the Print stylesheet or in the CSS where the logo can be inserted in a header and a footer created with text? hope this makes sense? if you check out this website you'll immediately understand what the problem is about. The script I wrote, pulls pictures out of a database and displays them. I have a print feature (click the link that says: Ik wil de klassenlijst van **** afprinten). With Css I check wether or not a picture can be displayed on this page or if it has to be forced onto another page, when printed. Code:
<style type="text/css" media="print">
table {
page-break-befo auto;
}
</style>
When you check the webpage, you'll notice this row gives problems in IE. When I print the page from Internet Explorer: this row shows on the page, but not the picture that goes along with it. When I print the page from Mozilla: this row does not show on the page, neither the picture that goes along with it. as it should be Can someone help me? It is very important that the pagebreak is automagically forced when printed, because I can't guess the format on which people will print. Hi there..I have a big problem here..I was told to put a print button in the web page and the page nust be printed out in landscape...he setting must be done in the coding not manually..and i found this coding below but not sure where to put in... PHP Code: <style type="text/css" media="print"> div.page { writing-mode: tb-rl; height: 80%; margin: 10% 0%; } </style> and i have done with the print button.. PHP Code: function printit(){ if (window.print) { window.print() ; } else { var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>'; document.body.insertAdjacentHTML('beforeEnd', WebBrowser); WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = ""; } } </script> <SCRIPT Language="Javascript"> var NS = (navigator.appName == "Netscape"); var VERSION = parseInt(navigator.appVersion); if (VERSION > 3) { document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()"></form>'); } </script> now the problem is with the landscape...pLS anybody..HELP..!! 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. Hello all, Not sure if this is a CSS or Javascript question.. I have a page which has an external CSS sheet, with a part for the @media print styling. On this page I'm also using (throughout my site) a javascript navigation bar. The idea is that when user clicks on a print-button, the whole navigation bar disappears, before printing. The Javascript seems however to add additional DIVS when loading the page which are without any ID, class or nametag, so I tried to get to this "navigationbar-div" via CSS selector combinations - just to find out that apparently CSS cannot select these divs (- maybe because they were added by javascript at runtime???). No matter what I try, it's like CSS doesn't "see" there's additional divs there.. I've also tried to select the concerning DIVs through DOM, but apparently this is still buggy even for modern browsers, so I rather not touch it.. Is there anyway I can get rid of the Javascript navigation bar in my print stylesheet? Thanks for your help! I have a print style sheet which has an undesired result. Apparently by default it prints the url (and the page title) at the top of each page. Can I tell it not to do that or is that a browser preference that can't be overridden with CSS? Im trying to write a better office backend. My client does alot of mailings and would like to print an avery 5163(this is not set in stone) form with addresses and send in the mail. Right Now: 1. Generate List. (I wrote the web-app that does this). 2. Copy it from the generated webpage. 3. Pastes it to M$ Word. 4. Adjust any formatting issues. 5. Print the list. What I'd like to do is 1. Generate List. (I wrote the web-app that does this). 2. Print the list.(The page would be formatted with CSS to achieve proper scale and dimension) Does anyone know where I would go to even get started on accomplishing this task? I need to change some page setup setting for print like orientation, headers and footers Is it possible to define it in CSS. |
|||||||