CSS - Print Page With Css

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>

Hi,

Is there anyway to specify the printed page orientation using CSS? e.g. make the printed copy landscape or portrait.

thanks!

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

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

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 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.

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 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 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?

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

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 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.