Блог

Главная - Вопросы по программированию - Основной цвет и кнопка bg в электронном письме

Основной цвет и кнопка bg в электронном письме

#html #css #email

#HTML #css #Адрес электронной почты

Вопрос:

Я боролся с электронной почтой html.

1) заключается в том, что кнопка «Оплатить сейчас» не вся зеленая в Outlook. Но выглядеть правильно в gmail web

2) Ширина таблицы / td в 560 пикселей не применяется в Outlook

3) В веб-почте gmail основной цвет светло-зеленый доминирует над белым цветом таблицы.

4) Я попытался сделать отступ на 10 пикселей в HR с помощью комментария. Но в Outlook поле (вверху) намного выше.

Пожалуйста, помогите, прежде чем он получит седые волосы 🙂

 <!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_epayamp;set_amount={order_total_mail}amp;set_invoice={order_id}amp;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>

ФОТОГРАФИИ :
https://www.printdk.de/tmp/mail_gmail.jpg

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

Ответ №1:

попробуйте это.

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. вы должны указать ширину вашей внешней таблицы, чтобы получить светло-зеленый фон и поместить в него все содержимое вашего электронного письма. таким образом, вы можете сделать.

4: вместо того, чтобы давать margin , дайте padding вашему td . как иногда margin не отображается каким-либо почтовым движком.

надеюсь, это поможет.

вы можете ознакомиться здесь с рекомендациями по электронной почте HTML

Комментарии:

1. Идеальный. Спасибо за совет 🙂 Могу ли я попросить вас удалить мой домен по ссылке в вашем ответе? Это ошибка, которую я не изменил на домен. я не хочу, чтобы этот URL-адрес сканировался. Спасибо.

2. обновил мой ответ. это то же самое, что вы хотите? ссылка удалена

3. Отлично. Извините, что так сложно. Но вы удалили его только в 1) он все еще там в 2) Вы мне очень помогли 🙂

4. @Ronni … теперь проверьте .. это решило? с удовольствием. рад вам помочь. 🙂

Метки: