Extra characters showing up for spaces if viewed by iphone

This is a strange one, maybe it's an issue with just the iphones 🤨

My Email notification for the form looks good if viewed in any email program on a computer. But if I view the same email using my iphone, there are extra characters that show instead of spaces. They look like an 'A' with a squigly symbol over it. If I view the email using a different PDA, it shows up correctly as the spacing with no weird characters.

My email html code

<div class="form_item">
<div class="form_element cf_heading">
<h3><span style="font-size: 12pt; color: #ff6600; font-style: normal;">Dealer Booth Rental Form<br /></span><br /></h3>
</div>
</div>
<div class="form_item">
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label"><strong style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;">Tradeshow Information<br /></strong>Tradeshow Name:   </label>{text_3}</div>
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">Location of Show:   </label>{text_4}</div>
</div>
<div class="form_item">
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">Show Dates:   </label>{text_1}</div>
</div>
<div class="form_item">
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">Exhibit Hours:   </label>{text_8}</div>
</div>
<div class="form_item">
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">Booth #:   </label>{text_11}</div>
</div>
<div class="form_item">
<div> </div>
</div>
<div class="form_item">
<div class="form_element cf_text"><strong style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;">Contact Information</strong></div>
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">Name:   </label>{text_10}</div>
</div>
<div class="form_item">
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">Phone Number:   </label>{text_12}</div>
</div>
<div class="form_item">
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">Email:   </label>{text_17}<br /><br /></div>
</div>
<div class="form_item">
<div>
<div class="form_item">
<div class="form_element cf_text"><strong style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;">Onsite Contact Information if Different from Contact Information</strong></div>
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">Name:   </label>{text_28}</div>
</div>
<div class="form_item">
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">Cell Phone:   </label>{text_30}</div>
</div>
 </div>
</div>
<div class="form_item">
<div class="form_element cf_text"><strong style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;">Shipping Address where you want the booth shipped to:</strong></div>
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">Street Address:   </label>{text_14}</div>
</div>
<div class="form_item">
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">City:   </label>{text_24}</div>
</div>
<div class="form_item">
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label">State:   </label>{text_13}</div>
</div>
<div class="form_item">
<div class="clear" style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label>Zip/Postal Code:   </label>{text_23}<br /></div>
</div>
<div class="form_item">
<div style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;">Date booth needs to arrive by:   {text_28} </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea" style="font-size: 9pt; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;"><label class="cf_label"><br />Comments:   </label>{text_16}</div>
<div> </div>
</div>
<div class="form_item">
<div> </div>
</div>
<div class="form_item">
<div> </div>
</div>

So between each field label: and the actual answers are 3 spaces. But these spaces show up as the 'A' with squigly on it.
Does anyone have this problem also? Is there a solution to this? Not critical but just thought I'd ask. Thanks.

Hi Sophy,

This is some kind of a character set issue. You often see odd characters like this when translating from one set to another.

I've not idea what causes this particular one though. In general browsers should ignore multiple spaces after the first - so the three spaces in the html shoudl diaplay as one space on the screen. If you need more than one space then either use the   entity or better, add padding-right to the styling of the label tag.

Bob

Hi Sophy,

did you try with Safari on PC ? do you have iPhone 2.2 system version ? my iPhone view the contact forms data received very fine!

Regards
Max

Hello, Bob and Max,

I don't have a MAC (pc) so wasn't able to view it there. My iphone is system version is 2.2 also. I tried   - that didn't work either. I'll try the padding-right to the styling label next. Thanks for your suggestions.

-Sophy