2015-04-24 2 views
0

Я пытаюсь добавить текст поверх изображения, как показано ниже. Он работает со всеми почтовыми клиентами, кроме Outlook 2010, Outlook 2007, Outlook 2013. Заполнение игнорируется для всех трех. Я смотрел везде испробовали все :(Пожалуйста, помогите мне в получении текста поверх изображения таким образом, что она имеет 147px 107px левый и верхний отступ/край/Как указать отступы/поля на текст поверх изображения в Outlook 2010, Outlook 2007, Outlook 2013?

решил ее, наконец, как показано ниже:

<tr> 
     <td background="yourimage.gif" bgcolor="#c0393f" width="600" height="240" valign="top" style="background:url('yourimage.gif')"> 
      <!-- M$ hack for table background images --> 
      <xsl:comment> 
       <![CDATA[[if gte mso 9]> 
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" color="#c0393f" style="width:600px;height:240px;"> 
        <v:fill type="frame" src="yourimage.gif" /> 

        <v:textbox inset="107px,147px,0px,0px" id="headerTitle"> 
        <![endif]]]> 
      </xsl:comment> 
      <font style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;"> 
       <div style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;padding:147px 0px 0px 107px;"> 
        Your Text 
       </div> 
      </font> 
      <xsl:comment> 
       <![CDATA[[if gte mso 9]> 
        </v:textbox> 
        </v:rect> 
        <![endif]]]> 
      </xsl:comment> 
     </td> 
    </tr> 

ответ

1

ДИВ обивка игнорируется в перспективе. лучше всего, чтобы вставить таблицу внутри DIV, а затем площадку ТДС внутри него.

были некоторые другие ошибки в коде, что я внес изменения в ниже, но это работает в Outlook. Я бы также рекомендовал использовать padding-top и т. д. вместо простого дополнения потому что я нашел, что он более широко принят и согласован среди почтовых клиентов.

 <table width="640" height="240"> 
<tr> 
<td background="http://www.swagatobhatta.info/emailtest/header.gif" width="600" height="240" valign="top"> 
    <!--[if gte mso 9]> 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;"> 
    <v:fill type="tile" src="http://www.swagatobhatta.info/emailtest/header.gif" /> 
    <v:textbox inset="0,0,0,0"> 
    <![endif]--> 
    <div> 
    <table width="400" align="right" cellpadding="0" cellspacing="0" border="0" style="color:#c9be8a;font-weight:700;font-size:19px;width:400px;"> 
     <tr> 
     <td style="text-transform:uppercase;padding-top:107px; padding-left:147px;">TEST CONTENTS TEST CONTENTS TEST CONTENTS</td></tr> 
     </table></div> 
    <!--[if gte mso 9]> 
    </v:textbox> 
    </v:rect> 
    <![endif]--> 
</td> 
         </tr> 
        </table> 
+0

У вас есть закрывающий тег шрифта, но нет открытия. Это сделано специально? Ошибка –

+0

. Я удалил теги шрифтов из его оригинала, возможно, пропустил ближайший. Будет редактировать ответ для удаления. – Gortonington

+0

Hi ,. Спасибо за ваш ответ. Я обновил свой код, чтобы попытаться отразить ваши изменения. Как-то я потерял текст alltogether для Outlook 2010, например ... Я думаю, что схожу с ума. Пожалуйста, помогите –

Смежные вопросы