Magento Sale Emails Not Centered
Question
I can't figure out why the sale email I received is not centered. Here is the screen shot from my email account (yahoo mails)
It is floated to left. But in the HTML template, it has already set the width to 100% for the outer table,
<table cellspacing="0" cellpadding="0" border="0" width="100%">
and 650 to the inner table,
<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="10" border="0" width="650" style="border:1px solid #E0E0E0;">
Anything else should I set?
This is the entire HTML code from, app/locale/yourlanguage/template/email/sales/order_new.html
<body style="background:#F6F6F6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<div style="background:#F6F6F6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" valign="top" style="padding:20px 0 20px 0">
<!-- [ header starts here] -->
<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="10" border="0" width="650" style="border:1px solid #E0E0E0;">
<tr>
<td valign="top"><a href="{{store url=""}}"><img src="{{var logo_url}}" alt="{{var logo_alt}}" style="margin-bottom:10px;" border="0"/></a></td>
</tr>
<!-- [ middle starts here] -->
<tr>
<td valign="top">
<h1 style="font-size:22px; font-weight:normal; line-height:22px; margin:0 0 11px 0;">Hello, {{htmlescape var=$order.getBillingAddress().getName()}}</h1>
<p style="font-size:12px; line-height:16px; margin:0 0 10px 0;">
Thank you for your order from {{var store.getFrontendName()}}.
Once your package ships we will send an email with a link to track your order.
If you have any questions about your order please contact us at <a href="mailto:{{config path='trans_email/ident_support/email'}}" style="color:#1E7EC8;">{{config path='trans_email/ident_support/email'}}</a> or call us at <span class="nobr">{{config path='general/store_information/phone'}}</span> Monday - Friday, 8am - 5pm PST.
</p>
<p style="font-size:12px; line-height:16px; margin:0;">Your order confirmation is below. Thank you again for your business.</p>
</td>
</tr>
<tr>
<td>
<h2 style="font-size:18px; font-weight:normal; margin:0;">Your Order #{{var order.increment_id}} <small>(placed on {{var order.getCreatedAtFormated('long')}})</small></h2>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th align="left" width="325" bgcolor="#EAEAEA" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Billing Information:</th>
<th width="10"></th>
<th align="left" width="325" bgcolor="#EAEAEA" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Payment Method:</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA;">
{{var order.getBillingAddress().format('html')}}
</td>
<td> </td>
<td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA;">
{{var payment_html}}
</td>
</tr>
</tbody>
</table>
<br/>
{{depend order.getIsNotVirtual()}}
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<thead>
<tr>
<th align="left" width="325" bgcolor="#EAEAEA" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Shipping Information:</th>
<th width="10"></th>
<th align="left" width="325" bgcolor="#EAEAEA" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Shipping Method:</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA;">
{{var order.getShippingAddress().format('html')}}
</td>
<td> </td>
<td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA;">
{{var order.getShippingDescription()}}
</td>
</tr>
</tbody>
</table>
<br/>
{{/depend}}
{{layout handle="sales_email_order_items" order=$order}}
<p style="font-size:12px; margin:0 10px 10px 0">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="center" style="background:#EAEAEA; text-align:center;"><center><p style="font-size:12px; margin:0;">Thank you again, <strong>{{var store.getFrontendName()}}</strong></p></center></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
1 answers
solution1
1 ACCPTED 2014-06-29 01:43:17
Yahoo wrap the content of an email within a div which has a style of display:table.
<div style="display:table">
YOUR EMAIL
</div>
This means that your outer table is acting like a table placed inside a table cell of unspecified width, and as such it's 100% is 100% of that cell. Because your content only pushes that table out by 650px, the outer table is also 650px.
The only solution I can think of, though there may be other methods, would be to put some text content outside of your table. If you can run a line of text within that display:table div (but not within a fixed-width element) then it will expand that cell to fit it all in, and your table's 100% will then become 100% of that.
More importantly, I'd note that all email clients render emails slightly differently. If it doesn't look actually wrong, I'd probably leave it as is. Trying to get emails looking the same in every client is very hard for little gain.
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.