CSS printing woes

[HelloMike]

I've started using div & span instead of tables wherever possible, and things were looking good until I tried printing one particular page. I have a print CSS file that's configured to just print the main content area of the page, and has page-break-before set to auto for a particular class of fieldset. So far so good.

However ... one area of the page contains a "table" made up of div & span tags ... a div for each "row" and a span for each cell. One of the cells takes up more vertical space than the others, and when it happens to fall close to a page printing boundary, this cell prints on page 2, and the remaining cells from the same row print on page 1.

I've tried all sorts of combinations of attributes in my print CSS file, all to no avail. Anyone any ideas?

TIA
Mike.

 

[manarth]

A few, but I (and most others) will probably do better if we could have a look at the code.

Any chance you could you point us in the direction of an example?

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[HelloMike]

Manarth,

I can't point you to an example unfortunately - too many commercial contraints, but I can provide a few code snippets. The first bit is a static version of the offending HTML. The <div> and all its contents get repeated a number of times down the page, with slightly different ids. Looks horrible I know, but that's what the customer wants ...

<div class="row">
    <span class="cell" style="width: 35%;">
        <textarea id="text1" rows="6" style="width: 98%;">some text</textarea>
    </span>
    <span class="cell" style="width: 10%;">
        <input type="text" style="width: 98%;" id="leftfield1" value="hello" />
    </span>
    <span class="cell" style="width: 10%;">
        <input type="text" style="width: 85%;" id="rightfield1" value="goodbye" />
    </span>
    <span class="cell" style="width: 10%;">
        <input type="radio" id="leftradio1" value="Yes" />YES<br />
        <input type="radio" id="leftradio1" value="No" checked="checked" />NO
    </span>
    <span class="cell" style="width: 10%;">
        <input type="radio" id="midradio1" value="Yes" />YES<br />
        <input type="radio" id="midradio1" value="No" checked="checked" />NO
    </span>
    <span class="cell" style="width: 10%;">
        <input type="radio" id="rightradio1" value="Yes" />YES<br />
        <input type="radio" id="rightradio1" value="No" checked="checked" />NO
    </span>
</div>

From the main CSS file, the "row" and "cell" classes are ...

DIV.row {
	width: 98%;
	padding: 1px 0px 4px 0px;
	margin: 2px 5px 0px 5px;
	text-align: left;
	border-bottom: solid 1px #eeeeee;
}
DIV.row SPAN.cell {
	float: left;
	text-align: left;
	padding-top: 4px;
	font-weight: normal;
	margin-right: 12px;
}

And from the print CSS file, the important bit is ...

DIV.row {
	page-break-before: auto;
}

Any helpful suggestions will be pounced upon with pathetic gratitude. I have to get this finished pretty soon.

Cheers,
Mike

 

[BillyRayPreachersSon]

I've not tested this, but try adding this to your print CSS:

DIV.row SPAN.cell {
    page-break-before: avoid;
}

If that doesn't work, try this:

DIV.row SPAN.cell {
    page-break-before: '';
}

or this:

DIV.row SPAN.cell {
    page-break-before:;
}

and failing that, this (possibly IE-only):

DIV.row SPAN.cell {
    page-break-before: expression('');
}

Hope this helps,
Dan

 

[HelloMike]

Thanks Dan.

I tried 'em all, and none of them worked. So I tried 'em all again, but this time I did a SaveAs and looked at the generated print CSS file. Oh, er, I'm using IE6 at the moment. Here's what every single example came out as ...

DIV.row {
	PAGE-BREAK-BEFORE: auto
}
DIV.row SPAN.cell {
	
}

It seems that "avoid" is not recognised as valid syntax by IE6. Looking at some help on the MSN website suggests that an equivalent to "avoid" is an empty string, but it doesn't define the correct syntax for an empty string. Presumably that's what most of your suggestions were driving at. So I tried a few others as well, all to no avail

If Bill Gates comes round, somebody better hide that baseball bat.

Mike.

 

[BillyRayPreachersSon]

Yes - "avoid" is the W3C standard, but I knew that IE doesn't recognise it, thus the empty string tests.

As much as I admire they guy, your sentiments about the baseball bat do strike me as warranted sometimes ;o)

Dan

 

[HelloMike]

FYI, I've given up the ghost and kludged it. The big <div> I posted earlier actually occurs 4 times on the page, and always appears in the same relative vertical position. So I changed the <div> tag for the third instance to ...

<div class="row" style="page-break-before: always;">

... and now it prints fine. Provided the user always prints on A4 paper ...

Thanks again for trying.

Mike.