问题描述:

I have been strugling with email html.

1) is that the pay now a button is not all green in Outlook. But look correct in gmail web

2) The width of the table/ td on 560px is not applied in Outlook

3) In gmail web mail the body color light green is domaninated by the table white color.

4) I tried to make margin on 10px on the HR by the comment. But in Outlook the margin (top) is much higher.

Please help before it get grey hairs :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<br><br>

<body background="#cbebff" bgcolor="#cbebff" style="background:#cbebff; bgcolor:#cbebff; min-height:1000px; color:#000000;font-family:Arial, Arial, sans-serif; font-size:12px">

<center>

<table border="0" cellpadding="15" cellspacing="0" width="560px">

<tr>

<td colspan="2" width="560px" align="center" valign="top" bgcolor="#3590FF"><img src="http://www.domain.de/images/stories/help_filer/Toplogo.png"></td>

</tr>

<tr>

<td valign="top" bgcolor="#FFFFFF" background="#FFFFFF"><strong>{hello} {fullname}.</strong></td>

<td valign="top" bgcolor="#FFFFFF" background="#FFFFFF"><div align="right">{order_number_lbl} : {order_number}<br>{order_date_lbl} : {order_date}</div></td>

</tr>

<tr valign="top">

<td colspan="2" width="560px" bgcolor="#FFFFFF" background="#FFFFFF">{payment_missing}

<br><br><br><br>

<a style="width: 250px; padding: 15px; bgcolor:#62c462; background:#62c462; font-weight: bold; color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;" href="https://www.domain.de/index.php?option=com_epay&set_amount={order_total_mail}&set_invoice={order_id}&set_phone={billing_address_start}{phone}{billing_address_end}">{pay_now_lbl}</a>

<br><br><br><br>

<table width="100%" style="padding: 10px;border: 1px solid #CCCCCC;border-radius: 3px;background: #fafafa;">

<tr>

<td><strong>{customer_note_lbl} :</strong><br><hr style="margin: 10px !important;">{customer_note}</td>

</tr>

</table>

<br><br>

</td>

</tr>

</table>

<br>

<table width="560" border="0">

<tr>

<td><div align="center"><font color="#000000"><strong>Print.dk - Berlin</strong></font></div></td>

</tr>

<tr>

<td><hr>

<div align="center"><font color="#000000"><strong>Email : <a href="[email protected]">[email protected]</a> - Web : <a href="www.printdk.de">www.printdk.de</a></strong><a href="www.printdk.de"></a></font></div></td>

</tr>

</table>

</center>

</body>

</html>

Pics :

https://www.printdk.de/tmp/mail_gmail.jpg

https://www.printdk.de/tmp/mail_outlook.jpg

网友答案:

try this.

1 :

<p style="width: 150px; padding: 10px; text-align: center; bgcolor:#62c462; background:#62c462; font-weight: bold;  color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;"><a  href="your_link">Pay Now</a></p>
相关阅读:
Top