CSS - Print Preview Cuts Off My Page

Hi all,

Simple issue - got a form with textboxes whose screen width will be less than the max width (for design and spacing purposes). However, I'd like the print stylesheet to make the entire contents of the textbox visible when they print.

A year or two ago, setting input{width: auto;} in the print stylesheet worked fine, but it seems the newer browsers (IE 6+. latest FF) do not support this method.

Any thoughts on how to do this?

Thanks,
AJ

This is a very interesting bug and I have been trying to do a little bit of hacking but with no success here. So, thought anyone of you would know what I'm missing.. The problem here is that it showed up just fine on the webpage but not in Print Preview or Print-Out for IE.

Code:

<style type="text/css">
   divBlackBox1
   {
     margin: 50px auto;
     padding: 0px;
     width: 400px;
     height: 4px;
     display: block;  /* for IE stupidity (to make height work correctly with the correct pixels)... */
     font-size: 1pt;  /* for IE stupidity (to make the smaller height work due to default font-size)... */
     overflow: hidden; /* Problem is that it doesn't work for print preview or print-out in IE... */
     background-color: #000000;
   }
</style>

<div class="divBlackBox1"></div>

Thanks,
FletchSOD

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?

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

Hi All

I used Joomla to design a really simple website for someone. I currently have the problem where my text, with <h2> tag, in IE, the bottom bit of the text is cut off. For instance, a 'g' will not have its bottom 'loop'. So the text is cut off horizontally, not vertically. Works fine in Firefox.

Using IE 's web development toolbar, I narrowed it down to the H2 tag, which is on a CSS file in Joomla, there are more tags nested within the <h2> tag, but they seem ok, as they are only font tags. Here is the css code of the Joomla template.

Code:

h2, .contentheading { 	
padding: 0; 	
font-family: Verdana, Geneva; 	
font-size: 1.3em; 		
font-weight: bold; 	
vertical-align: text-top; 	
color: #333; 	
text-align: left; 	
width: 100%; } 

Any idea how to fix such a problem?

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.

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>

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

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

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>

Hi,

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

thanks!