Solved

pb with printing a table with a div in HTML

Posted on 2004-04-19
18
395 Views
Last Modified: 2010-04-06
hi everybody

when i want to print my internet page (or when i do print preview),
what i have is not what i see in the initial page (in the internet explorer page) :  the position of my div is not the same when i print the page.
SomeBody knows why is it happen ? How to correct this problem.
(I want that the position of the div to be absolute and not relative )

Here is my code :

<html>
<body>
<div style="position:absolute; z-index:2; left:330px; top:102px; height:15px; width:113px; background-color:beige ">
for the test</div>
<table border=1 style="background-color : red">
<tr style="background-color : #d1e2ff"; height=101>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
</tr>
</table>
<body>
</html>

thanks.
0
Comment
Question by:prince_jean
  • 7
  • 4
  • 4
  • +1
18 Comments
 
LVL 7

Expert Comment

by:MaB
Comment Utility
Hi prince_jean,
The only way to control the printed output is to use a different style with the media property. Something like this:

<html>

<head>
<style>
<!--
@media screen{
table        { background-color: red; border: 1px solid #FF0000 }
tr               { background-color: #d1e2ff; }
td               { border: 1px solid #FF0000 }

#pop             { position:absolute; z-index:2; left:330px; top:98px; height:15px; width:113px; background-color:beige; }
}
-->
</style>
<style>
<!--
@media print{
table        { background-color: red; border: 1px solid #FF0000 }
tr               { background-color: #d1e2ff; }
td               { border: 1px solid #FF0000 }

#pop             { position:absolute; z-index:2; left:330px; top:78px; height:15px; width:113px; background-color:beige; }
}
-->
</style>
</head>

<body>
<div id="pop">
for the test</div>
<table>
<tr height=101>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
<td width=29></td>
</tr>
</table>
<body>
</html>

BR MaB!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
The CSS position property does not apply to print, an neither does z-index.  Web page are optimized for display, not print.  If want it to print the way it displays then go to a static conventional layout that renders in listing order; or convert the page to a print friendly format like PDF.

Cd&
0
 
LVL 7

Expert Comment

by:MaB
Comment Utility
>The CSS position property does not apply to print

So this is another IE specific thing? It positions different for me in IE6.

BR MaB
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
How a property behaves for non-standard usage is implementor specific, so some browsers may support non-standard things.  IE certainly does a lot of that.  If a non-standard format works that is cool, but no guarantee it will still work tomorrow if there is a new release.

Almost anything can be made to print the way it looks on the screen for a specific setup.  However any change in browser, browser version, screen size, screen resolution, browser setting, user preferences, OS, print driver, printer setting, or printer brand can change the result.  Even with very detail print specific stylesheets that are 100% to standards there is no guarantee to how the page will print for a specific user.

That ais why for critica printing PDF is the common choice.  PDF is sent as an image, so it always prints the same way.

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
LOL - I think you left "toner type" out of that list :-)

As Cd& said, it all depends on the complexity of your layout. Something as simple as your test page will print "reasonably" reliably across printers - but only in certain cases. CSS complaint printers are expected to honor the position property - unless they're being nested, at which point it all breaks down.

The table will print roughly the same way, and the positioned box will as well, asssuming that each printer honors the "pixel" notation correctly. Remember - pixels are for screen, points are for print, so that will be the biggest problem right off the bat.

Just as an addition to MaB's comment, you don't necessarily need different stylesheets "unless" you plan on treating elements differently on screen and on paper. Using the media="all" property will cover both mediums sufficiently well.

<html>
<head>

<style type="text/css" media="all">
body    { margin:0; }
table   { background-color:#FF0000; padding:0; height:101px; }
tr      { background-color: #d1e2ff; }
td      { border: 1px solid #FF0000; }
#pop    { position:absolute; left:330px; top:81px; height:19px; width:113px; background-color:beige; }
</style>

</head>
<body>
<div id="pop">for the test</div>
<table cellspacing="0">
<tr>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
<td width=29>1</td>
</tr>
</table>
</body>
</html>
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Regardless of any code posted above - I would suggest that Cd&'s advice of using PDF or similar as an effective print layout medium is the way to go.
I want to make sure that you don't miconstrue my post as a solution - it certainly is not :-)
0
 

Author Comment

by:prince_jean
Comment Utility
ok as how can i print via PDF ?
do you have an example ?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
The HTML has to be converted to PDF.  The strongest PDF support is from adobe:

http://www.adobe.com/products/acrobat/acro_ad.html

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
>>do you have an example ?
Unfortunately it's not that simple :-)

It all depends on your needs - what you're trying to offer, etc.

Basically the approach is this.

1. Assemble your content and data.
2. Create 1 page in html for the web.
2. Create one page using a page-layout tool (Microsoft Word, PageMaker, Quark, etc.) and convert that to PDF for print.

You cannot just convert an html page to a PDF file, because whatever is wrong in the html page will also be wrong with the PDF.
PDF files are to ensure that "whatever" your pdf file looks like, it will print the same on all printers. This has nothing to do - however -  with whether the pdf file is set up correctly or not.

So - you have two choices:

1. Create separate html and print media documents.
2. Use the CSS Paged Media specification to help you achieve "limited" success in printing existing html layouts:
http://www.w3.org/TR/REC-CSS2/page.html

Either way - anything in your document/design/layout that deals with pixels, colors, tables and unknown page lengths is not going to work. It's simply not what html pages were meant to do...
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 7

Expert Comment

by:MaB
Comment Utility
Thanks Cd& and Sean for another good lesson in "how to do it right". It's always a pleasure to lean back and learn when the "heavy duters" enters a discussion.

BR MaB
0
 

Author Comment

by:prince_jean
Comment Utility
thank you for all your precious comments.

ok i will tell u what i want exactly.

i have an html big table like the html in my example code with
a lot of divs "on the table" (with a z-index bigger than the z-index table).

i know that all users that are watching on my web page are using
internet explorer 6 .

i want to put a print html button in page that will print my html page
in the same way as i see it. Or when the user click on the button it
will open an other page in a pdf format .

I want a solution that will print my html page (table + divs) in the same
way (it's very important) as i see it.

 
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
Comment Utility
Thank you for thanking us for our comments - but something tells me that you may have missed what we were saying.
You cannot create a table in html and expect it to be printed on paper the way it is displayed on screen. No if's, and's, or but's...

1. As Cd& suggested, go to adobe.com and get Adobe Acrobat. You will need this to create PDF files.
2. Once installed, open your web page and select File > Print.
3. Make sure Acrobat Distiller is selected and select "Print"
4. Save the pdf file inside your web.
5. Open the PDF file to see how your html page has been generated. Whatever you see in the PDF is exactly what will print.
6. If the PDF is not what it should be, then go back to Step 2, and adjust your table as required until Step 5 produces the desired results.

Some helpful hints:
1. z-index - again as Cd& pointed out - does not have a print equivalent. Anything absolutely positioned will print on top of normal generated content anyways.
2. If your table contains widths or heights using pixels, change them to percentages. In other words:

This:
<table width="900">
  <tr>
    <td width="450"></td>
    <td width="225"></td>
    <td width="225"></td>
  </tr>
</table>

becomes this:

<table width="100%">
  <tr>
    <td width="50%"></td>
    <td width="25%"></td>
    <td width="25%"></td>
  </tr>
</table>

The rest is hit and miss - but designing for print is a completely different process and requires different rules.

Again, as reference, read up on the CSS Paged Media specification:
http://www.w3.org/TR/REC-CSS2/page.html

You may also find this article useful:
http://www.alistapart.com/articles/goingtoprint/

And this one:
http://www.meyerweb.com/eric/articles/webrev/200001.html
0
 

Author Comment

by:prince_jean
Comment Utility
ok my problem is that the html code is very dynamic.
i build my html table in function of the xml reponse that i have received.
so i can't prepared before the html table in pdf format.
all users see a different html table, and can change it in function of their request.
i want to give the possibility to my users to print the table when they want.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
>>ok my problem is that the html code is very dynamic.

I understand, but the problem in that sentence is not the word "dynamic", it's the word "html".
HTML is a language used to display information on the screen, it is not for printing content and there is only so much you can do with current CSS support.

You may want to look at this as a possible option:
http://www.meadroid.com/scriptx/index.asp
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
I believe Cd& has had more experience with that product, so he may be able to offer more concise information.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Hmmm.....
http://www.meadroid.com/scriptx/index.asp

That would make me uncomfortable, and probably does not solve this.  It is activeX and I don't like to recommend activeX except for intranet usage because of security risks that will cause some users to not accept it; and some corporate firewalls that will block it.

It uses registry changes to alter settings and is useful where problems can be resolved with changes in user settings.  I don't think that is the case here.  The problem is not settings, the problem as Sean pointed out, is HTML.  The code won't work for print rendering.  Alternative CSS might be able to generate a printable version, but there is no way that the HTML page you are using is going to display and print the same way.

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Thanks Cd& - I appreciate the additional info...
0
 

Author Comment

by:prince_jean
Comment Utility
thank u for ur help
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now