Newsletters

Verze:

02. 03. 2023

Zodpovědná osoba:

Dominik Šlechta

Be careful with block and other elements! For example, anchor (<a>) will bug if we try to insert a title into it (because it is block).

Watch out for line-height: 0 - it breaks things - for example with images (you can use display: block to remove spaces), and outlook uses percentages instead of a factor for line-height.


Images - use display: block;

 

Background image - should work everywhere

<table class="" width="640" cellpadding="0" cellspacing="0" border="0" style="width:640px">
     <tr>
         <td class="" valign="top" height="300" background="http://media.lt02.net/1/Users/28501/Emmet/background.jpg" style="height:300px; background-image:url('http://media.lt02.net/1/Users/28501/Emmet/background.jpg'); background-repeat:no-repeat; background-position:center;">
             <!--[if gte mso 9]>
               <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style="behavior: url(#default#VML); display: inline-block; position: absolute; width: 640px; height: 300px; top: 0; left: 0; border: 0; z-index: 1;" src="http://media.lt02.net/1/Users/28501/Emmet/background.jpg" />                             
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="display: inline-block; position: absolute; width: 640px; height: 300px; top: 0; left: 0; border: 0; z-index: 2;">
                <v:fill opacity="0%" style="z-index: 1;"/> 
                <div>                       
                <![endif]--> 
             <!-- Containing Table -->
             <table width="100%" cellpadding="0" cellspacing="0" border="0">
                 <tr>
                     <td class="" align="center" valign="middle" height="300" style="height:300px">
                         <!-- Contents -->

                         <!-- Headline -->
                         <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                             <tr>
                                 <td class="" style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#fff; text-align:center; font-weight:bold; padding:30px 0; text-transform:uppercase;">And So My Watch Begins</td>
                             </tr>
                         </table>
                         <!-- Headline END -->

                         <!-- Button - CTA -->
                         <table class="" align="center" cellpadding="0" cellspacing="0" border="0">
                             <tr>
                                 <td class="" height="50" align="center" bgcolor="#1a171b" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;height:50px"><a href="#" title="JOIN THE WATCH" target="_blank" class="" style="color:#ffffff; text-decoration:none; display:inline-block; white-space:nowrap; padding:15px; background-color: #1a171b; border:1px solid #1a171b; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"><strong style="font-weight:normal">JOIN THE WATCH</strong></a>
                                 </td>
                             </tr>
                         </table>
                         <!-- Button - CTA -->   

                         <!-- Contents END -->   
                     </td>
                 </tr>
             </table>
             <!-- Containing Table END-->
            <!--[if gte mso 9]>   
          </div></v:fill></v:rect><![endif]--> 
         </td>
     </tr>
  </table>