print style sheet problem with IE

problem with internet explorer and print style sheet

[cakewalkr7]

Another developer created some pages for one of our clients. He created print and screen stylesheets. In firefox the print preview looks fine but in IE the right column doesn't show up. I've gone through the css and I've tried changing different widths to make sure that any surrounding divs weren't squishing the 2 interior columns but nothing is helping to make it print correctly in IE. If you go to <> and do a file>print preview in IE you'll see what I mean. Does anyone know why it's doing this and how I can fix it? Thanks.

[edited by: SuzyUK at 5:29 pm (utc) on Sep. 3, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

[Marshall]

Welcome to WebmasterWorld cakewalkr7.

First I should mention that posting URL's is a violation of the TOS [webmasterworld.com].

That being said, I took a quick look at the page and, for the benefit of those who may not see the link, the table in the upper <div id="logo"> is set to a width of 727px. I believe you will find that for print, you cannot exceed about 650px or so, maybe a little more. Adjusting your CSS for the divisions will have little effect as long as the table is that wide. I also noticed in the print preview the page will fit at 70%, but not at 80%. I suggest eliminating the table and see if it fits.

Marshall

[cakewalkr7]

Thank you Marshall. I'll look into that. Sorry about the TOS problem, I didn't pay close attention when signing up.

[cakewalkr7]

I think I figured out what is causing the issue but I can't seem to figure out a way to solve it. There is a print version of the logo that is in it's own div at the top. When I set the display to none for that instead of block, everything else looks fine. I've tried resizing the image to make sure it's less than 650px but that hasn't helped. It seems like the only way to make the left column appear is to remove the image at the top.

[Marshall]

As I said, I believe the maximum width is 650px. Since most of my sites have a script that converts the page to a printer friendly version, it is not an issue I have had to address in quite some time. I suggest experimenting with widths until you find one that works.

The other problem could be the way you <div>'s float, but without seeing your CSS, it is only a guess. Remember, when calculating the width of an element, you have to include its width plus it's margin and its padding.

Marshall

[swa66]

IE6 prints things at a very low resolution, it makes printing almost impossible unless you rotate the pages to landscape. I think only 640px wide fits on the printed page (so yeah that's designing for a very small page).

Also remember that those of us not using imperial measures use "A4" paper, that's slightly more narrow than "letter" or "legal" at 210mm by 297mm

IE7 has a slightly higher resolution (at least able to print things 800px wide)

One thing you can try to do is to unset widths in the print stylesheet and let it flow. Or use conditional comments for IE6 to give it a more narrow screen friendly version