DesertWarrior
asked on
printing the content of a SCROLLING DIV
Hello Experts,
I have been looking for a way to do this for a long time... in vain.
I'm trying to print the content of a div that has a height of 320, and the OVERFLOW set to AUTO (so that the vertical scrolling bar appears).
<div id='contentstart' style="border : solid 0px; height=320; width:100%;overflow : auto; ">
the problem is that it prints only the visible area, not all the content of the div..
any help would be greatly appreciated
I have been looking for a way to do this for a long time... in vain.
I'm trying to print the content of a div that has a height of 320, and the OVERFLOW set to AUTO (so that the vertical scrolling bar appears).
<div id='contentstart' style="border : solid 0px; height=320; width:100%;overflow : auto; ">
the problem is that it prints only the visible area, not all the content of the div..
any help would be greatly appreciated
Maybe this will help :
http://www.w3.org/TR/REC-CSS2/visufx.html
Search for the word "print" and read on the "Scroll" attribute - perhaps that will solve your problem.
http://www.w3.org/TR/REC-CSS2/visufx.html
Search for the word "print" and read on the "Scroll" attribute - perhaps that will solve your problem.
consider something like:
<style type="text/css" media="screen">
div {
width: 100px;
height: 100px;
overflow: auto;
}
</style>
<style type="text/css" media="print">
div {
width: 100%;
}
</style>
<style type="text/css" media="screen">
div {
width: 100px;
height: 100px;
overflow: auto;
}
</style>
<style type="text/css" media="print">
div {
width: 100%;
}
</style>
<html>
<head>
<style type="text/css">
@media print {
#contentstart {
border: solid 0px;
width: 100%;
}
}
@media screen {
contentstart {
border: solid 0px;
height: 320px;
width: 100%;
overflow: auto;
}
}
</style>
</head>
<body>
<div id="contentstart">
</div>
</body>
<html>
<head>
<style type="text/css">
@media print {
#contentstart {
border: solid 0px;
width: 100%;
}
}
@media screen {
contentstart {
border: solid 0px;
height: 320px;
width: 100%;
overflow: auto;
}
}
</style>
</head>
<body>
<div id="contentstart">
</div>
</body>
<html>
ASKER
guys, none of your solutions work.
I always get the same layout when printed
take a look at this image, maybe it will clear things a bit :
http://img338.imageshack.us/img338/9868/div4lp.gif
I always get the same layout when printed
take a look at this image, maybe it will clear things a bit :
http://img338.imageshack.us/img338/9868/div4lp.gif
ASKER
you see, the last record IS NOT Mainstream Canada, there are many more records in that div that never appear when printed.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Perhaps there is some other issue with the page. Can we see the source?
Did you remeber to remove the style attributes from the div tag itself? They will override the styles defined in the header.
ASKER
mshogren,
I DID forget to take off the style attributes from the div tag itself :-|
your code works perfectly!
Thank you and thanks to all who participated.
I DID forget to take off the style attributes from the div tag itself :-|
your code works perfectly!
Thank you and thanks to all who participated.
You will need to set up a seperate style for printing as shown in the examples here:
http://www.meyerweb.com/eric/articles/webrev/200001.html
Basically you will have to create a style for the contentstart DIV for the screen and one for printing. I would advise you always to put the style in a seperate stylesheet or at least in a style tag in the header of the page to make it easier to maintain. I will post an example.