CSS and Printing!

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

[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/b...r_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