Div positioning while printing multiple pages
<p>Good Afternoon,</p>

<p>So I have a page that has circle.png images being moved around using JS to circle certain fixed spots I have designated. Here is the code:</p>

<pre><code>&lt;script language='JavaScript' type='text/JavaScript'&gt;
&lt;!--
function move_img(str) {

switch(str){
case "ss":
document.getElementById('dwr_style').style.left=118 + "px";
document.getElementById('dwr_style2').style.left=118 + "px";
document.getElementById('dwr_style2').style.top=1410 + "px";
break;

case "rout":
document.getElementById('dwr_style').style.left=180 + "px";
document.getElementById('dwr_style2').style.left=180 + "px";
document.getElementById('dwr_style2').style.top=1410 + "px";
break;

case "fp":
document.getElementById('dwr_style').style.left=240 + "px";
document.getElementById('dwr_style2').style.left=240 + "px";
document.getElementById('dwr_style2').style.top=1410 + "px";
break;

case "dt_std":
document.getElementById('dt').style.left=390 + "px";
document.getElementById('dt2').style.left=390 + "px";
document.getElementById('dt2').style.top=1678 + "px";
document.getElementById('dt').style.width=70 + "px";
document.getElementById('dt2').style.width=70 + "px";
break;

case "dt_34":
document.getElementById('dt').style.left=465 + "px";
document.getElementById('dt').style.width=40 + "px";
document.getElementById('dt2').style.left=465 + "px";
document.getElementById('dt2').style.width=40 + "px";
document.getElementById('dt2').style.top=1678 + "px";
break;

case "dt_1":
document.getElementById('dt').style.left=505 + "px";
document.getElementById('dt').style.width=40 + "px";
document.getElementById('dt2').style.left=505 + "px";
document.getElementById('dt2').style.width=40 + "px";
document.getElementById('dt2').style.top=1678 + "px";
break;
}
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;img src="CalDoor.jpg"&gt;
&lt;div style="position:absolute;top:30;left:590;"&gt;1&lt;/div&gt;
&lt;input type=text style="position:absolute;border:none;top:185;left:100;" placeholder="Enter Job Name"&gt;
&lt;?php

$file = $_FILES['uploaded_file']['tmp_name'];
$file2 = nl2br(file_get_contents($file));
$file3 = str_replace('"' , '' , $file2);
$file4 = str_replace('ÿþ' , '' , $file3);
$line_break = explode("&lt;br /&gt;" , $file4);
$topchange=105;
$count = 0;
foreach ($line_break as $final1) {

    $final2 = explode(";" , $final1);
        $regex = '#\((([^()]+|(?R))*)\)#';
        preg_match($regex, $final1, $match);

            $type = "S";
            if ($final2[4] == "DF") {
              $type = "DF";
            }
            if ($final2[6] == "Glass") {
                $type = "GL";
            }
            if ($count == 24) {
                $topchange = 1097;
                $pagecount = 2;
                echo '&lt;img src="CalDoor.jpg" style="position:absolute;top:1000;left:8;"&gt;';
                echo '&lt;div style="position:absolute;top:1022;left:590;"&gt;2&lt;/div&gt;';
                echo '&lt;div style="position:absolute;top:1022;left:640;"&gt;'. $pagecount .'&lt;/div&gt;';
                echo "&lt;img src='circle.png' id='fds' style='position:absolute;Top:1297;Left:20;' width=80 height=25&gt;";
                echo "&lt;img src='circle.png' id='dwr_style2' style='position:absolute;Top:1410;Left:118;' width=70 height=30&gt;";
                echo "&lt;img src='circle.png' id='dt2' style='position:absolute;Top:1678;Left:392;' width=70 height=30&gt;";

            }


         echo "&lt;div style='position:absolute;TOP:". $topchange .";LEFT:395;'&gt;". $final2[1] ."&lt;/div&gt;";
         echo "&lt;div style='position:absolute;TOP:". $topchange .";LEFT:450;'&gt;". $final2[3] ."&lt;/div&gt;";
         echo "&lt;div style='position:absolute;TOP:". $topchange .";LEFT:365;'&gt;". $match[0] ."&lt;/div&gt;";
         echo "&lt;div style='position:absolute;TOP:". $topchange .";LEFT:335;'&gt;". $type ."&lt;/div&gt;";
         echo "&lt;div style='position:absolute;TOP:". $topchange .";LEFT:532;'&gt;". $final2[6] ."&lt;/div&gt;";
            $changeamt = 24.2;
            $topchange = $topchange + $changeamt;
            $count++;



}
echo '&lt;div style="position:absolute;top:30;left:640;"&gt;'; 
echo $pagecount; 
echo '&lt;/div&gt;';

?&gt;
&lt;img src='circle.png' id='fds' style='position:absolute;Top:305;Left:20;' width=80 height=25&gt;
&lt;img src='circle.png' id='dwr_style' style='position:absolute;Top:420;Left:118;' width=70 height=30&gt;
&lt;img src='circle.png' id='dt' style='position:absolute;Top:685;Left:392;' width=70 height=30&gt;
&lt;div class='no-print' style='position:absolute;TOP:50;LEFT:900;'&gt;
&lt;b&gt;Drawer Type: &lt;/b&gt;&lt;br&gt;
&lt;input type=button onClick=move_img('ss') value='Solid Stock'&gt;
&lt;br&gt;
&lt;input type=button onClick=move_img('rout') value='Routed'&gt;
&lt;br&gt;
&lt;input type=button onClick=move_img('fp') value='Five Piece'&gt;
&lt;br&gt;&lt;br&gt;
&lt;/div&gt;

&lt;div class='no-print' style='position:absolute;TOP:158;LEFT:900;'&gt;
&lt;b&gt;Door Thickness: &lt;/b&gt;&lt;br&gt;
&lt;input type=button onClick=move_img('dt_std') value='Std 13/16"'&gt;
&lt;br&gt;
&lt;input type=button onClick=move_img('dt_34') value='3/4"'&gt;
&lt;br&gt;
&lt;input type=button onClick=move_img('dt_1') value='1"'&gt;
&lt;br&gt;&lt;br&gt;
&lt;/div&gt;
</code></pre>

<p>These circles are absolute because I am projecting them over my CalDoor image. When my file comes over and has over 24 lines of data, I have it project a second CalDoor image below, and the corresponding circles get added to match the upper. The only problem, is when I go to print, it shows the CalDoor images on 2 seperate pages like I want, the circles on the 2nd page retain their horizontal placement, but not their vertical. Any reason? </p>

<p>Thanks.</p>