468,541 Members | 1,812 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,541 developers. It's quick & easy.

Printing floating-image thumbnail CSS pages

Hi. I've just recently switched to using CSS (rather than tables) to
display collections of thumbnails. That way, depending on the user's
screen resolution and browser window size, the number of "columns" on
the window is variable. Some examples of pages I've created this way
are:

http://www.engr.uconn.edu/~spm01f01/suspension/

http://www.engr.uconn.edu/~spm01f01/tutorial/

A shortened version of the HTML might look like what I pasted at the
bottom of this page (note that I kept the CSS stuff embedded in the one
HTML file since it's so short).

My problem is that when I try to print out pages I've made this way,
they don't come out well at all. In IE6, I get a blank page, one page
with the images, and then a third page which is mostly blank. On the
page with the images, some of them are extending off the screen. In
Opera (7 and 8.5), the pages print out basically as I see them on the
screen, but images get chopped between pages.

I'm probably grossly overlooking some aspect of how to write CSS, as
I'm still a newb as far as CSS goes. I basically just picked apart some
code I found on the web until I got my pages to look how I wanted. I
intend to learn CSS thoroughly when I get some time, but for now I just
want to patch up this one bit of code. Hopefully someone can point out
my mistake. BTW, I've heard of the ability to write seperate code for
"print media", but I'd rather not have to do that if I don't need to.

Thanks!

sean
<html>
<head>
<title>Tutorial folder</title>
<STYLE TYPE ="text/css">
<!--
div.float {
float: left;
width: 365px;
height: 275 px;
padding: 0px;
}

div.float p {
text-align: center;
}

div.container {
background-color: #fff;
}

div.spacer {
clear: both;
}

-->
</STYLE>
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080">
<basefont face="Arial, Helvetica, Sans Serif">

<h1>Tutorial folder</h1>

<div class="container">
<div class="spacer">&nbsp;</div>

<div class="float"><img src="thumbs/tn_001.jpg" border="0" alt="001.jpg
(2048x1536; 1492057 bytes)"></a></div>
<div class="float"><img src="thumbs/tn_002.jpg" border="0" alt="002.jpg
(1536x2048; 262812 bytes)"></a></div>
<div class="spacer">&nbsp;</div>
</div>

</body>
</html>

Mar 1 '06 #1
5 2419
I should note that the problem with printing in IE isn't that I get a
blank page before and after the pictures. It's that there is only one
page in between them, no matter how many images I have. So I only get a
small percentage of my images showing up on the printout. This is true
for ANY page I make in this manner - when I print, there's only one
page showing the "meat" of the page. Anything that doesn't fit in that
one page doesn't show up anywhere.

As much as I'd like to blame it on IE, other browsers all show some
types of problems with my pages, so I think it's my fault - something
I'm doing wrong with CSS methods.

Mar 2 '06 #2
Els
sp********@yahoo.com wrote:
I should note that the problem with printing in IE isn't that I get a
blank page before and after the pictures. It's that there is only one
page in between them, no matter how many images I have. So I only get a
small percentage of my images showing up on the printout. This is true
for ANY page I make in this manner - when I print, there's only one
page showing the "meat" of the page. Anything that doesn't fit in that
one page doesn't show up anywhere.


It sounds like you have your printer settings in IE set to print only
'1' page instead of 'All'.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Dirty White Boy - Hammer On The Heart
Mar 2 '06 #3
Nope, nothing like that. I get weird behavior in other browsers too.

Els wrote:

It sounds like you have your printer settings in IE set to print only
'1' page instead of 'All'.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Dirty White Boy - Hammer On The Heart


Mar 3 '06 #4
Els
sp********@yahoo.com wrote:
Els wrote:

It sounds like you have your printer settings in IE set to print only
'1' page instead of 'All'.


Nope, nothing like that. I get weird behavior in other browsers too.


Do you get the same result in the print preview, or only when
printing? I'm not gonna try and print your pages, (too much ink and my
colours ran out already), but in the print preview it looks okay here.
Have you tried what happens if you would do exactly the same HTML and
CSS, but have the images resized in an image editor first, so they
aren't resized by the code?
If the print preview looks good and the prints are bad: have you reset
your printer? Are there any settings on the printer itself wrt
margins, paper size, etc.?

(that's about all the ideas I can come up with...)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Mar 3 '06 #5
Yes I get the same result in print preview. What browser are you using?
I've tried quite a few and always got bad results. I'll try the
resizing idea.

It's almost like how in Word, if you place floating images, you can't
place them on their own page unless something else (text, blank space)
exists to "reserve/allocate" that page. Not true with inline images,
just floating ones. I was thinking that maybe the use of floating DIV's
might be causing a similar effect, but I don't know enough about it to
be sure.

thanks

sean

Els wrote:

Do you get the same result in the print preview, or only when
printing? I'm not gonna try and print your pages, (too much ink and my
colours ran out already), but in the print preview it looks okay here.
Have you tried what happens if you would do exactly the same HTML and
CSS, but have the images resized in an image editor first, so they
aren't resized by the code?
If the print preview looks good and the prints are bad: have you reset
your printer? Are there any settings on the printer itself wrt
margins, paper size, etc.?

(that's about all the ideas I can come up with...)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/


Mar 3 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Michael Hudson | last post: by
687 posts views Thread by cody | last post: by
10 posts views Thread by ben | last post: by
7 posts views Thread by Vinoth | last post: by
15 posts views Thread by michael.mcgarry | last post: by
32 posts views Thread by ma740988 | last post: by
39 posts views Thread by rembremading | last post: by
2 posts views Thread by utab | last post: by
7 posts views Thread by Ouroborus777 | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.