CSS - Blank First Page For Print Preview

I have two items (text) floated left.

But when I hit print preview the second text label "wraps" under the first so the are both aligned left.

I would like to keep positions fixed when viewing and printing.

Happens in both FF and IE.

Thanks,

Doug

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

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

cookcommons . com / index_working . html

At this location, I have a page that I validated the code, but most of it is hidden in both IE 6 and IE7? Seems to work fine in FF?

Thanks for the help in advance.

Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve.

My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it.

It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists.

Can anyone help?

Cliff

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

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

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

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>

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