www.webdeveloper.com
Results 1 to 3 of 3

Thread: Strange printing problem using 'position:absolute'

  1. #1
    Join Date
    Apr 2003
    Posts
    1

    Strange printing problem using 'position:absolute'

    Hi

    I have a problem with the absolute positioning of a table, drives me insane

    with this code you can create a little table 150px from top with two rows text and a little thin separator line in between those two rows
    everything ok, it seems
    BUT ! if you want to print the page (or just view the print preview) and print background images is enabled then you notice that my cute little separator line becomes a big thick fat line !
    When I omit the absolute positioning then the problem disappears but the table is part of a more complicated page, in which the absolute positioning is absolutely necessary.

    does anyone know the reason of this prob and how to solve it ?

    thanks

    Wouter

    <DIV style='position:absolute; top: 150px; '>
    <table width= 100 >
    <tr>
    <td>row content 1</td>
    </tr>
    <tr>
    <td bgcolor=black height=3px></td>
    </tr>
    <tr>
    <td>row content 2</td>
    </tr>
    </table>
    </DIV>
    Last edited by ZeeKoei; 04-11-2003 at 04:42 AM.

  2. #2
    Join Date
    Apr 2003
    Posts
    34
    You might try placing this with the META tag block-set:

    <STYLE TYPE="text/css" MEDIA="print">

    Please let me know if this helps.

    __ JIM G.

  3. #3
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571

    Re: Strange printing problem using 'position:absolute'

    Originally posted by ZeeKoei
    You are misusing the tables. That is the problem.

    <td bgcolor=black height=3px></td>
    This need not give you desired result. Table cell will resize to fit its content. Probably, while printing, your browser assumes the specific td to contain a space, while screen display assumes the td to be empty. May be the following link would help:
    http://devedge.netscape.com/viewsource/2002/img-table/

    You may think of using this instead:
    Code:
    <div style="position: absolute; top: 150px; left: 0; width: 100px">
        <p style="margin: 0; padding: 2px; border-bottom: solid black 3px">row content 1</p>
        <p style="margin: 0; padding: 2px;">row content 2</p>
    </div>
    (Replace padding: 2px with whatever cellpadding you used for your table)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles