CSS and Printing!

[bassa]

I have did all I could, but still to no avail, so I'm hoping that someone in here could shed some light on this odd behavior.

The thing is that I am using CSS Print to control what is printed for the site visitors.

On this page here:

http://www.froso.dk/test/produkter/bordplader.html

This is an example page, as there are more pages with many thumbnail images on them.

Anyway!

My problem is that when I print the above page, the first page printed is blank, and only on the next page the thumbnail images show up.

How do I fix this?


Cheers,
Bassa

[Snookerman]

Here is a great tutorial about writing a print stylesheet:
http://css-tricks.com/video-screencasts/52-building-a-print-stylesheet/
It has many useful tricks that might help you out.

Good luck!

[bassa]

No help to get there.


Cheers,
Bassa

[Snookerman]

Well I printed your page and everything fit on one page, no blank page, no problems. Maybe it has to do with your printer settings?

I posted that tutorial because the same problem occurred and it was fixed be removing the menu. You could try removing some stuff until you find what's causing the blank page, but like I said, I don't have that problem.

Good luck!

[bassa]

Alright, thanks. I'll fiddle around with it some more and see what's going on.


Cheers,
Bassa

[jscheuer1]

These styles seem to work fairly well for the print stylesheet for that page:

body {
margin:0;
padding:0;
}
div#fade {
   display:none; 
}

div#topbg, div#main{
   display:none; 
}

div#logo {
   display:none;
}

.header {
	display:none; 
}

a.frontpage_on {
	display:none;
}

a.frontpage_off {
	display:none;
}

a.products_on {
	display:none;
}

a.products_off {
	display:none;
}

a.gallery_on {
	display:none;
}

a.gallery_off {
	display:none;
}

a.about_on {
	display:none;
}

a.about_off {
	display:none;
}

a.contact_on {
	display:none;
}

a.contact_off {
	display:none;
}

div#image {
	display:none; 
}

div#breadcrumb {
	display:none; 
}

div#maincontent {
	display:none; 
}

div#submenu {
	display:none; 
}

div#maincontent {
	display:block;
	background: white;
}

.h1 {
	width: 708px;
	height: 1.0em;
	margin: 0 0 10px 0;
	font-family: Georgia;
	font-size: 1.5em;
	line-height: 2.0em;
	color: black;
	text-align: left;
}

#textarea {
	width:100%;
	margin:auto;
}

.text {
	font-family: Verdana;
	font-size: 0.875em;
	color: black;
	line-height: 1.3em;
	text-align: left;
	padding: 0px;
	margin: 0px;
}

.link {
	display: none
}

.link:hover {
	display: none
}

.thumbnail {
	height: auto;
	width: 160px;
	float: left;
	text-decoration: none;
	margin: 0px 10px 0 0px;
	padding: 0px;
	text-align: center;
}

.thumbnailtop {
display:none;
}
.thumbnailcenter {
	height: auto;
	width: auto;
	text-decoration: none;
	padding: 0px;
	background:none;
}
.thumbnailcenter img {
width:91px;
height:91px;
}
.thumbnailbottom {
	height: 1em;
	overflow: hidden;
	width: 91px;
	text-decoration: none;
	font-size:65%;
	margin: 0px auto;
	padding: 0px;
	background: none;
	line-height: 1em;
	font-weight: bold;
}

fieldset div {
display:none;
}
form {
display:none;
}
label {
	float:left;
	width:10em;
	text-align:right;
	margin-right:1em;
}
legend {
	color:#B41414;
	font-size:1.0em;
	font-weight: bold;
}
legend span {
	width:10em;
	text-align:right;
}
input {
	padding:0.15em;
	width:10em;
	border:1px solid #B4B4B4;
	background:#F0F0F0;
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
	font-family: Verdana;
	font-size: 1.0em;
}
input:hover, input:focus {
	border-color:#B4B4B4;
	background:#FAFAFA;
} 
fieldset {
	border:1px solid #DCDCDC;
	padding:0em 1em 1em;
}

input.default {
	color:#bbb;
}
#submitall {
	margin-top:1em;
	width:55px;
	height:22px;
	border:0;
	background:url(../images/button_submit_off.gif);
	display:block;
	cursor:pointer !important;
	cursor:hand;
	margin-left: 10.5em;
	float: left;
	padding: 0px;
}
#submitall:hover {
	margin-top:1em;
	width:55px;
	height:22px;
	border:0;
	background:url(../images/button_submit_on.gif);
	display:block;
	cursor:pointer !important;
	cursor:hand;
	margin-left: 10.5em;
	float: left;
	padding: 0px;
}


#clearall {
display:none;
}

#footer {
	height: 20px;
	width: 100%;
	text-align:center;
	font-family: Verdana;
	font-size: 0.875em;
	margin: 0px auto;
	padding-top: 20px;
	padding-bottom: 20px;
}

Note, these probably could be simplified.

[bassa]

LOL! Yeah, I know it's ridiculously long, but that's just the way I managed to work my way through the print.css document.

It aint pretty, but it works... well, sorta!

[jscheuer1]

It's unclear to me whether or not you have realized that the styles in my previous post are significantly different than the print styles you were currently using when I posted it. If not, give them a try.

[bassa]

/Facepalm!

Sorry, man. I didn't pay enough attention but thought you had just copied in my own print.css.

I'll definitely give your solution a shot, thanks!


Cheers,
Bassa

[bassa]

Well, that seems to work except that the thumbnail images gets horizontally squashed - including the thumbnail image names (regular text).

Also, what are these two lines?:

input {
	padding:0.15em;
	width:10em;
	border:1px solid #B4B4B4;
	background:#F0F0F0;
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
	font-family: Verdana;
	font-size: 1.0em;
}

Cheers,
Bassa