[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 215
  • Last Modified:

dynamic content crossing the html layout in print preview

I have simple asp recordset that I retrieve from db and load into local variable and write the dynamic content to into a table. everything works fine, but when I print preview - the data is crossing over the <td>

Recordset --
strTextContent


<table>
<tr><td><%=strTextContent%></td></tr>
</table>
0
krisred
Asked:
krisred
2 Solutions
 
_Stilgar_Commented:
That is because the page size is smaller when printing. Reformat the page to look well on 800 pixels wide screens, and this issue will disappear as well. There's no other option - maybe try to extend the td, but the key is in the design.

Stilgar.
0
 
rcmbCommented:
Stilgar is correct -- the problem is in the design

Try:
<table width="100%">
<tr><td><%=strTextContent%></td></tr>
</table>

This will cause the table to stretch to the width of the page whether in view or print.

The other thing I would recommend is to write the table as the db call is occuring like so:

<table>
  <tr>
    <td>First</td>
    <td>Second</td>
  </tr>
<%
SQL = "SELECT * FROM table WHERE First = 'Smith'"
while not Rs.eof
%>
  <tr>
    <td><%=Rs("First")%></td>
    <td><%=Rs("Second")%></td>
  </tr>
<%
  rs.movenext
  wend
%>

Curtis
0
 
oceanbeachCommented:
Hello krisred,

If rcmb's suggestion does not work for you (eg you must use a fixed width), you may want to try print styles...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>html</title>

<style type="text/css" media="print">
table { width: 540px; }
</style>

</head>
<body>
<table width="760px;">
  <tr>
    <td><%=strTextContent%></td>
  </tr>
</table>
</body>
</html>

In addition, you can use print styles for other things, such as removing all images, removing an entire sidebar (such as a menu), removing (or reducing) all padding & margins, etc.  These style are only applied when printing.

I hope this helps!

oceanbeach
0
 
kevp75Commented:
just piping in...

@oceanbeach.

not to doubt you or discredit you or anyting, however I have found that "removing" content from a page via CSS is not very effective for print.  Most methods simply "hide" the content from showing.  So in a case of a fixed width website (simple 2 column layout), if you simply hide one of the columns you are left with potentially extra whitespace on the page.

I've found that by using a querystring, and some ss-code, you can do a simple if..then statement and take it out of the page completely with no white space...

Good way to do smaller stuff though...like little icon images, 'print this page' links, etc...
0
 
oceanbeachCommented:
@kevp75:

"not to doubt you or discredit you or anything" - no hard feelings here.  That is one of the wonderful things about EE...you can find multiple ways to do similar things.  Sometimes you find a better (or easier) way to do things and other times you find additional methods that may not be the best, but might work better for certain designs.

Removing the content altogether would seem to be the most 'bullet-proof'.

@krisred:

I would just like to add that sometimes visibility:hidden is used when display:none should be used.

This may be helpful for krisred (I apologize if this is old news to kevp75)...

"visiblility: hidden - nothing will be visible but unlike display: none, the element and its dimensions will still affect layout."
http://www.htmldog.com/reference/cssproperties/visibility/

Display and Visibility example:
http://www.quirksmode.org/js/blockinvi.html

I hope this helps!

-OB
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now