2016-01-29 6 views
0

Utiliser le code html avec VML (pour les images d'arrière-plan) pour envoyer des bulletins d'information aux clients. Avant d'utiliser VML en ligne, CSS fonctionnait bien, mais quand VML est ajouté au code, il a cessé de fonctionner dans OUTLOOK.L'utilisation de vml pour html crée des problèmes avec le css en ligne

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns:v="urn:schemas-microsoft-com:vml"> 



      <head> 

      <meta charset="utf-8" name="viewport" content="width:50"/> 

      <title> Transaction Alert from KVB </title> 

      </head> 

      <body> 

       <div> 


    <table style="border:1px solid black" width="600" height="600" align="center" cellpadding="0" cellspacing="0" border="0" > 

<tr> 
<!-- Backup background color is #DDDDDD --> 
    <td style="background-image: url('http://www.kvbsmart.com/mail_img/bg.jpg');" background="http://www.kvbsmart.com/mail_img/bg.jpg" valign="top" align="left" > 

    <!--[if gte mso 9]> 
    <v:rect style="width:600px;height:600px;" strokecolor="none"> 
     <v:fill type="tile" src="http://www.kvbsmart.com/mail_img/bg.jpg" color="#7bceeb"/></v:fill> 
    </v:rect> 
    <v:shape id="theText" style="position:absolute;width:600px;height:600px;"> 
    <![endif]--> 



      <a href="http://www.kvb.co.in/"> 

     <center><img src="http://www.kvbsmart.com/mail_img/1111.png" width="600" height="300"></center> 

     </a> 

      <div STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;"> 

      <center><font face="Verdana">A.MESSAGE</center></font></div> 

      <p><font face="Verdana" size ="1"><center>Note: If the transaction is not done by you, please contact our Helpline at the earliest.</font></center></p> 

       <br><br><br><br> 

      <a href="http://www.kvb.co.in/"> 

     <center><img src="http://www.kvbsmart.com/mail_img/mpay_new.png" width="600" height="130"></center> 

     </a> 

      <br> 

      <br> 

      <p><font face="Verdana">With Regards,</font></p> 

      <p><font face="Verdana">Karur Vysya Bank.</font></p> 


      <hr width = 100%> 

      <br> 

       <div style="max-width:auto; word-wrap:break-word;"><font face="Verdana">This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable).</font> </div> 

        <p><font face="Verdana"> This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable)</font> </p> 





    <!--[if gte mso 9]> 
    </v:shape> 
    <![endif]--> 

       </td></tr> 


       </table></div> 


       <body></html> 

Je suis particulièrement obtenais question à ce bloc

<div STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;"> 

      <center><font face="Verdana">A.MESSAGE</center></font></div> 

S'il vous plaît, aidez-moi, je suis d'ajouter la capture d'écran pour votre référence Outlook issue

+0

Vous devez être plus clair sur ce qu'est le problème et sur la sortie attendue. Utilisez JSFIDDLE si possible pour afficher le résultat attendu dans un navigateur normal et une capture d'écran de la façon dont il diffère dans Outlook. Plus le code requis pour démontrer le problème est petit, plus il est probable que quelqu'un vous aidera. –

+0

border-collapse: séparé; http://codepen.io/anon/pen/PZaYrO –

+0

Oui, mais cela crée des problèmes uniquement dans Outlook. Dans les navigateurs, Gmail et Yahoo fonctionnent correctement. J'ai édité ma question pour ajouter la capture d'écran qui montre le problème dans OUTLOOK –

Répondre

0

J'ai résolu le problème en supprimant la div tag et le remplacer par un tableau

Je fournis le code complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns:v="urn:schemas-microsoft-com:vml"> 
    <head>     
    <meta charset="utf-8" name="viewport" content="width:50"/> 
    <title> Transaction Alert from KVB </title> 
    </head> 
     <body> 
     <div>    
<table style="border:1px solid black" width="600" height="800" align="center" cellpadding="0" cellspacing="0" border="0" > 
<tr> 
<!-- Backup background color is #DDDDDD --> 
       <td style="background-image: url('http://www.kvbsmart.com/mail_img/bg.jpg');" background="http://www.kvbsmart.com/mail_img/bg.jpg" valign="top" align="left" > 

     <!--[if gte mso 9]> 
            <v:rect style="width:600px;height:900px;" strokecolor="none"> 
            <v:fill type="tile" src="http://www.kvbsmart.com/mail_img/bg.jpg" color="#7bceeb"/></v:fill> 
            </v:rect> 
            <v:shape id="theText" style="position:absolute;width:600px;height:900px;z-index:3;"> 
        <v:textbox inset="0,0,0,0"> 

            <![endif]--> 





        <a href="http://www.kvb.co.in/"> 
        <center><img src="http://www.kvbsmart.com/mail_img/1111.png" width="600" height="300"></center> 
        </a> 

      <!------THIS IS THE PART WHERE I HAVE DONE THE MODIFICATION--> 
        <table width = "100%" border-collapse: separate; border-spacing: 0;> 

         <td STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;"> 

            <center><font face="Verdana">A.MESSAGE</center></font></td> 
    </table> 

       <p><font face="Verdana" size ="1"><center>Note: If the transaction is not done by you, please contact our Helpline at the earliest.</font></center></p> 

        <br><br><br><br> 

        <a href="http://www.kvb.co.in/"> 

        <center><img src="http://www.kvbsmart.com/mail_img/mpay_new.png" width="600" height="130"></center> 

        </a> 

        <br> 

         <br> 

         <p><font face="Verdana">With Regards,</font></p> 

           <p><font face="Verdana">Karur Vysya Bank.</font></p> 


         <hr width = 100%> 

         <br> 

         <div style="max-width:auto; word-wrap:break-word;"><font face="Verdana">This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable).</font></div> 







          <!--[if gte mso 9]> 
          </v:shape> 
           <![endif]--> 


              </td></tr> 


      </table></div> 


                <body></html>