Ronni Ronni - 1 year ago 62
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download