/    Sign up×
Community /Pin to ProfileBookmark

Absolute divs and printing

Copy linkTweet thisAlerts:
Feb 14.2005

I have a newsletter that is meant to be printed. It has a leftside relative div that is kind of the body of the newsletter (I change it to relative for printing), and an informational table in an absolutely positioned div on the right side. When my visitors print the newsletter, they get something that looks okay in Opera and IE. That is, the absolute div on the right does print, although the table inside the rightside div gets sheared off from page to page, often within rows, and sometimes within letters! But at least the whole table prints.

Worse is what happens on Netscape/Firefox/Mozilla. When those visitors try to print the newsletter, the right side div prints on the first page only, runs off the end of the page, and into oblivion. The rest of the newsletter prints, but only the relative leftside div. The rest of the rightside div is gone.

I’ve been told that is a known problem and that no browser does a great job with absolutely positioned divs when printing. Other web developers have advised me to suppress the right side for printing, or to change its position for printing to relative, which means it will print after the leftside of the newsletter. Ugly!

I never meant for my newsletter to look like that. The right side is not just a navbar that I can suppress. It’s full of information that my visitors who read the print copy should have.

Because the Netscape/Firefox/Mozilla problem is so disconcerting, I currently have put javascript code into my pages to detect the browser and suppress the right side for print only. But I don’t consider it to be a permanent solution.

Any ideas? I’d like to know how to get my printed newsletter to look like the screen version. Most important is the Netscape/Firefox/Mozilla problem, but I’d also like to fix the IE/Opera problem.

(If you try print preview in Netscape/Firefox/Mozilla, you’ll see that I am currently suppressing the right side for printing. If you try it in IE/Opera, you’ll see the okay-but-not-great-looking right side div printed where it should be.)

The screen version has a newsletter-look, and that’s what I want printed. Am I asking too much of 21st century browsers? Help! Is there some other programming trick I could use?

Here is the newsletter:

[URL=http://www.betterwaypress.com/lifeplanners/index-05-01.html]http://www.betterwaypress.com/lifeplanners/index-05-01.html[/URL]

Thanks! Linda Moran

Note: This is not a duplicate post. Earlier I posted a worse problem with the divs but back then they were nested. I’m actually making progress!

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWFeb 14.2005 — could you just write a new layout for print, for example using floats?

Float the table to the right and let the content flow round it? You might need to use negative margins if your code is the other way up.
Copy linkTweet thisAlerts:
@KDLAFeb 14.2005 — You also might try changing positions to percentages, then suppressing the navigation on the left side from printing - that might move your content over to fit the printed page.

There's no real way of forecasting what the user's browser is going to do: besides the question of which browser, there's also the follow-up questions of which version of the browser and whether or not user has messed with the default settings (I think you can change the print margins in IE.).

Not to be a curmudgeon about it, but you might consider designing for either the web or the printed page (printer-friendly) and letting the user choose which option they'd like to have to view your newsletter.

Good Luck -
Copy linkTweet thisAlerts:
@DaveSWFeb 14.2005 — re-reading your post I've just realised you don't actually say whether or not you're using a print style sheet. I kind of assumed you were, not sure why! Are you?
×

Success!

Help @lindamoran spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...