Text overprinting images in Firefox

Print style sheet problem

[katana_one]

I am creating a print stylesheet for a site and everything is fine except for an issue that appears in Firefox, but not IE 7.

I have all images in the print CSS set to float:left with a 15px margin on the right and bottom edges. This works fine unless the image falls on a page break - when this happens, the image prints across both pages and it messes up the text flow for any text immediately following the image - part of the text overprints the image. I'd like to have images not print across two pages, but I can't seem to find any css that will work.

[lavazza]

I don't remember where I read about this, but my print css 'template' has a comment at the top to remind me:
/* FLOAT NONE is necessary so that >1 page will print */

Some declarations from one file that are fairly typical

html, body, p, UL, LI, #mainContents, #leftSide, .inner, .logo, OL, UL, LI, .extract, .plain {
float:none! important;
color:#000000;
background: none;
overflow:visible;
text-decoration : none! important;
font-size: 10pt! important;
font-family: Georgia, Garamond, "Times New Roman", serif;
}

img {
display:inline;
}

#mainContents a[href]:after{
content: " (" attr(href) ") ";
font-size: 90%;
color:#0066CC;
}

[katana_one]

Yeah.

That doesn't seem to make any difference.

[Xapti]

You really want images to print on the page? I could see the case for some small situations, but for any image which could possibly span two pages, I don't see why you would want to include them on the print media.
Anyways, I'm not sure the extent of function, or support across browsers, but you can try using this:
[w3.org...]

[lavazza]

Hi Katana,

I think my 'declaration examples' and the word 'typical' were confusing... whoops! Sorry!

I meant they were 'typical of', not 'universal for', the way media="print" HTML, ID and Class selector properties can be written to supercede media="screen" and/or media="all" selectors with the same names

I agree with Xapti re the caution on using the SAME images on screen AND in print... small file-size images often look fine on screen but, on paper, I have found they usually look dreadful

[katana_one]

I wasn't asking about print quality vs. screen quality. I'm well aware of the differences, thank you.

What I need is, preferably, a reliable way of ensuring the image does not print across two pages, and failing that, to make sure the text does not overprint the image when it does happen.

I'd also like to know why float:left works just fine in IE 7 for printing the page, but not in Firefox.