HTML-содержимое изменяется при тестировании в почтовом клиенте

Question

Мой контент выглядит именно так, как я хочу, при тестировании в браузере, но после запуска по электронной почте заголовок находится ниже баннера, а не на нем - как в браузере.

<tr>
    <td style="background-color: #FBFBFB;">
        <div style="position: relative; text-align: center; color: white;">
            <img src="iphonebannerv3.png" width="600" height="" alt="Nielsen Header Banner" border="0" style="width: 100%; max-width: 600px; height: auto; background: #FBFBFB; font-family: open sans, sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto;" class="g-img">
            <h1 style="margin: 0 0 0px 0; font-family: Open sans, sans-serif; font-size: 28px; text-align:center; line-height: 30px; color: #FFFFFF; font-weight: bold; position: absolute; top: 45%; left: 8%;">YOU'RE MISSING OUT<br> ON VOUCHERS</h1>
        </div>
    </td>
</tr>

Answer 1

Кодирование шаблонов электронной почты HTML может быть сложным.Вместо абсолютного позиционирования H1, попробуйте установить все с таблицами.Например, в вашем ТД я бы начал со свежей таблицы.Например:

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FBFBFB">
  <tr>
    <td align="center">	
	
		<table width="600px" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
		  <tbody>
			<tr>
			  <td>
				<img src="https://placehold.it/600x150" width="600" height="150" alt="Nielsen Header Banner" border="0" style="display: block; width: 600px; height: 150px;" class="g-img">
			  </td>
			</tr>
			<tr>
			  <td>
				 <table width="100%" border="0" cellspacing="0" cellpadding="0" style="background: #00aeef; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
				   <tbody>
					 <tr>
						 <td>&nbsp;</td>
					 </tr>  
					 <tr>
					   <td style="font-family: Arial, Verdana, sans-serif; font-size: 28px; text-align: center; line-height: 30px; color: #FFFFFF; font-weight: bold;"> YOU'RE MISSING OUT<br> ON VOUCHERS</td>
					   </tr>
						 <tr>
							 <td>&nbsp;</td>
						 </tr> 
					 </tbody>
				   </table>
				</td>
			</tr>
		  </tbody>
		</table>	

		</td>
	</tr>
</table>

Вы можете использовать тэг Style в своем CSS, чтобы сохранить ваши стили организованными, и использовать инструмент, такой как https://inlinestyler.torchbox.com/, чтобы переместить все ваши CSS встраиваемые до того, как вы закончите.шаблон.Кроме того,

• Не у всех в клиенте установлен Open Sans,
• Определите ширину и высоту ваших изображений.
• Для изображения не требуется весь шрифт CSSСтили.
• Установите все с помощью таблиц для лучших шаблонов кросс-почтовых клиентов.

Удачи!