Results 1 to 3 of 3

Thread: Strange printing problem using 'position:absolute'

Hybrid View

  1. #1
    Join Date
    Apr 2003

    Strange printing problem using 'position:absolute'


    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 ?



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

  2. #2
    Join Date
    Apr 2003
    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
    Atlanta, GA

    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:

    You may think of using this instead:
    <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>
    (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