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>
krisredAsked:
Who is Participating?
 
rcmbConnect With a Mentor Commented:
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
 
_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
 
oceanbeachConnect With a Mentor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.