Forums
View unanswered posts | View active topics It is currently Mon Sep 01, 2014 7:54 pm



Reply to topic  [ 12 posts ]  Go to page 1, 2  Next
 Print issues: double backgrounds and broken layouts 
Author Message

Joined: Tue Sep 07, 2010 7:54 pm
Posts: 3
Post Print issues: double backgrounds and broken layouts
CSS3 PIE is working great except when the page is printed in IE. I'm experiencing duplicate and misplaced rounded corner objects when printing in IE.

Here is a bare bones test case to demonstrate the problem. Use print preview in IE:

http://chriscressman.com/pub/css3pie/

I saw a similar post from someone who wanted to use custom print styles. To be clear, I have no interest in using custom print styles. I would prefer that CSS3 PIE remove backgrounds when printing, as that is the expected behavior (normal CSS backgrounds do not print when using default browser settings).

If anyone can come up with a temporary workaround, please let me know. I'm using CSS3 PIE on a site, but printing issues could be a deal breaker.

Thanks for your help, this is a great project.


Tue Sep 07, 2010 8:04 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Print issues: double backgrounds and broken layouts
Thanks Chris, that testcase is very helpful.

Unfortunately I don't have a good fix for you right now. I'll try to think of something and will post back here if I come up with a workaround.


Wed Sep 08, 2010 9:44 am
Profile

Joined: Tue Sep 07, 2010 7:54 pm
Posts: 3
Post Re: Print issues: double backgrounds and broken layouts
Thanks Jason. I'll continue to experiment with CSS to see if there is anything that can be done outside of CSS3 PIE to fix the problem. I'd like to hide the shapes or at least get them into the correct position. Otherwise the page appears broken during printing, which is a hard sell on commercial sites.


Wed Sep 08, 2010 4:26 pm
Profile

Joined: Sat Sep 11, 2010 12:39 am
Posts: 1
Post Re: Print issues: double backgrounds and broken layouts
Here's a possible solution for all you guys out there with a weird print view of pages using CSS3 PIE (which is great):

Take the uncompressed file and change

Code:
return vmlDoc.createElement( vmlPrefix + ':' + tag );


to

Code:
vmlContainer = vmlDoc.createElement( vmlPrefix + ':' + tag );
vmlContainer.print = 'false';
return vmlContainer;


All CSS3 PIE elements should now be invisible in print view.
Any comments are welcome.


Pascal


Sat Sep 11, 2010 12:44 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Print issues: double backgrounds and broken layouts
Thank you Pascal! I wasn't aware of the 'print' attribute for VML shapes, that is very handy.

I'm interested in hearing what people think is the "correct" behavior for printing. Pascal's code will hide the VML entirely, leaving elements without any background or border. I'm thinking we probably want to try and emulate how IE prints normal elements by default, which is to hide the background but leave the border visible (in the correct position of course). It would be ideal if we could determine whether IE has the "print backgrounds" option enabled and honor that setting, but I don't know of a way to do that.

Should we print border-image? It's sort of a mix between a border and a background-image, so should it be visible or no?

What does everyone think?


Sat Sep 11, 2010 8:19 am
Profile

Joined: Tue Sep 07, 2010 7:54 pm
Posts: 3
Post Re: Print issues: double backgrounds and broken layouts
This is great guys! I haven't re-tested my example using the new code yet, but I'm very optimistic.

Regarding border-image, I used the following page to test native border-image support:

http://www.css3.info/preview/border-image/

The latest IE9 developer preview did not display the border images. The border images did display in Firefox 3.6.9 and Safari 5.0.2 on Windows 7. In both of those browsers, the border images printed. Therefore, at this time, I think border-images should display when printing.


Sat Sep 11, 2010 3:35 pm
Profile

Joined: Wed Aug 25, 2010 1:56 pm
Posts: 6
Post Re: Print issues: double backgrounds and broken layouts
Besides doing what Pascal suggested, I had to set 'css3-container { display:none !important; }' in my print style sheet. Otherwise, I got an extra 14 bank pages whenever I tried to print a single page from IE. For some reason, I had to do both. Without Pascal's fix, I still had a big shadow box even with the display:none line.


Wed Oct 06, 2010 6:42 pm
Profile

Joined: Fri Oct 29, 2010 4:46 am
Posts: 2
Post Re: Print issues: double backgrounds and broken layouts
I tried setting behavior:none in a print style sheet but that did not work. Not sure why. I was sure that would solve the problem.


Fri Oct 29, 2010 4:48 am
Profile

Joined: Fri Oct 29, 2010 4:46 am
Posts: 2
Post Re: Print issues: double backgrounds and broken layouts
The fix works well! Thanks for that. Only question is, how to I compress the changed .htc file?


Fri Oct 29, 2010 4:56 am
Profile

Joined: Mon Nov 15, 2010 4:31 am
Posts: 1
Post Re: Print issues: double backgrounds and broken layouts
I've implemented Pascal's solution and it works very well. However, whenever I try to print a site over two pages long, ie crashes (ie8), any thoughts?


Mon Nov 15, 2010 4:34 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 12 posts ]  Go to page 1, 2  Next

Who is online

Users browsing this forum: Yahoo [Bot] and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.