E-Mail body extremely wide with MFMailComposeViewControllerDelegate
Question
I'm trying to generate and send a HTML mail using MFMailComposeViewControllerDelegate.
However after running the app and opening up the mail view I saw this :
There is an excess of "gray" space both to the left and right of the actual body of my E-Mail. What is causing this? Is it a problem in my HTML or in the obj-c code?
edit: as requested here is the html as I think its a safe bet that my problem lies here - Especially since I've never written a single line of it and hacked this together from an online service. Any help would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0085)file://localhost/Users/litemac/Documents/DamcoAppCoreData/DamcoAppCoreData/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><style type="text/css">
/* Mobile-specific Styles */
@media only screen and (max-device-width: 480px) {
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w10], td[class=w10], img[class=w10] { width:10px !important; }
table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }
table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
table[class=w60], td[class=w60], img[class=w60] { width:10px !important; }
table[class=w125], td[class=w125], img[class=w125] { width:80px !important; }
table[class=w130], td[class=w130], img[class=w130] { width:55px !important; }
table[class=w140], td[class=w140], img[class=w140] { width:90px !important; }
table[class=w160], td[class=w160], img[class=w160] { width:180px !important; }
table[class=w170], td[class=w170], img[class=w170] { width:100px !important; }
table[class=w180], td[class=w180], img[class=w180] { width:80px !important; }
table[class=w195], td[class=w195], img[class=w195] { width:80px !important; }
table[class=w220], td[class=w220], img[class=w220] { width:80px !important; }
table[class=w240], td[class=w240], img[class=w240] { width:180px !important; }
table[class=w255], td[class=w255], img[class=w255] { width:185px !important; }
table[class=w275], td[class=w275], img[class=w275] { width:135px !important; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w300], td[class=w300], img[class=w300] { width:140px !important; }
table[class=w325], td[class=w325], img[class=w325] { width:95px !important; }
table[class=w360], td[class=w360], img[class=w360] { width:140px !important; }
table[class=w410], td[class=w410], img[class=w410] { width:180px !important; }
table[class=w470], td[class=w470], img[class=w470] { width:200px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] { display:none !important; }
table[class=h0], td[class=h0] { height: 0 !important; }
p[class=footer-content-left] { text-align: center !important; }
#headline p { font-size: 30px !important; }
.article-content, #left-sidebar{ -webkit-text-size-adjust: 90% !important; -ms-text-size-adjust: 90% !important; }
.header-content, .footer-content-left {-webkit-text-size-adjust: 80% !important; -ms-text-size-adjust: 80% !important;}
img { height: auto; line-height: 100%;}
}
/* Client-specific Styles */
#outlook a { padding: 0; } /* Force Outlook to provide a "view in browser" button. */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
body { background-color: #ececec; margin: 0; padding: 0; }
img { outline: none; text-decoration: none; display: block;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: red !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
} /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include <code _tmplitem="282" > blocks in email. */
code {
white-space: normal;
word-break: break-all;
}
#background-table { background-color: #ececec; }
/* Webkit Elements */
#top-bar { border-radius:6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background-color: #043948; color: #e7cba3; }
#top-bar a { font-weight: bold; color: #e7cba3; text-decoration: none;}
#footer { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; -webkit-font-smoothing: antialiased; }
/* Fonts and Content */
body, td { font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }
.header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content { font-size: 12px; color: #e7cba3; }
.header-content a { font-weight: bold; color: #e7cba3; text-decoration: none; }
#headline p { color: #e7cba3; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
#headline p a { color: #e7cba3; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #9a9661; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }
.article-title a { color: #9a9661; text-decoration: none; }
.article-title.with-meta {margin-bottom: 0;}
.article-meta { font-size: 13px; line-height: 20px; color: #ccc; font-weight: bold; margin-top: 0;}
.article-content { font-size: 13px; line-height: 18px; color: #444444; margin-top: 0px; margin-bottom: 18px; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }
.article-content a { color: #00707b; font-weight:bold; text-decoration:none; }
.article-content img { max-width: 100% }
.article-content ol, .article-content ul { margin-top:0px; margin-bottom:18px; margin-left:19px; padding:0; }
.article-content li { font-size: 13px; line-height: 18px; color: #444444; }
.article-content li a { color: #00707b; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 12px; line-height: 15px; color: #e2e2e2; margin-top: 0px; margin-bottom: 15px; }
.footer-content-left a { color: #e7cba3; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 11px; line-height: 16px; color: #e2e2e2; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right a { color: #e7cba3; font-weight: bold; text-decoration: none; }
#footer { background-color: #043948; color: #e2e2e2; }
#footer a { color: #e7cba3; text-decoration: none; font-weight: bold; }
#permission-reminder { white-space: normal; }
#street-address { color: #e7cba3; white-space: normal; }
</style>
<!--[if gte mso 9]>
<style _tmplitem="282" >
.article-content ol, .article-content ul {
margin: 0 0 0 24px;
padding: 0;
list-style-position: inside;
}
</style>
<![endif]--></head><body><table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
<tbody><tr>
<td align="center" bgcolor="#ececec">
<table class="w640" style="margin:0 10px;" width="640" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w640" width="640" height="20"></td></tr>
<tr>
<td class="w640" width="640">
<table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tbody><tr>
<td class="w15" width="15"></td>
<td class="w325" width="350" valign="middle" align="left">
<table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w325" width="350" height="8"></td></tr>
</tbody></table>
<div class="header-content" align="right"><span class="hide"> | <time lang="en">Damco Sales Visit</time> | <timestamp>12-12-2012</timestamp> | </span></div>
<table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w325" width="350" height="8"></td></tr>
</tbody></table>
</td>
<td class="w30" width="10"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td id="header" class="w640" width="640" align="center" bgcolor="#FFFFFF">
<div align="left" style="text-align: left">
<img id="customHeaderImage" label="Header Image" editable="true" width="144" src="Logo.png" class="w640" border="0" align="top" style="display: inline">
</div>
</td>
</tr>
<tr id="customer-info-row"><td class="w640" width="640" height="30" bgcolor="#ffffff"></td></tr>
<tr id="simple-content-row"><td class="w640" width="640" bgcolor="#ffffff">
<table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w30" width="30"></td>
<td class="w580" width="580">
<repeater>
<layout label="Text only">
<div align="left" class="article-content">
<multiline label="Description">
Dear //CUSTOMER_NAME//,<br>
<br>
<br>
Thank you for a pleasant meeting.
Please find below an overview of the products and services we discussed during our meeting
and the notes to the products/services we agreed follow up on.<br>
<br>
//NOTE_TO_CUSTOMER//
</multiline>
</div>
</layout>
<hr>
<layout label="Two columns">
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w275" width="275" valign="top">
<table class="w275" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w275" width="275">
<p align="left" class="article-title"><singleline label="Title">PREMIUM OFFERINGS</singleline></p>
<div align="left" class="article-content">
</div>
</td>
<td class="w275" width="30">
<td class="w275" width="275">
<p align="left" class="article-title"><singleline label="Title">NOTES</singleline></p>
<div align="left" class="article-content">
</div>
</td>
</tr>
//PREMIUM_PLACEHOLDER//
</tbody></table>
</td>
</tr>
</tbody></table>
</layout>
</repeater>
<repeater>
<layout label="Text only">
</layout>
<layout label="Two columns">
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w275" width="275" valign="top">
<table class="w275" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="w275" width="275">
<p align="left" class="article-title"><singleline label="Title">SUPPLY CHAIN OFFERINGS</singleline></p>
<div align="left" class="article-content">
</div>
</td>
<td class="w275" width="30"></td>
<td class="w275" width="275">
<p align="left" class="article-title"><singleline label="Title">NOTES</singleline></p>
<div align="left" class="article-content">
</div>
</td>
</tr>
//SUPPLYCHAIN_PLACEHOLDER//
</tbody></table>
</td>
</tr>
</tbody></table>
</layout>
</repeater>
<hr>
<layout label="Text only">
<div align="left" class="article-content">
<multiline label="Description">
Best regards,<br>
<br>
//SALESPERSON_NAME//<br>
M: //SALESPERSON_MOBILE//<br>
E: //SALESPERSON_EMAIL//<br>
W: <a href="http://dummypage.dk">http://www.dummy.com</a><br>
</multiline>
</div>
</layout>
</td>
<td class="w30" width="30"></td>
</tr>
</tbody></table>
</td></tr>
<tr><td class="w640" width="640" height="15" bgcolor="#ffffff"></td></tr>
<tr>
<td class="w640" width="640">
<table id="footer" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#043948">
<tbody><tr><td class="w30" width="30"></td><td class="w580 h0" width="360" height="30"></td><td class="w0" width="60"></td><td class="w0" width="160"></td><td class="w30" width="30"></td></tr>
<tr>
<td class="w30" width="30"></td>
<td class="w580" width="360" valign="top">
<span class="hide"><p id="terms" align="left" class="footer-content-left"><span>More Text....</span><br>
<span></span><br>
<span><b>About Damco</b></span><br>
<span>Text....</span></p></span>
</td>
</tr>
<tr><td class="w30" width="30"></td><td class="w580 h0" width="360" height="15"></td> <td class="w0" width="60"></td><td class="w0" width="160"></td><td class="w30" width="30"> </td></tr>
</tbody></table>
</td>
</tr>
<tr><td class="w640" width="640" height="60"></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body></html>
2 answers
solution1
0 2012-11-04 21:03:27
Your problem is with the HTML. There isn't anything you can accidentally do in iOS or ObjectiveC to cause this problem.
It's tempting to copy HTML from bloat-inducing editors (I've been guilty of copying HTML generated by MS Word), but it unquestionably costs in the bloat factor, and more often than not causes undesired side effects. Importantly, the bloat makes it much more difficult to debug even simple HTML issues.
How about this: Rather than start with bloated HTML and pare back to avoid funky margins, why not start with minimal HTML and add just what you need to get the look you want?
Either way, you can (and should) test your HTML in a file in an HTML editor (or even a browser) before you plug it into your iOS app code. If you have an HTML problem, post it as a separate question here and someone will answer it quickly. Good luck!
solution2
0 ACCPTED 2012-11-09 11:27:06
Seems that this single line was causing all my issues;
body { width: 100% !important; }
Removing it resolved my problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Font style for e-mail body in VBA
Simplify e-mail body in string?
Formatting e-mail body HTML
Form to Set body of E-mail via mailto in E-Mail Newsletter
VBA IF-Condition within an HTML-Body of an E-Mail
Global HTML-Body of an E-Mail created in a VBA code
HyperLinking PNG images to open/download into an Outlook e-mail body
PowerShell e-mail - sending .csv in body with HTML
E-Mail Signature
E-mail template and outlook
Related Tags