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/ (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! :D

[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

[Snookerman]

Those are CSS3 properties for rounded corners. They only work in Firefox and Safari at the moment. You can learn more here:
http://css-tricks.com/video-screencasts/24-rounded-corners/ (http://css-tricks.com/video-screencasts/24-rounded-corners/)

[jscheuer1]

Also, I didn't add them, they were in your original definitions.

Now, when I tested the code, the images shrank proportionally, they were not squished in either dimension, same thing with the captions.

The problem was - in IE at least - that the division that contains the images is being treated as a single page element. So, if it is too big to fit on the the first page, it's moved to the second page, and then if it is too big for that, its bottom was getting cut off. I redefined the print dimensions for the images to 91 x 91. So, as I say, they should not appear squished, as they were already square at 140 x 140.

[bassa]

I redefined the print dimensions for the images to 91 x 91. So, as I say, they should not appear squished, as they were already square at 140 x 140.

Yeah. However, there are other pages with thumbnail images that have irregular dimensions, such as http://www.froso.dk/test/produkter/laager.html. And they look awful when the height is modified here:


.thumbnailcenter {
height: 91;
width: 91;
text-decoration: none;
padding: 0px;
background:none;
}


I think that letting height and width stay fixed at 'auto' is best for print, so that printed images resemble most realism.

Unfortunately, I think that may be it for this endeavor. I don't think there's a way to compromise with this situation.


Cheers,
Bassa

[jscheuer1]

That's not what I had, I had:


..thumbnailcenter {
height: auto;
width: auto;
text-decoration: none;
padding: 0px;
background:none;
}

Then for the images themselves:


.thumbnailcenter img {
width:91px;
height:91px;
}

Which, if that is distorting the aspect ratio of some images, could probably be:


.thumbnailcenter img {
width:auto!important;
height:91px;
}

Either that or (if it doesn't work out) individual dimensions can be given for any image that might require them.

Another approach would be to redesign the layout in such a way that would allow page breaks within the image display area. Then the images would only have to fit horizontally, which I believe most browsers will handle gracefully in their 'shrink to fit' print mode.

This may not be as hard as it seems, you could simply use more than one container division for the images and give them all the:

page-break-after: always;

style property/value pair. With a little trial and error, a nice arrangement of the divisions could be made for each page that would render a good looking printout.

[bassa]

Thanks, John!

You actually gave me an idea for a CSS container that holds the horizontal lines of thumbnail images (usually 4 images in each line).

Controlled through this simple method:


#thumbnail_container {
width:100%;
height:auto;
margin:0px;
padding: 0px 0px 20px;
}


With the .HTML looking like this:


<div id="thumbnail_container">
<div class="thumbnail">
<div class="thumbnailtop"></div>
<div class="thumbnailcenter">
<a href="bordplader/1071158_5568.gif" rel="lightbox" title="5568 - Everest"><img src="bordplader/1071158_5568_thumb.gif" alt="5568 - Everest" width="140" height="140" border="0" /></a></div>
<div class="thumbnailbottom">5568 - Everest</div>
</div>

<div class="thumbnail">
<div class="thumbnailtop"></div>
<div class="thumbnailcenter">
<a href="bordplader/1071158_5816.gif" rel="lightbox" title="5816 - Mineral"><img src="bordplader/1071158_5816_thumb.gif" alt="5816 - Mineral" width="140" height="140" border="0" /></a></div>
<div class="thumbnailbottom">5816 - Mineral</div>
</div>

<div class="thumbnail">
<div class="thumbnailtop"></div>
<div class="thumbnailcenter">
<a href="bordplader/1071158_5906.gif" rel="lightbox" title="5906 - Mahogny"><img src="bordplader/1071158_5906_thumb.gif" alt="5906 - Mahogny" width="140" height="140" border="0" /></a></div>
<div class="thumbnailbottom">5906 - Mahogny</div>
</div>

<div class="thumbnail">
<div class="thumbnailtop"></div>
<div class="thumbnailcenter">
<a href="bordplader/1071158_5984.gif" rel="lightbox" title="5984 - Sandstorm"><img src="bordplader/1071158_5984_thumb.gif" alt="5984 - Sandstorm" width="140" height="140" border="0" /></a></div>
<div class="thumbnailbottom">5984 - Sandstorm</div>
</div></div>

Works perfectly. I'll have to double-check for other browsers than IE as well, though.


Cheers,
Bassa

[bassa]

Ok, so I'm nearing the end of my website and are just putting the final touches and optimizations upon it before launch.

I've a question, though. Nothing serious, but rather something that annoys me slightly.

Check these two webpages.

Kitchen Sinks:
http://www.froso.dk/test/produkter/vaske.html

Table Colors:
http://www.froso.dk/test/produkter/bordplader_laminat.html

Now, the webpage with Kitchen Sinks renders quite well when being printed, with the text at the top of the page, and thumbnail images nicely rendered side-by-side downwards and all.

However, the page with Table Color thumbnail images skips almost an entire page before being rendered in the printed document.

Perhaps anyone has an idea as to why that occurs?

I'm having difficulty finding the reasons behind this as I've used the exact same techniques and layout on both pages.


Cheers,
Bassa