Printing web pages - maximum width - portrait size - using css - shrink to fit
I'm not even sure how to explain my problem . I'm spinning in circles trying to get our newly redesigned web pages to print in portrait mode and look ok in handhelds and print in portrait via Adobe web capture.
So here are a couple questions - maybe someone knows how to help me.
1. I've heard that web browsers are only designed to print pages in portrait mode if they are 800 pixels wide or less. Is this true? If so, I guess I need to redesign the entire site to have only 800 pixel wide tables.
2. When I do a print preview in Internet Explorer 7.0 - there is a drop down tab which says "shrink to fit". Is there a way to automatically have a browser use this setting using css?
3. Does Adobe Acrobat use the print media as defined here?
http://www.w3.org/TR/REC-CSS2/media.html
4. Is there a definitive reference source for the right way to code a web site so it will print in portrait mode on 81/2 x 11 inch paper? Or even a book or tutorial or reference about how to code a web site that works to print in portrait and look ok on a handheld and print in portrait using Adobe Web Page Capture.
I've sent the last 2 days trying to force a 900 pixel wide site to print WITHOUT flipping to landscape mode.
I'm trying to do this using @media css - but I can't find a tutorial that really explains how to do this.
Sorry this is such a screwy question. Hope someone has some suggestions.
April
So here are a couple questions - maybe someone knows how to help me.
1. I've heard that web browsers are only designed to print pages in portrait mode if they are 800 pixels wide or less. Is this true? If so, I guess I need to redesign the entire site to have only 800 pixel wide tables.
2. When I do a print preview in Internet Explorer 7.0 - there is a drop down tab which says "shrink to fit". Is there a way to automatically have a browser use this setting using css?
3. Does Adobe Acrobat use the print media as defined here?
http://www.w3.org/TR/REC-CSS2/media.html
4. Is there a definitive reference source for the right way to code a web site so it will print in portrait mode on 81/2 x 11 inch paper? Or even a book or tutorial or reference about how to code a web site that works to print in portrait and look ok on a handheld and print in portrait using Adobe Web Page Capture.
I've sent the last 2 days trying to force a 900 pixel wide site to print WITHOUT flipping to landscape mode.
I'm trying to do this using @media css - but I can't find a tutorial that really explains how to do this.
Sorry this is such a screwy question. Hope someone has some suggestions.
April
Hi aprillougheed,
I think me comments were a little off...let me try again.
1. If you take IE6 as an example, with the default margins, the max width you can use before the content gets cut off is roughly 540-550px. 760px is a typical width to use for 800x600 screens, allowing for the room need for default padding, margins & scrollbars.
2. Many modern browsers now have the 'shrink to fit' option for printing web pages. Unfortunately, IE6 is still a very popular browser & does not have this feature. Width:auto may be the closest you can get to 'shrink to fit'.
3. I am not sure.
4. As mentioned before, you can use a print only style sheet. I can provide some additional links if the previous one is not sufficient.
I hope this helps a little more.
-OB
I think me comments were a little off...let me try again.
1. If you take IE6 as an example, with the default margins, the max width you can use before the content gets cut off is roughly 540-550px. 760px is a typical width to use for 800x600 screens, allowing for the room need for default padding, margins & scrollbars.
2. Many modern browsers now have the 'shrink to fit' option for printing web pages. Unfortunately, IE6 is still a very popular browser & does not have this feature. Width:auto may be the closest you can get to 'shrink to fit'.
3. I am not sure.
4. As mentioned before, you can use a print only style sheet. I can provide some additional links if the previous one is not sufficient.
I hope this helps a little more.
-OB
ASKER
Dear oceanbeach - thanks for your help. I'm familiar with Alistapart and I've been considering using div wrapper type tags (3 column liquid layout style) to code the site. Maybe that's my only solution here - as good old tables look like they just aren't going to cut it in a handheld/IE 6.0 etc. world. Looks like coding for all devices and platforms is getting complicated again. I hate to post a url - but please take a look at the page below and you can see why I don't think setting all tables to 740px will work.
http://www.netafim-usa-agriculture.com/Agriculture/p-filters/p-2-disc-kleen-filter-EE.php
I think I'd have to id to types of tables - one for the overall width and one for the rest of the pages. Which means it's probably easier to just move to <div> liquid style of design.
What do you think?
http://www.netafim-usa-agriculture.com/Agriculture/p-filters/p-2-disc-kleen-filter-EE.php
I think I'd have to id to types of tables - one for the overall width and one for the rest of the pages. Which means it's probably easier to just move to <div> liquid style of design.
What do you think?
ASKER
I just found a complete walkthrough of Adobe/Dreamweaver's method of making sites cross-platform friendly. It is not simple - but shows that even the software developers are jumping through the same hoops.
http://www.adobe.com/devnet/dreamweaver/articles/designing_css.html
Also this page ...
http://www.adobe.com/devnet/dreamweaver/css.html
Let me know if you have any comments and then I'll award you the points.
http://www.adobe.com/devnet/dreamweaver/articles/designing_css.html
Also this page ...
http://www.adobe.com/devnet/dreamweaver/css.html
Let me know if you have any comments and then I'll award you the points.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi aprillougheed,
http://www.adobe.com/devnet/dreamweaver/articles/designing_css.html seems like a pretty good place to start. And, http://www.adobe.com/devnet/dreamweaver/css.html has a whole bunch of resources, although I did not see anything specific to your scenario (besides, possibly switching to a div based layout).
It is definitely a challenge to try to prepare for all possible types of visitors, from web browser differences to screen size differences.
Let me know if you need some additional resources or if you would like fine tune a print style sheet for your site.
I hope this helps!
oceanbeach
http://www.adobe.com/devnet/dreamweaver/articles/designing_css.html seems like a pretty good place to start. And, http://www.adobe.com/devnet/dreamweaver/css.html has a whole bunch of resources, although I did not see anything specific to your scenario (besides, possibly switching to a div based layout).
It is definitely a challenge to try to prepare for all possible types of visitors, from web browser differences to screen size differences.
Let me know if you need some additional resources or if you would like fine tune a print style sheet for your site.
I hope this helps!
oceanbeach
ASKER
Hi oceanbeach - I accept the solution - but still will need to get back to you as to whether it worked.
Sure appreciate your help. At least I now know I'm not missing anything major and that everyone is struggling with the same issues.
I was just looking at recent browser statistics and it's getting really messy between IE6, IE7 and Firefox.
Thanks again for your help. April
Sure appreciate your help. At least I now know I'm not missing anything major and that everyone is struggling with the same issues.
I was just looking at recent browser statistics and it's getting really messy between IE6, IE7 and Firefox.
Thanks again for your help. April
Hi aprillougheed,
Glad to help out! I will check back to see how things go.
-OB
Glad to help out! I will check back to see how things go.
-OB
ASKER
Hi oceanbeach. You are brillant. I tested code you provided (see below) and indeed it prints without flipping into landscape. I really want to thank you again as I know it took some time and grey matter to figure out.
I may need your help again as I move through re-coding the site to be device independent - so I hope I'll catch you and can send more points your way. You deserve it.
I went to the bookstore and got three books to help me along - they are:
Designing with Web Standards (2nd Edition) - Jeffrey Zeldman;
CSS Mastery: Advanced Web Standards Solutions - Andy Budd
HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) - Elizabeth Castro;
Have a great evening. April
body, div, table, td {
width: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;}
div.boxlinks { display: none !important; } /*remove left sidebar */
I may need your help again as I move through re-coding the site to be device independent - so I hope I'll catch you and can send more points your way. You deserve it.
I went to the bookstore and got three books to help me along - they are:
Designing with Web Standards (2nd Edition) - Jeffrey Zeldman;
CSS Mastery: Advanced Web Standards Solutions - Andy Budd
HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) - Elizabeth Castro;
Have a great evening. April
body, div, table, td {
width: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;}
div.boxlinks { display: none !important; } /*remove left sidebar */
HI aprillougheed,
That is excellent to hear all is working. And, thanks for the nice words. Just glad I could help out!
Have a great day as well!
-OB
That is excellent to hear all is working. And, thanks for the nice words. Just glad I could help out!
Have a great day as well!
-OB
I do not believe you do not need to redesign your site. I think you are on the right track...you need to set some print styles...
external CSS...
<link href="print.css" rel="stylesheet" type="text/css" media="print">
embeded CSS...
<style type="text/css" media="print">
table { width: 740px; }
</style>
http://www.alistapart.com/articles/goingtoprint
I hope this helps!
oceanbeach