Need help with HTML templates (mhelpdesk)

DocGreen

DocGreen

Well-Known Member
Reaction score
44
Location
South Bend, IN
Hey guys, I'm having some trouble getting my mhelpdesk invoice templates to fit on 1 page... the biggest problem I'm seeing is that the signatures are HUGE. I would like to put them next to the Subtotal/Tax/Total/Due fields, but when I try to do it in their designer it doesn't come out right.

Is there anyone here who's good with HTML & tables that would be willing to fix the coding for me?

Here's the current HTML: https://dl.dropboxusercontent.com/u/52704155/template%20html.txt

And here's a graphic representation of what I want:

If someone could help me out with this I'd be incredibly grateful!!

Capture.JPG
 
I've not used mhelpdesk before, but I assume using a Div would be fine? If you use div position:absolute; you can set the exact position of the Div on the page using margins. Then just place the table inside that Div.

Anyway, try the example below. I only had a few minutes to knock it up so let me know if it works. The template looks like it could be much simpler/cleaner IMO.

<style type="text/css">
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.pageContainer {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
}
.section {
width: 100%;
margin-bottom: 20px;
page-break-inside: avoid;
}
.leftbox, .rightbox {
width: 48%;
background-color: #F3F3F3;
}
.customer_section, .contact_section {
width: 100%;
}
.customer_section, .customer_section td, .contact_section, .contact_section td {
border: 0px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading {
font-size: 12px;
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
border-bottom: 0px;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.customer_heading {
text-align: left;
}
.amountdue_section {
text-align: right;
border: 2px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.ticket_section, .item_section, .asset_section, .appointment_section {
width: 100%;
text-align: left;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.customer_label {
text-align: left;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
vertical-align: top;
white-space: nowrap;
}
.ticket_label, .ticket_label2, .wolabel, .amountdue_label {
text-align: left;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
vertical-align: top;
white-space: nowrap;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.ticket_label {
width: 120px;
}
.customer_label {
width: 10%;
margin-left: 10px;
}
.customer_text {
width: 40%;
}
.ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text {
text-align: left;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.ticket_text {
width: auto;
}
.wotext_number {
text-align: right;
white-space: nowrap;
}
.wotext, .wotext_number {
font-size: 12px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
}
.ticket_label2 {
width: 120px;
}
.ticket_text2 {
width: auto;
}
.mycompany_info {
font-size: 16px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
}
.customer_section, .customer_label, .customer_text, .contact_section, .wolabel {
text-align: left;
background-color: #F3F3F3;
}
.amountdue_label {
text-align: right;
}
.top_right_text {
font-size: 36px;
font-family: "Arial Rounded MT Bold";
color: #DDDDDD;
text-align: center;
}
.largeHeader {
font-size: 24px;
}
.subtotal_label {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-align: right;
white-space: nowrap;
}
.subtotal_text {
border-bottom: solid 1px #999999;
text-align: right;
}
.ivItemLabel, .ivItemText {
text-align: left;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
padding: 3px 3px 3px 3px;
}
.ivItemLabel {
background-color: #CCCCCC;
}
.ivItemText {
background-color: #F3F3F3;
}
.dates_and_terms {
float: right;
margin: 3px 0px 3px 0px;
padding: 1px;
border-collapse: collapse;
border: 1px solid #CCCCCC;
width: 100%;
}
.dates_and_terms_label {
background-color: #EEEEEE;
border-left: 1px solid #CCCCCC;
padding: 0px 3px 0px 3px;
width: 25%;
}
</style>
<div class="pageContainer">
<table class="section">
<tbody>
<tr>
<td><table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="mycompany_info" style="width: 20%;">_MyCompanyLogo_&nbsp;</td>
<td class="mycompany_info" style="width: 35%;"><div style="text-align: left; font-size: 20px;"><span style="font-family: Arial;"><span style="font-family: Arial;"> PC Pit Crew</span><br />
</span></div>
<span style="font-family: Arial;">
<div style="text-align: left;"><span style="text-align: center;">_MyCompanyWebsite_</span> </div>
<span style="text-align: center; color: #000000; font-family: Arial; font-size: 16px; font-weight: bold;">
<div style="text-align: left;">_MyCompanyEmail_</div>
</span>
<div style="text-align: left;">Ph. _MyCompanyPhone_</div>
<div style="text-align: left;">Fax _MyCompanyFax_</div>
</span></td>
<td style="width: 35%; text-align: right; vertical-align: top;"><div style="text-align: right; padding-bottom: 12px; font-size: 22px;"><span style="font-family: Arial;"> Invoice #: _InvoiceNumber_</span></div>
<div class="contact_section">
<div class="customer_heading"><span style="font-family: Arial;"> Bill To</span></div>
<span style="font-family: Arial;"> _BillTo_ </span></div>
<div class="contact_section">
<div class="customer_heading"><span style="font-family: Arial;"> Service Location</span></div>
<span style="font-family: Arial;"> _ServiceLocationAddress_ </span></div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table class="dates_and_terms" border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td class="dates_and_terms_label" style="border-left-color: #cccccc; border-left-width: 0px; border-left-style: none;"> Issued date: _IssuedDate_ &nbsp; </td>
<td class="dates_and_terms_label"> Due date: _DueDate_ &nbsp; </td>
<td class="dates_and_terms_label"> Terms: _Terms_ &nbsp; </td>
<td class="dates_and_terms_label"> P.O. #: _PONumber_ &nbsp; </td>
</tr>
</tbody>
</table>
<table class="section item_section">
<tbody>
<tr>
<td class="ticket_heading"> Item(s) </td>
</tr>
<tr>
<td> _Items_ </td>
</tr>
</tbody>
</table>

<div>
<div style="position:absolute;">
<table width="550" border="0" cellspacing="5" cellpadding="5" class="section">
<tr height="100px" style="vertical-align:bottom;">
<td width="350px">_Signature_</td>
<td >_SignatureDate_</td>
</tr>
<tr height="50px">
<td width="">Signature</td>
<td width="">Date</td>
</tr>
</table>

</div>
<table class="section">
<tbody>
<tr>
<td style="width: 60%; vertical-align: top;">&nbsp;</td>
<td style="width: 40%; vertical-align: top;"><table width="100%" style="float: right;" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td class="subtotal_label"> Subtotal &nbsp; </td>
<td class="subtotal_text">&nbsp; _SubTotal_ </td>
</tr>
<tr>
<td class="subtotal_label"> Tax &nbsp; </td>
<td class="subtotal_text">&nbsp; _Tax_ </td>
</tr>
<tr>
<td class="subtotal_label" style="width: 25%; font-weight: bold;"> Total &nbsp; </td>
<td class="subtotal_text" style="width: 75%;">&nbsp; _Total_ </td>
</tr>
<tr>
<td class="subtotal_label" style="width: 25%; font-weight: bold;"> Paid &nbsp; </td>
<td class="subtotal_text" style="width: 75%;">&nbsp; _Paid_ </td>
</tr>
<tr>
<td class="subtotal_label" style="width: 25%; font-weight: bold;"> Balance Due &nbsp; </td>
<td class="subtotal_text" style="width: 75%;">&nbsp; _BalanceDue_ </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<table class="section">
<tbody>
<tr>
<td class="ticket_heading"> Notes </td>
</tr>
<tr>
<td> _Notes_ <br /></td>
</tr>
</tbody>
</table>
<table class="section">
<tbody>
<tr>
<td class="ticket_heading"> Terms </td>
</tr>
<tr>
<td> Unless otherwise specified, payment for services is due upon completion. &nbsp;Payment may be made by Cash, Check, Major Credit Card, or Paypal. &nbsp;Credit/Debit payments made via phone will incur an additional 3% processing fee.&nbsp; Customer acknowledges by signature that all equipment has been returned in proper condition.</td>
</tr>
</tbody>
</table>
<div class="pageContainer" style="width: 728px;">
<table class="section" style="width: 728px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 364px; vertical-align: top;"><br /></td>
<td style="width: 364px; vertical-align: top;"><table style="width: 364px;" border="0" cellspacing="6" cellpadding="2">
<tbody>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- Signature -->
</div>
Click to expand...
 
Last edited by a moderator:
Simmy said:
I've not used mhelpdesk before, but I assume using a Div would be fine? If you use div position:absolute; you can set the exact position of the Div on the page using margins. Then just place the table inside that Div.

Anyway, try the example below. I only had a few minutes to knock it up so let me know if it works. The template looks like it could be much simpler/cleaner IMO.
Click to expand...

Yeah, Div is fine... pretty sure the template is already using some as is.

I plugged in your modified HTML and the outcome is below. It's close... but not quite where it needs to be. Also, I noticed that it's missing the signature & date lines that were originally there. (FYI... the tags "_Signature_ and _SignatureDate_" are used by Mhelpdesk)

Thanks for the help!! I really appreciate it :D

attempt2.JPG
 
looks like you're nearly there but you could always paste the code into an HTML wysiwyg editor and position the sig accordingly.
 
OfficeTechs said:
looks like you're nearly there but you could always paste the code into an HTML wysiwyg editor and position the sig accordingly.
Click to expand...

That's kinda what Mhelpdesk has on their site, but I think it's more of a What-You-See-Is-ALMOST-What-You-Get... I did that exact thing and it looked great in the editor... not so much with the finished product.
 
Really tough to fix without all the pieces but try these two.

Try this one:

Code: 
<style type="text/css">
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.pageContainer {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
}
.section {
width: 100%;
margin-bottom: 20px;
page-break-inside: avoid;
}
.leftbox, .rightbox {
width: 48%;
background-color: #F3F3F3;
}
.customer_section, .contact_section {
width: 100%;
}
.customer_section, .customer_section td, .contact_section, .contact_section td {
border: 0px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading {
font-size: 12px;
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
border-bottom: 0px;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.customer_heading {
text-align: left;
}
.amountdue_section {
text-align: right;
border: 2px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.ticket_section, .item_section, .asset_section, .appointment_section {
width: 100%;
text-align: left;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.customer_label {
text-align: left;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
vertical-align: top;
white-space: nowrap;
}
.ticket_label, .ticket_label2, .wolabel, .amountdue_label {
text-align: left;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
vertical-align: top;
white-space: nowrap;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.ticket_label {
width: 120px;
}
.customer_label {
width: 10%;
margin-left: 10px;
}
.customer_text {
width: 40%;
}
.ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text {
text-align: left;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.ticket_text {
width: auto;
}
.wotext_number {
text-align: right;
white-space: nowrap;
}
.wotext, .wotext_number {
font-size: 12px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
}
.ticket_label2 {
width: 120px;
}
.ticket_text2 {
width: auto;
}
.mycompany_info {
font-size: 16px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
}
.customer_section, .customer_label, .customer_text, .contact_section, .wolabel {
text-align: left;
background-color: #F3F3F3;
}
.amountdue_label {
text-align: right;
}
.top_right_text {
font-size: 36px;
font-family: "Arial Rounded MT Bold";
color: #DDDDDD;
text-align: center;
}
.largeHeader {
font-size: 24px;
}
.subtotal_label {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-align: right;
white-space: nowrap;
}
.subtotal_text {
border-bottom: solid 1px #999999;
text-align: right;
}
.ivItemLabel, .ivItemText {
text-align: left;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
padding: 3px 3px 3px 3px;
}
.ivItemLabel {
background-color: #CCCCCC;
}
.ivItemText {
background-color: #F3F3F3;
}
.dates_and_terms {
float: right;
margin: 3px 0px 3px 0px;
padding: 1px;
border-collapse: collapse;
border: 1px solid #CCCCCC;
width: 100%;
}
.dates_and_terms_label {
background-color: #EEEEEE;
border-left: 1px solid #CCCCCC;
padding: 0px 3px 0px 3px;
width: 25%;
}
</style>
<div class="pageContainer">
<table class="section">
  <tbody>
    <tr>
      <td>
      <table style="width: 100%;" border="0"
 cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td class="mycompany_info" style="width: 20%;">_MyCompanyLogo_&nbsp;</td>
            <td class="mycompany_info" style="width: 35%;">
            <div style="text-align: left; font-size: 20px;"><span
 style="font-family: Arial;"><span
 style="font-family: Arial;"> PC Pit Crew</span><br>
            </span></div>
            <span style="font-family: Arial;">
            <div style="text-align: left;"><span
 style="text-align: center;">_MyCompanyWebsite_</span> </div>
            <span
 style="text-align: center; color: rgb(0, 0, 0); font-family: Arial; font-size: 16px; font-weight: bold;">
            <div style="text-align: left;">_MyCompanyEmail_</div>
            </span>
            <div style="text-align: left;">Ph.
_MyCompanyPhone_</div>
            <div style="text-align: left;">Fax
_MyCompanyFax_</div>
            </span></td>
            <td
 style="width: 35%; text-align: right; vertical-align: top;">
            <div
 style="text-align: right; padding-bottom: 12px; font-size: 22px;"><span
 style="font-family: Arial;"> Invoice #: _InvoiceNumber_</span></div>
            <div class="contact_section">
            <div class="customer_heading"><span
 style="font-family: Arial;"> Bill To</span></div>
            <span style="font-family: Arial;"> _BillTo_ </span></div>
            <div class="contact_section">
            <div class="customer_heading"><span
 style="font-family: Arial;"> Service Location</span></div>
            <span style="font-family: Arial;">
_ServiceLocationAddress_ </span></div>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
<table class="dates_and_terms" border="0"
 cellpadding="2" cellspacing="0">
  <tbody>
    <tr>
      <td class="dates_and_terms_label"
 style="border-left: 0px none rgb(204, 204, 204);"> Issued
date: _IssuedDate_ &nbsp; </td>
      <td class="dates_and_terms_label"> Due date:
_DueDate_ &nbsp; </td>
      <td class="dates_and_terms_label"> Terms: _Terms_
&nbsp; </td>
      <td class="dates_and_terms_label"> P.O. #:
_PONumber_ &nbsp; </td>
    </tr>
  </tbody>
</table>
<table class="section item_section">
  <tbody>
    <tr>
      <td class="ticket_heading"> Item(s) </td>
    </tr>
    <tr>
      <td> _Items_ </td>
    </tr>
  </tbody>
</table>
<div>
<div style="position: absolute; top: 179px; left: 2px;">
<table class="section"
 style="left: 0px; width: 763px; top: 196px;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr style="vertical-align: bottom;" height="100">
      <td style="width: 350px; vertical-align: top;">_Signature_</td>
      <td style="vertical-align: top;">_SignatureDate_</td>
    </tr>
    <tr height="50">
      <td>Signature</td>
      <td>Date</td>
    </tr>
  </tbody>
</table>
</div>
<table class="section">
  <tbody>
    <tr>
      <td style="width: 60%; vertical-align: top;">&nbsp;</td>
      <td style="width: 40%; vertical-align: top;">
      <table style="float: right;" border="0"
 cellpadding="2" cellspacing="2" width="100%">
        <tbody>
          <tr>
            <td class="subtotal_label"> Subtotal
&nbsp; </td>
            <td class="subtotal_text">&nbsp;
_SubTotal_ </td>
          </tr>
          <tr>
            <td class="subtotal_label"> Tax &nbsp; </td>
            <td class="subtotal_text">&nbsp; _Tax_ </td>
          </tr>
          <tr>
            <td class="subtotal_label"
 style="width: 25%; font-weight: bold;"> Total &nbsp; </td>
            <td class="subtotal_text" style="width: 75%;">&nbsp;
_Total_ </td>
          </tr>
          <tr>
            <td class="subtotal_label"
 style="width: 25%; font-weight: bold;"> Paid &nbsp; </td>
            <td class="subtotal_text" style="width: 75%;">&nbsp;
_Paid_ </td>
          </tr>
          <tr>
            <td class="subtotal_label"
 style="width: 25%; font-weight: bold;"> Balance Due
&nbsp; </td>
            <td class="subtotal_text" style="width: 75%;">&nbsp;
_BalanceDue_ </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</div>
<table class="section">
  <tbody>
    <tr>
      <td class="ticket_heading"> Notes </td>
    </tr>
    <tr>
      <td> _Notes_ <br>
      </td>
    </tr>
  </tbody>
</table>
<table class="section">
  <tbody>
    <tr>
      <td class="ticket_heading"> Terms </td>
    </tr>
    <tr>
      <td> Unless otherwise specified, payment for services is
due upon completion. &nbsp;Payment may be made by Cash, Check,
Major Credit Card, or Paypal. &nbsp;Credit/Debit payments made via
phone will incur an additional 3% processing fee.&nbsp; Customer
acknowledges by signature that all equipment has been returned in
proper condition.</td>
    </tr>
  </tbody>
</table>
<div class="pageContainer" style="width: 728px;">
<table class="section" style="width: 728px;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="width: 364px; vertical-align: top;"><br>
      </td>
      <td style="width: 364px; vertical-align: top;">
      <table style="width: 364px;" border="0"
 cellpadding="2" cellspacing="6">
        <tbody>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</div>
<!-- Signature --> </div>


Or try this one:

Code: 
<style type="text/css">
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.pageContainer {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
}
.section {
width: 100%;
margin-bottom: 20px;
page-break-inside: avoid;
}
.leftbox, .rightbox {
width: 48%;
background-color: #F3F3F3;
}
.customer_section, .contact_section {
width: 100%;
}
.customer_section, .customer_section td, .contact_section, .contact_section td {
border: 0px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading {
font-size: 12px;
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
border-bottom: 0px;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.customer_heading {
text-align: left;
}
.amountdue_section {
text-align: right;
border: 2px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.ticket_section, .item_section, .asset_section, .appointment_section {
width: 100%;
text-align: left;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.customer_label {
text-align: left;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
vertical-align: top;
white-space: nowrap;
}
.ticket_label, .ticket_label2, .wolabel, .amountdue_label {
text-align: left;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
vertical-align: top;
white-space: nowrap;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.ticket_label {
width: 120px;
}
.customer_label {
width: 10%;
margin-left: 10px;
}
.customer_text {
width: 40%;
}
.ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text {
text-align: left;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
}
.ticket_text {
width: auto;
}
.wotext_number {
text-align: right;
white-space: nowrap;
}
.wotext, .wotext_number {
font-size: 12px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
}
.ticket_label2 {
width: 120px;
}
.ticket_text2 {
width: auto;
}
.mycompany_info {
font-size: 16px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
}
.customer_section, .customer_label, .customer_text, .contact_section, .wolabel {
text-align: left;
background-color: #F3F3F3;
}
.amountdue_label {
text-align: right;
}
.top_right_text {
font-size: 36px;
font-family: "Arial Rounded MT Bold";
color: #DDDDDD;
text-align: center;
}
.largeHeader {
font-size: 24px;
}
.subtotal_label {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-align: right;
white-space: nowrap;
}
.subtotal_text {
border-bottom: solid 1px #999999;
text-align: right;
}
.ivItemLabel, .ivItemText {
text-align: left;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-spacing: 0;
padding: 3px 3px 3px 3px;
}
.ivItemLabel {
background-color: #CCCCCC;
}
.ivItemText {
background-color: #F3F3F3;
}
.dates_and_terms {
float: right;
margin: 3px 0px 3px 0px;
padding: 1px;
border-collapse: collapse;
border: 1px solid #CCCCCC;
width: 100%;
}
.dates_and_terms_label {
background-color: #EEEEEE;
border-left: 1px solid #CCCCCC;
padding: 0px 3px 0px 3px;
width: 25%;
}
</style>
<div class="pageContainer">
<table class="section">
  <tbody>
    <tr>
      <td>
      <table style="width: 100%;" border="0"
 cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td class="mycompany_info" style="width: 20%;">_MyCompanyLogo_&nbsp;</td>
            <td class="mycompany_info" style="width: 35%;">
            <div style="text-align: left; font-size: 20px;"><span
 style="font-family: Arial;"><span
 style="font-family: Arial;"> PC Pit Crew</span><br>
            </span></div>
            <span style="font-family: Arial;">
            <div style="text-align: left;"><span
 style="text-align: center;">_MyCompanyWebsite_</span> </div>
            <span
 style="text-align: center; color: rgb(0, 0, 0); font-family: Arial; font-size: 16px; font-weight: bold;">
            <div style="text-align: left;">_MyCompanyEmail_</div>
            </span>
            <div style="text-align: left;">Ph.
_MyCompanyPhone_</div>
            <div style="text-align: left;">Fax
_MyCompanyFax_</div>
            </span></td>
            <td
 style="width: 35%; text-align: right; vertical-align: top;">
            <div
 style="text-align: right; padding-bottom: 12px; font-size: 22px;"><span
 style="font-family: Arial;"> Invoice #: _InvoiceNumber_</span></div>
            <div class="contact_section">
            <div class="customer_heading"><span
 style="font-family: Arial;"> Bill To</span></div>
            <span style="font-family: Arial;"> _BillTo_ </span></div>
            <div class="contact_section">
            <div class="customer_heading"><span
 style="font-family: Arial;"> Service Location</span></div>
            <span style="font-family: Arial;">
_ServiceLocationAddress_ </span></div>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
<table class="dates_and_terms" border="0"
 cellpadding="2" cellspacing="0">
  <tbody>
    <tr>
      <td class="dates_and_terms_label"
 style="border-left: 0px none rgb(204, 204, 204);"> Issued
date: _IssuedDate_ &nbsp; </td>
      <td class="dates_and_terms_label"> Due date:
_DueDate_ &nbsp; </td>
      <td class="dates_and_terms_label"> Terms: _Terms_
&nbsp; </td>
      <td class="dates_and_terms_label"> P.O. #:
_PONumber_ &nbsp; </td>
    </tr>
  </tbody>
</table>
<table class="section item_section">
  <tbody>
    <tr>
      <td class="ticket_heading"> Item(s) </td>
    </tr>
    <tr>
      <td> _Items_ </td>
    </tr>
  </tbody>
</table>
<div>
<div style="position: absolute; top: 179px; left: 2px;">
<table class="section"
 style="left: 0px; top: 196px; width: 763px;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr style="vertical-align: bottom;" height="100">
      <td style="width: 350px; vertical-align: middle;">_Signature_</td>
      <td style="vertical-align: middle;">_SignatureDate_</td>
    </tr>
    <tr height="50">
      <td>Signature</td>
      <td>Date</td>
    </tr>
  </tbody>
</table>
</div>
<table class="section">
  <tbody>
    <tr>
      <td style="width: 60%; vertical-align: top;">&nbsp;</td>
      <td style="width: 40%; vertical-align: top;">
      <table style="float: right;" border="0"
 cellpadding="2" cellspacing="2" width="100%">
        <tbody>
          <tr>
            <td class="subtotal_label"> Subtotal
&nbsp; </td>
            <td class="subtotal_text">&nbsp;
_SubTotal_ </td>
          </tr>
          <tr>
            <td class="subtotal_label"> Tax &nbsp; </td>
            <td class="subtotal_text">&nbsp; _Tax_ </td>
          </tr>
          <tr>
            <td class="subtotal_label"
 style="width: 25%; font-weight: bold;"> Total &nbsp; </td>
            <td class="subtotal_text" style="width: 75%;">&nbsp;
_Total_ </td>
          </tr>
          <tr>
            <td class="subtotal_label"
 style="width: 25%; font-weight: bold;"> Paid &nbsp; </td>
            <td class="subtotal_text" style="width: 75%;">&nbsp;
_Paid_ </td>
          </tr>
          <tr>
            <td class="subtotal_label"
 style="width: 25%; font-weight: bold;"> Balance Due
&nbsp; </td>
            <td class="subtotal_text" style="width: 75%;">&nbsp;
_BalanceDue_ </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</div>
<table class="section">
  <tbody>
    <tr>
      <td class="ticket_heading"> Notes </td>
    </tr>
    <tr>
      <td> _Notes_ <br>
      </td>
    </tr>
  </tbody>
</table>
<table class="section">
  <tbody>
    <tr>
      <td class="ticket_heading"> Terms </td>
    </tr>
    <tr>
      <td> Unless otherwise specified, payment for services is
due upon completion. &nbsp;Payment may be made by Cash, Check,
Major Credit Card, or Paypal. &nbsp;Credit/Debit payments made via
phone will incur an additional 3% processing fee.&nbsp; Customer
acknowledges by signature that all equipment has been returned in
proper condition.</td>
    </tr>
  </tbody>
</table>
<div class="pageContainer" style="width: 728px;">
<table class="section" style="width: 728px;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="width: 364px; vertical-align: top;"><br>
      </td>
      <td style="width: 364px; vertical-align: top;">
      <table style="width: 364px;" border="0"
 cellpadding="2" cellspacing="6">
        <tbody>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</div>
<!-- Signature --> </div>
 
Last edited:
I don't have mhelpdesk, so I can't see if this looks exactly right, but plug this in. Seems like it would work.

Code: 
<style type="text/css">
    body
    {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    .pageContainer
    {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    }
    .section
    {
    width: 100%;
    margin-bottom: 20px;
    page-break-inside: avoid;
    }
    .leftbox, .rightbox
    {
    width: 48%;
    background-color: #F3F3F3;
    }
    .customer_section, .contact_section
    {
    width: 100%;
    }
    .customer_section, .customer_section td, .contact_section, .contact_section td
    {
    border: 0px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading
    {
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    background-color: #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    border-bottom: 0px;
    border-top: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    }
    .customer_heading
    {
    text-align: left;
    }
    .amountdue_section
    {
    text-align: right;
    border: 2px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_section, .item_section, .asset_section, .appointment_section
    {
    width: 100%;
    text-align: left;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    }
    .ticket_label, .ticket_label2, .wolabel, .amountdue_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_label
    {
    width: 120px;
    }
    .customer_label
    {
    width: 10%;
    margin-left: 10px;
    }
    .customer_text
    {
    width: 40%;
    }
    .ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_text
    {
    width: auto;
    }
    .wotext_number
    {
    text-align: right;
    white-space: nowrap;
    }
    .wotext, .wotext_number
    {
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    }
    .ticket_label2
    {
    width: 120px;
    }
    .ticket_text2
    {
    width: auto;
    }
    .mycompany_info
    {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    }
    .customer_section, .customer_label, .customer_text, .contact_section, .wolabel
    {
    text-align: left;
    background-color: #F3F3F3;
    }
    .amountdue_label
    {
    text-align: right;
    }
    .top_right_text
    {
    font-size: 36px;
    font-family: "Arial Rounded MT Bold";
    color: #DDDDDD;
    text-align: center;
    }
    .largeHeader
    {
    font-size: 24px;
    }
    .subtotal_label
    {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    }
    .subtotal_text
    {
    border-bottom: solid 1px #999999;
    text-align: right;
    }
    .ivItemLabel, .ivItemText
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 3px 3px 3px 3px;
    }
    .ivItemLabel
    {
    background-color: #CCCCCC;
    }
    .ivItemText
    {
    background-color: #F3F3F3;
    }
    .dates_and_terms
    {
    float: right;
    margin: 3px 0px 3px 0px;
    padding: 1px;
    border-collapse: collapse;
    border: 1px solid #CCCCCC;
    width: 100%;
    }
    .dates_and_terms_label
    {
    background-color: #EEEEEE;
    border-left: 1px solid #CCCCCC;
    padding: 0px 3px 0px 3px;
    width: 25%;
    }
</style>
<div class="pageContainer">
<table class="section">
    <tbody>
        <tr>
            <td>
            <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td class="mycompany_info" style="width: 20%;">_MyCompanyLogo_&nbsp;</td>
                        <td class="mycompany_info" style="width: 35%;">
                        <div style="text-align: left; font-size: 20px;"><span style="font-family: Arial;"><span style="font-family: Arial;">
                        PC Pit Crew</span><br />
                        </span></div>
                        <span style="font-family: Arial;">
                        <div style="text-align: left;"><span style="text-align: center;">_MyCompanyWebsite_</span>
                        </div>
                        <span style="text-align: center; color: #000000; font-family: Arial; font-size: 16px; font-weight: bold;">
                        <div style="text-align: left;">_MyCompanyEmail_</div>
                        </span>
                        <div style="text-align: left;">Ph. _MyCompanyPhone_</div>
                        <div style="text-align: left;">Fax _MyCompanyFax_</div>
                        </span></td>
                        <td style="width: 35%; text-align: right; vertical-align: top;">
                        <div style="text-align: right; padding-bottom: 12px; font-size: 22px;"><span style="font-family: Arial;">
                        Invoice #: _InvoiceNumber_</span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Bill To</span></div>
                        <span style="font-family: Arial;">
                        _BillTo_
                        </span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Service Location</span></div>
                        <span style="font-family: Arial;">
                        _ServiceLocationAddress_
                        </span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="dates_and_terms" border="0" cellspacing="0" cellpadding="2">
    <tbody>
        <tr>
            <td class="dates_and_terms_label" style="border-left-color: #cccccc; border-left-width: 0px; border-left-style: none;">
            Issued date: _IssuedDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Due date: _DueDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Terms: _Terms_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            P.O. #: _PONumber_ &nbsp;
            </td>
        </tr>
    </tbody>
</table>
<table class="section item_section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Item(s)
            </td>
        </tr>
        <tr>
            <td>
            _Items_
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 60%; vertical-align: top;">
            <table style="width: 90%;" border="0" cellspacing="6" cellpadding="2">
                <tbody>
                    <tr>
                        <td colspan="2">
                        &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 75%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        <br />
                        _Signature_<br />
                        </td>
                        <td valign="bottom" style="width: 22%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        <br />
                        _SignatureDate_<br />
                        </td>
                    </tr>
                    <tr>
                        <td>
                        Signature
                        </td>
                        <td>
                        Date
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td style="width: 40%; vertical-align: top;">
            <table width="100%" style="float: right;" border="0" cellspacing="2" cellpadding="2">
                <tbody>
                    <tr>
                        <td class="subtotal_label">
                        Subtotal &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _SubTotal_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label">
                        Tax &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _Tax_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Total &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Total_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Paid &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Paid_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Balance Due &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _BalanceDue_
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Notes
            </td>
        </tr>
        <tr>
            <td>
            _Notes_
            <br />
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Terms
            </td>
        </tr>
        <tr>
            <td>
            Unless otherwise specified, payment for services is due upon completion. &nbsp;Payment may be made by Cash, Check, Major Credit Card, or Paypal. &nbsp;Credit/Debit payments made via phone will incur an additional 3% processing fee.&nbsp; Customer acknowledges by signature that all equipment has been returned in proper condition.</td>
        </tr>
    </tbody>
</table>
<div class="pageContainer" style="width: 728px;">
<table class="section" style="width: 728px;" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td style="width: 364px; vertical-align: top;"><br />
            </td>
            <td style="width: 364px; vertical-align: top;">
            <table style="width: 364px;" border="0" cellspacing="6" cellpadding="2">
                <tbody>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</div>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 50%; vertical-align: top;">
            &nbsp;
            </td>
            <td style="width: 50%; vertical-align: top;">
            
            </td>
        </tr>
    </tbody>
</table>
<!-- Signature -->
</div>
 
@Simmy and @mikerog:

Thank guys for showing me how to effectively use quotes and codes to better present a recommendation.
 
Last edited:
Here's what your guys' codes did...

UCanFixit said:
Try this one:

Code: 
code 1 redacted...

Or try this one:

Code: 
code 2 redacted...
Click to expand...

Code 1:
attempt3.JPG



Code 2:
attempt4.JPG



mikeroq said:
I don't have mhelpdesk, so I can't see if this looks exactly right, but plug this in. Seems like it would work.

Code: 
code redacted...
Click to expand...

mikeroq's code:
attempt5.JPG



I really appreciate everyone's help with this! mikeroq's code is close, but it still leaves a large white space above the signature. It's possible that this is because of MhelpDesk, but I honestly don't know. I'd like to ask for Mhelpdesk's insight on this... but they told me they charge $100 for help with their templates :eek:, so...
 
Holy crap! My code looks horrible; however, it looked great in my WYSIWYG editor (both versions). Handoff to mikerog... sorry I couldn't help.
 
UCanFixit said:
Holy crap! My code looks horrible; however, it looked great in my WYSIWYG editor (both versions). Handoff to mikerog... sorry I couldn't help.
Click to expand...

First let me preface this by saying I don't know squat about html short of adding hyperlinks, images, etc.

I think the problem might be the "position" defined for the table. I keep seeing position="absolute" in the code and if it's doing what I assume, that would explain why it looks fine in the WYSIWYG editor, but not as a finished product. What happens, all those keywords (like _Items_ for example) appear as one line on your end... but when they're put into mHelpdesk they translate into the line-items for the invoice, so they become several lines, and vary from invoice to invoice. If you knew how to change the position from absolute to relative(or dynamic, or whatever term is used) that might solve the problem.
 
Can you give me the HTML of the actual invoice? I don't think there are many differences, but there might be.
 
I started a trial of mhelpdesk, try this

Code: 
<style type="text/css">
    body
    {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    .pageContainer
    {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    }
    .section
    {
    width: 100%;
    margin-bottom: 20px;
    page-break-inside: avoid;
    }
    .leftbox, .rightbox
    {
    width: 48%;
    background-color: #F3F3F3;
    }
    .customer_section, .contact_section
    {
    width: 100%;
    }
    .customer_section, .customer_section td, .contact_section, .contact_section td
    {
    border: 0px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading
    {
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    background-color: #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    border-bottom: 0px;
    border-top: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    }
    .customer_heading
    {
    text-align: left;
    }
    .amountdue_section
    {
    text-align: right;
    border: 2px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_section, .item_section, .asset_section, .appointment_section
    {
    width: 100%;
    text-align: left;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    }
    .ticket_label, .ticket_label2, .wolabel, .amountdue_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_label
    {
    width: 120px;
    }
    .customer_label
    {
    width: 10%;
    margin-left: 10px;
    }
    .customer_text
    {
    width: 40%;
    }
    .ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_text
    {
    width: auto;
    }
    .wotext_number
    {
    text-align: right;
    white-space: nowrap;
    }
    .wotext, .wotext_number
    {
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    }
    .ticket_label2
    {
    width: 120px;
    }
    .ticket_text2
    {
    width: auto;
    }
    .mycompany_info
    {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    }
    .customer_section, .customer_label, .customer_text, .contact_section, .wolabel
    {
    text-align: left;
    background-color: #F3F3F3;
    }
    .amountdue_label
    {
    text-align: right;
    }
    .top_right_text
    {
    font-size: 36px;
    font-family: "Arial Rounded MT Bold";
    color: #DDDDDD;
    text-align: center;
    }
    .largeHeader
    {
    font-size: 24px;
    }
    .subtotal_label
    {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    }
    .subtotal_text
    {
    border-bottom: solid 1px #999999;
    text-align: right;
    }
    .ivItemLabel, .ivItemText
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 3px 3px 3px 3px;
    }
    .ivItemLabel
    {
    background-color: #CCCCCC;
    }
    .ivItemText
    {
    background-color: #F3F3F3;
    }
    .dates_and_terms
    {
    float: right;
    margin: 3px 0px 3px 0px;
    padding: 1px;
    border-collapse: collapse;
    border: 1px solid #CCCCCC;
    width: 100%;
    }
    .dates_and_terms_label
    {
    background-color: #EEEEEE;
    border-left: 1px solid #CCCCCC;
    padding: 0px 3px 0px 3px;
    width: 25%;
    }
</style>
<div class="pageContainer">
<table class="section">
    <tbody>
        <tr>
            <td>
            <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td class="mycompany_info" style="width: 20%;">_MyCompanyLogo_&nbsp;</td>
                        <td class="mycompany_info" style="width: 35%;">
                        <div style="font-size: 20px; text-align: left;"><span style="font-family: Arial;"><span style="font-family: Arial;">
                        PC Pit Crew</span><br />
                        </span></div>
                        <span style="font-family: Arial;">
                        <div style="text-align: left;"><span style="text-align: center;">_MyCompanyWebsite_</span>
                        </div>
                        <span style="text-align: center; font-weight: bold; font-family: Arial; font-size: 16px; color: #000000;">
                        <div style="text-align: left;">_MyCompanyEmail_</div>
                        </span>
                        <div style="text-align: left;">Ph. _MyCompanyPhone_</div>
                        <div style="text-align: left;">Fax _MyCompanyFax_</div>
                        </span></td>
                        <td style="width: 35%; text-align: right; vertical-align: top;">
                        <div style="padding-bottom: 12px; font-size: 22px; text-align: right;"><span style="font-family: Arial;">
                        Invoice #: _InvoiceNumber_</span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Bill To</span></div>
                        <span style="font-family: Arial;">
                        _BillTo_
                        </span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Service Location</span></div>
                        <span style="font-family: Arial;">
                        _ServiceLocationAddress_
                        </span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="dates_and_terms" border="0" cellspacing="0" cellpadding="2">
    <tbody>
        <tr>
            <td class="dates_and_terms_label" style="border-left-color: #cccccc; border-left-width: 0px; border-left-style: none;">
            Issued date: _IssuedDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Due date: _DueDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Terms: _Terms_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            P.O. #: _PONumber_ &nbsp;
            </td>
        </tr>
    </tbody>
</table>
<table class="section item_section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Item(s)
            </td>
        </tr>
        <tr>
            <td>
            _Items_
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 60%; vertical-align: top;">
            <table style="width: 90%;" border="0" cellspacing="3" cellpadding="2">
                <tbody>
                    <tr>
                        <td style="width: 75%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _Signature_
                        </td>
                        <td valign="bottom" style="width: 22%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _SignatureDate_
                        </td>
                    </tr>
                    <tr>
                        <td>
                        Signature
                        </td>
                        <td>
                        Date
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td style="width: 40%; vertical-align: top;">
            <table width="100%" style="float: right;" border="0" cellspacing="2" cellpadding="2">
                <tbody>
                    <tr>
                        <td class="subtotal_label">
                        Subtotal &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _SubTotal_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label">
                        Tax &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _Tax_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Total &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Total_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Paid &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Paid_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Balance Due &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _BalanceDue_
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Notes
            </td>
        </tr>
        <tr>
            <td>
            _Notes_
            <br />
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Terms
            </td>
        </tr>
        <tr>
            <td>
            Unless otherwise specified, payment for services is due upon completion. &nbsp;Payment may be made by Cash, Check, Major Credit Card, or Paypal. &nbsp;Credit/Debit payments made via phone will incur an additional 3% processing fee.&nbsp; Customer acknowledges by signature that all equipment has been returned in proper condition.</td>
        </tr>
    </tbody>
</table>
<div class="pageContainer" style="width: 728px;">
<table class="section" style="width: 728px;" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td style="width: 364px; vertical-align: top;"><br />
            </td>
            <td style="width: 364px; vertical-align: top;">
            <table style="width: 364px;" border="0" cellspacing="6" cellpadding="2">
                <tbody>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</div>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 50%; vertical-align: top;">
            &nbsp;
            </td>
            <td style="width: 50%; vertical-align: top;">
            </td>
        </tr>
    </tbody>
</table>
<!-- Signature -->
</div>

Looks like:
bgpv7t.png
 
No good... damn, I was so excited too!

Is that pic you posted from inside mhelpdesk? I don't understand why mine looks different. Maybe because yours was signed on the web (desktop) and mine was signed via mobile? Maybe the signature fields are different sizes?? I don't know... here's what I got this time. I'll try a test invoice and sign it on the web and see what happens.

attempt6.JPG
 
GET THIS!!

So I tested my theory. Here's a test invoice created online and signed on Dolphin browser using mobile.mhelpdesk.com:

attempt8.jpg




NOW, here's that exact same invoice, signed using my desktop on the full site:

attempt7.jpg



SO... mikeroq, you've actually nailed it. Mhelpdesk just screwed the pooch and made 2 differently sized signature fields. WTF.
 
We can force the signature to be smaller. See what this code does.
Code: 
<style type="text/css">
    body
    {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    .pageContainer
    {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    }
    .section
    {
    width: 100%;
    margin-bottom: 20px;
    page-break-inside: avoid;
    }
    .leftbox, .rightbox
    {
    width: 48%;
    background-color: #F3F3F3;
    }
    .customer_section, .contact_section
    {
    width: 100%;
    }
    .customer_section, .customer_section td, .contact_section, .contact_section td
    {
    border: 0px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading
    {
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    background-color: #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    border-bottom: 0px;
    border-top: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    }
    .customer_heading
    {
    text-align: left;
    }
    .amountdue_section
    {
    text-align: right;
    border: 2px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_section, .item_section, .asset_section, .appointment_section
    {
    width: 100%;
    text-align: left;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    }
    .ticket_label, .ticket_label2, .wolabel, .amountdue_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_label
    {
    width: 120px;
    }
    .customer_label
    {
    width: 10%;
    margin-left: 10px;
    }
    .customer_text
    {
    width: 40%;
    }
    .ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_text
    {
    width: auto;
    }
    .wotext_number
    {
    text-align: right;
    white-space: nowrap;
    }
    .wotext, .wotext_number
    {
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    }
    .ticket_label2
    {
    width: 120px;
    }
    .ticket_text2
    {
    width: auto;
    }
    .mycompany_info
    {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    }
    .customer_section, .customer_label, .customer_text, .contact_section, .wolabel
    {
    text-align: left;
    background-color: #F3F3F3;
    }
    .amountdue_label
    {
    text-align: right;
    }
    .top_right_text
    {
    font-size: 36px;
    font-family: "Arial Rounded MT Bold";
    color: #DDDDDD;
    text-align: center;
    }
    .largeHeader
    {
    font-size: 24px;
    }
    .subtotal_label
    {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    }
    .subtotal_text
    {
    border-bottom: solid 1px #999999;
    text-align: right;
    }
    .ivItemLabel, .ivItemText
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 3px 3px 3px 3px;
    }
    .ivItemLabel
    {
    background-color: #CCCCCC;
    }
    .ivItemText
    {
    background-color: #F3F3F3;
    }
    .dates_and_terms
    {
    float: right;
    margin: 3px 0px 3px 0px;
    padding: 1px;
    border-collapse: collapse;
    border: 1px solid #CCCCCC;
    width: 100%;
    }
    .dates_and_terms_label
    {
    background-color: #EEEEEE;
    border-left: 1px solid #CCCCCC;
    padding: 0px 3px 0px 3px;
    width: 25%;
    }
	#sig img {
	max-height: 120px;
	width: auto;
	}
</style>
<div class="pageContainer">
<table class="section">
    <tbody>
        <tr>
            <td>
            <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td class="mycompany_info" style="width: 20%;">_MyCompanyLogo_&nbsp;</td>
                        <td class="mycompany_info" style="width: 35%;">
                        <div style="font-size: 20px; text-align: left;"><span style="font-family: Arial;"><span style="font-family: Arial;">
                        PC Pit Crew</span><br />
                        </span></div>
                        <span style="font-family: Arial;">
                        <div style="text-align: left;"><span style="text-align: center;">_MyCompanyWebsite_</span>
                        </div>
                        <span style="text-align: center; font-weight: bold; font-family: Arial; font-size: 16px; color: #000000;">
                        <div style="text-align: left;">_MyCompanyEmail_</div>
                        </span>
                        <div style="text-align: left;">Ph. _MyCompanyPhone_</div>
                        <div style="text-align: left;">Fax _MyCompanyFax_</div>
                        </span></td>
                        <td style="width: 35%; text-align: right; vertical-align: top;">
                        <div style="padding-bottom: 12px; font-size: 22px; text-align: right;"><span style="font-family: Arial;">
                        Invoice #: _InvoiceNumber_</span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Bill To</span></div>
                        <span style="font-family: Arial;">
                        _BillTo_
                        </span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Service Location</span></div>
                        <span style="font-family: Arial;">
                        _ServiceLocationAddress_
                        </span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="dates_and_terms" border="0" cellspacing="0" cellpadding="2">
    <tbody>
        <tr>
            <td class="dates_and_terms_label" style="border-left-color: #cccccc; border-left-width: 0px; border-left-style: none;">
            Issued date: _IssuedDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Due date: _DueDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Terms: _Terms_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            P.O. #: _PONumber_ &nbsp;
            </td>
        </tr>
    </tbody>
</table>
<table class="section item_section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Item(s)
            </td>
        </tr>
        <tr>
            <td>
            _Items_
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 60%; vertical-align: top;">
            <table style="width: 90%;" border="0" cellspacing="3" cellpadding="2">
                <tbody>
                    <tr>
                        <td id='sig' style="width: 75%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _Signature_
                        </td>
                        <td valign="bottom" style="width: 22%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _SignatureDate_
                        </td>
                    </tr>
                    <tr>
                        <td>
                        Signature
                        </td>
                        <td>
                        Date
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td style="width: 40%; vertical-align: top;">
            <table width="100%" style="float: right;" border="0" cellspacing="2" cellpadding="2">
                <tbody>
                    <tr>
                        <td class="subtotal_label">
                        Subtotal &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _SubTotal_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label">
                        Tax &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _Tax_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Total &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Total_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Paid &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Paid_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Balance Due &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _BalanceDue_
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Notes
            </td>
        </tr>
        <tr>
            <td>
            _Notes_
            <br />
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Terms
            </td>
        </tr>
        <tr>
            <td>
            Unless otherwise specified, payment for services is due upon completion. &nbsp;Payment may be made by Cash, Check, Major Credit Card, or Paypal. &nbsp;Credit/Debit payments made via phone will incur an additional 3% processing fee.&nbsp; Customer acknowledges by signature that all equipment has been returned in proper condition.</td>
        </tr>
    </tbody>
</table>
<div class="pageContainer" style="width: 728px;">
<table class="section" style="width: 728px;" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td style="width: 364px; vertical-align: top;"><br />
            </td>
            <td style="width: 364px; vertical-align: top;">
            <table style="width: 364px;" border="0" cellspacing="6" cellpadding="2">
                <tbody>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</div>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 50%; vertical-align: top;">
            &nbsp;
            </td>
            <td style="width: 50%; vertical-align: top;">
            </td>
        </tr>
    </tbody>
</table>
<!-- Signature -->
</div>
 
So... I can get a properly sized signature capture on my mobile device IF I use the full desktop-version of the mhelpdesk site... which isn't easy to navigate on a touch-screen.


I'm going to submit a ticket or something to have this fixed so that ALL signature capture fields are the proper (rectangular) size.
 
@mikerog: Kudos for that solution! I'd like to rep you but I'm a newbie so I guess I'm not authorized to do so yet.
 
You must log in or register to reply here.

Similar threads

timeshifter
Need help with a network that's gone through major growth spurt recently
2
Replies
38
Views
8K
YeOldeStonecat
YeOldeStonecat
A
Need Help in Website Designing
Replies
5
Views
1K
MCDIT
MCDIT
S
need some advice
Replies
16
Views
3K
SprinterTech-WI
SprinterTech-WI
DocGreen
[SOLVED] Need help with File/Folder permissions
2
Replies
28
Views
4K
Mokester
M
FoolishTech
All techs with d7II will receive d7x update...
Replies
3
Views
4K
FoolishTech
FoolishTech
Back
Top