Ronni Ronni - 1 month ago 4
HTML Question

Body color and button bg in Email

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="ronni@print.dk">Info@printdk.de</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

Answer

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>

2 :

<tr valign="top">
<td colspan="2" width="560px" bgcolor="#FFFFFF" background="#FFFFFF">

<table width="560" style="border-collapse:collapse;" cellpadding="0" cellspacing="0" >
<tr>
<td>Payment Losing</td>
<tr><td>
	<br><br><br><br>
<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>
</td></tr>
</tr>
	
</table>
</td>
</tr>

3 : you have to give width to your outer table to get light green background and put all your email contents in it. this way you can do.

4 : instead of giving margin give padding to your td. as sometimes margin won't render by some email engine.

hope this helps.

you can refer here for HTML Email Guidelines