Print Cropping in IE and Opera

[bluephoenix]

Okay... Here's my scenario. I have the folowing menu (formated as a table) on a webpage which I want to print.

<table border="0" cellpadding="0" cellspacing="0" style="width: 750px;">
<tr><td valign="top" align="right" style="width: 230px;">
<img src="gif/logo.gif" alt="Credit Union Logo"/>
</td><td valign="top" align="right" style="width: 520px;">
<!-- no spaces between menu gif img tags to prevent gaps between buttons -->
<div title="Main Menu Links" style="margin: 0px;">
<a href="index.shtml"><img
src="gif/btnhome.gif" alt="Home" /></a><a
href="about.shtml"><img
src="gif/btnabout.gif" alt="About Us" /></a><a
href="find.shtml"><img
src="gif/btnfind.gif" alt="Find Us" /></a><a
href="join.shtml"><img
src="gif/btnjoin.gif" alt="Join Us" /></a><a
href="new.shtml"><img
src="gif/btnnew.gif" alt="What's New" /></a><a href="explore.shtml"><img src="gif/btnexplore.gif" alt="Explore Our Services" /></a><a
href="contact.shtml"><img
src="gif/btncntct.gif" alt="Contact Us" /></a>
</div>
</td></tr>
</table>

Netscape auto resizes the document so that no content is cropped when printing, but IE and Opera do not.

I tried converting the table's and the cell's widths to percentages hopeing that would help... it did in Opera, but still not in IE (for the sake of consistant display across various screen resolutions, though, I prefere to work with pixels, anyway).

I could just say forget about IE, but the old saying "Know Thy Audience" forces me to find a solution.

And plastering the page with printing directions isn't a viable option either... a) I'd have a hell of a time convincing my supervisor with that, and b) let's face it... there's a lot of stupid people in the world and it would only confuse them.

I then thought about CSS2 and it's having a whole list of print-media styles. I dug out the specs and found a whole section on paged media with page margins, positioning, breaks, etc... but I admit it's just not clicking with me (perhaps I am one of those stupid computer users?).

I tried adding @page {size: auto; margin: 1cm} to my stylesheet, and it just doesn't work.

Any help the get me out of the pickle I find myself in is greatly appreciated!



Any help would be greatly appreciated.

[brothercake]

The width of a printed page equates to about 600px of screen space; if your layout is flexible and can be contracted down to that width, then it should fit to a page. I recommend testing that's true ... I'd suspect that your overlap is simply because the layout has a practical minimum width which IE prints literally.

Otherwise, your best bet is print media CSS ...

[bluephoenix]

it's not even overlapping; it's just cropping the right hand side of the page off. I'm really not in much of a position where I can shrink the table down to 600px so I think CSS is my only hope.

But like I said, the @page didn't work... a thought:

could it be because I define the widths of the table/cells with inline styles? would it be better to give them each an individual id and reference them from the external style sheet? What's the cascading order as far as externals and inline styles are concerned?