dynamic content crossing the html layout in print preview

Posted on 2007-08-03
Last Modified: 2010-04-09
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 --

Question by:krisred
    LVL 14

    Expert Comment

    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.

    LVL 12

    Accepted Solution

    Stilgar is correct -- the problem is in the design

    <table width="100%">

    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:

    SQL = "SELECT * FROM table WHERE First = 'Smith'"
    while not Rs.eof

    LVL 12

    Assisted Solution

    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" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

    <table width="760px;">

    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!

    LVL 25

    Expert Comment

    just piping in...


    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 little icon images, 'print this page' links, etc...
    LVL 12

    Expert Comment


    "not to doubt you or discredit you or anything" - no hard feelings here.  That is one of the wonderful things about 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'.


    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."

    Display and Visibility example:

    I hope this helps!


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

    737 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

    20 Experts available now in Live!

    Get 1:1 Help Now