Create an HTML Invoice: Difference between revisions

Notice the use of both relative and absolute positioning in the span tags.  Absolute positioning prints at exactly those coordinates in relation to the top left corner of the browser.  The problem with this is that it can be unreliable by itself and can vary depending on the browser being used.  And if you have multiple pages, it gets worse.

Relative positioning means that the coordinates are relative to something else.  So, the premise is that for each page we need to establish an anchor other than the browser window itself.  The id="rel" span serves as the main anchor for the page, the id="abs" tag will always appear in relation to the outer span tag.

 

In the above case, the coordinates of id=”rel” are relative to the form and the coordinates of id=”abs” are relative to “rel”.

 

If you want to have multiple pages, simply force a pagebreak after the last span tag (inside the form tags) and add another complete set of html as shown above.