PDA

View Full Version : Print DIV area inside table



asifpervez
11-29-2007, 07:38 AM
Hi,

I am trying to print some area of Page. I tried to use the following code and it is not working inside the table. it works only if I place the DIV tage outside table. can any body help me out?


<style type="text/css">
@media print {
body * {
display:none;
}
#print_div {
display:block;
}
}
</style>

boogyman
11-29-2007, 02:08 PM
<style type="text/css" media="print">
...
</style>

use a separate stylesheet for printing


whatever your top level element is, set that to none, setting the body * is blotchy and may not even work in IE, but definitely shouldn't work in standard browsers.



<head>
<style type="text/css" media="print">
table#container {display:none}
div#print_div {display:block}
</style>
</head>
<body>

<table id="container">
... stuff ...
<tr>
<td><div id="print_div">something</div></td>
</tr>
... stuff ...
</table>

</body>

asifpervez
11-30-2007, 05:21 AM
Hi boogyman,

Thanks fore yours replay. It worked but now I am facing another problem. It is shows the text in the side of the table as it displays on the webpage. I want the printed area on the top and center of the page. Here is sample page and it shows how it prints when you will click it. Can you please help me tp prin text area properly? Thanks

http://www.hrucat.com/contents/course.php?c_id=24

asifpervez
11-30-2007, 05:53 AM
My problem is solved. here is what I did. Thanks for your support.


<style type="text/css" media="print">
table#hidden {display:none}
div#print {
display:block;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
position: absolute;
height: 100%;
width: 100%;
}
</style>

asifpervez
11-30-2007, 06:03 AM
ok my problem is solved. But I am having another issue now. I have one flash object in webpage. Now it also appears in the printing. All my text appears over that flash. It happens only in IE 6.0+, but I can print fine while I am using Firefox.

Any Clue? you can check for problem in following URL. http://www.hrucat.com/contents/course.php?c_id=24

Fixed broken link.

tech_support
11-30-2007, 06:15 AM
Try this:


<style type="text/css" media="print">
table#hidden {display:none}
div#print {
display:block;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
position: absolute;
height: 100%;
width: 100%;
}
object {
display:none;
}
</style>

asifpervez
11-30-2007, 07:30 AM
Thanks. Every thing is fine now. I appreciate your help and support

greendragonempire
12-31-2007, 05:25 PM
thanks, good info.

http://www.w3.org/TR/2003/WD-CSS21-20030915/media.html#at-media-rule
http://www.dynamicdrive.com/forums/showthread.php?t=27030
http://www.ozzu.com/ftopic32846.html
http://www.alistapart.com/stories/goingtoprint/

thompa
03-22-2008, 02:03 PM
Hi,

I am having a similar issue. I tried incorporating the ideas above.. but cannot seem to make it work as I want.
On the page I have a javascript menu (AllWebMenu) and I do not want this printed when the part of the page between DIV tags is output. The menu is not between the DIV tags - but still prints!

I call my linked CSS script from within a table with:-

<div class="print" align="center"><?php include("fixtureswinter1.html"); ?></div>

The script is:-

body {
visibility:hidden;
}

.print {

visibility:visible;
width: 100%;
}

@media print {
* {
margin: 0 !important;
padding: 0 !important;
}
h1, p {
display: none;
}
table#hidden {display:none}
div#print {
display:block;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
position: absolute;
height: 100%;
width: 100%;

}
.scorecard form {
border: none;
width: 100%;
}
}
@page {
margin: 0;
}

The menu in the table is called with:-

<span id='awmAnchor-nkmenu'>&nbsp;</span>

Any advice would be welcome!

Allan

bobby327
02-13-2010, 05:00 PM
<style type="text/css" media="print">
...
</style>

use a separate stylesheet for printing


whatever your top level element is, set that to none, setting the body * is blotchy and may not even work in IE, but definitely shouldn't work in standard browsers.



<head>
<style type="text/css" media="print">
table#container {display:none}
div#print_div {display:block}
</style>
</head>
<body>

<table id="container">
... stuff ...
<tr>
<td><div id="print_div">something</div></td>
</tr>
... stuff ...
</table>

</body>

Hi
I used your suggestion and seem to be stuck:

I built a css at and posted it at: http://roatan.ws/port-schedule/print.css

I then attached the style sheet to: http://roatan.ws/port-schedule/xindex.html

Added the script between head tags:
</style>

<style type="text/css" media="print">
table#roatanportschedulefebruary {display:none}
div#print_div {display:block}
</style>

Then added in the body:

<table id="roatanportschedulefebruary">
... stuff ...
<tr>
<td><div class="style159" id="print_div">something</div></td>
</tr>
... stuff ...
</table>

When I go to my loaded page: http://roatan.ws/port-schedule/xindex.html it does not work.

Any help very appreciated I know I am missing the mark...

Jim