Tema: Problema con estilos en un mail php
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/04/2011, 04:58
eresvey
 
Fecha de Ingreso: febrero-2011
Ubicación: cali, valle del cauca
Mensajes: 158
Antigüedad: 13 años, 9 meses
Puntos: 8
Exclamación Problema con estilos en un mail php
Hola amigos la verdad estoy enviando mails con php, pero no logro controlar los estilos que los inserto en la misma pagina del html y la verdad en el hotmail se me ven bastante desagradables, miren el codigo a ver que puede pasar:
Código PHP: 
Ver original
  1. <? 
  2. $destinatario = "[email protected]"; 
  3. $asunto = "Activa tu cuenta"; 
  4. $cuerpo = ' 
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  9. <title>Untitled Document</title>
  10. <style type="text/css">
  11. <!--
  12. #Layer4 {
  13.     position:absolute;
  14.     width:200px;
  15.     height:115px;
  16.     z-index:3;
  17. }
  18. -->
  19. </style>
  20. </head>
  21. <style type="text/css">
  22. .marco1 {
  23.     padding:8px;
  24.     background-color: #FF6600;
  25.     width: 500px;
  26.     height:5px;
  27.     border-bottom: 1px solid #FF6600;
  28.     border-right: 1px solid #FF6600;
  29.     border-left: 1px solid #FF6600;
  30.     border-top: 1px solid #FF6600;
  31.     
  32.     float:left;
  33. }
  34. .marco1 IMG{
  35.  
  36. }
  37.  
  38. .marco2 {
  39.     padding:8px;
  40.     width: 500px;
  41.     border-bottom: 1px solid #FF6600;
  42.     border-right: 1px solid #FF6600;
  43.     border-left: 1px solid #FF6600;
  44.     border-top: 1px solid #FF6600;
  45. } 
  46.  
  47. .marco3 {
  48.     padding:8px 8px 20px 8px;
  49.     background-color: #ffffff;
  50.     width: 200px;
  51.     border: 1px solid #999999;
  52. } 
  53.  
  54. .blur{
  55.    background-color: #ccc; /*shadow color*/
  56.    color: inherit;
  57.    margin-left: 4px;
  58.    margin-top: 4px;
  59.    width: 224px;
  60. }
  61. .shadow,  .content{
  62.    position: relative;
  63.    bottom: 2px;
  64.    right: 2px;
  65. }
  66. .shadow{
  67.    background-color: #666; /*shadow color*/
  68.    color: inherit;
  69. }
  70. .content{
  71.    background-color: #fff; /*background color of content*/
  72.    color: #000; /*text color of content*/
  73.    border: 1px solid #000; /*border color*/
  74.    padding: .5em 2ex;
  75. } 
  76. .content IMG{
  77.     border: 1px solid #000000;
  78. }
  79. body,td,th {
  80.     font-family: Arial, Helvetica, sans-serif;
  81.  
  82. }
  83. .style1 {
  84.     color: #FFFFFF;
  85.     font-weight: bold;
  86. }
  87. #Layer90 {position:absolute;
  88.     width:598px;
  89.     height:34px;
  90.     z-index:12;
  91.     left: 339px;
  92.     top: 5px;
  93. }
  94.         #Layer1 {
  95.     position:absolute;
  96.     width:200px;
  97.     height:115px;
  98.     z-index:1;
  99.     left: 51px;
  100.     top: 41px;
  101. }
  102. #Layer2 {
  103.     position:absolute;
  104.     width:200px;
  105.     height:115px;
  106.     z-index:1;
  107.     left: 16px;
  108.     top: 12px;
  109. }
  110. #Layer3 {
  111.     position:absolute;
  112.     width:200px;
  113.     height:115px;
  114.     z-index:2;
  115.     left: 16px;
  116.     top: 12px;
  117. }
  118. #Layer5 {
  119.     position:absolute;
  120.     width:262px;
  121.     height:15px;
  122.     z-index:2;
  123.     left: 157px;
  124.     top: 371px;
  125. }
  126. #Layer6 {
  127.     position:absolute;
  128.     width:303px;
  129.     height:19px;
  130.     z-index:2;
  131.     left: 26px;
  132.     top: 13px;
  133. }
  134. #Layer7 {
  135.     position:absolute;
  136.     width:303px;
  137.     height:19px;
  138.     z-index:2;
  139.     left: 115px;
  140.     top: 53px;
  141. }
  142. #Layer8 {
  143.     position:absolute;
  144.     width:497px;
  145.     height:19px;
  146.     z-index:2;
  147.     left: 24px;
  148.     top: 120px;
  149. }
  150. #Layer9 {
  151.     position:absolute;
  152.     width:54px;
  153.     height:19px;
  154.     z-index:2;
  155.     left: 237px;
  156.     top: 303px;
  157. }
  158. .style2 {font-size: 10px}
  159. </style>
  160.  
  161.  
  162. <body>
  163. <div id="Layer2">
  164. <div class="marco2">
  165.   <p>&nbsp;</p>
  166.   <p>&nbsp;</p>
  167.   <p>&nbsp;</p>
  168.   <p>&nbsp;</p>
  169.   <p>&nbsp;</p>
  170.   <p>&nbsp;</p>
  171.   <p>&nbsp;</p>
  172.   <p>&nbsp;</p>
  173.   <p>&nbsp;</p>
  174.   <p>&nbsp;</p>
  175. </div>
  176. </div>
  177. <div id="Layer3">
  178.   <div class="marco1"></div>
  179. </div>
  180. <div class="style1" id="Layer6">hola</div>
  181. <div id="Layer7">
  182.   <div align="center"><strong>hola</strong></div>
  183. </div>
  184. <div id="Layer8">
  185.   <div align="justify">y mas hola </div>
  186. </div>
  187. <div id="Layer9">
  188.   <label>
  189.   <input type="submit" name="Submit" value="Aprobar" />
  190.   </label>
  191. </div>
  192. </body>
  193. </html>
  194.  
  195.  
  196. '; 
  197.  
  198. //para el envío en formato HTML 
  199. $headers = "MIME-Version: 1.0\r\n"; 
  200. $headers .= "Content-type: text/html; charset=iso-8859-1\r\n"; 
  201.  
  202. //dirección del remitente 
  203. $headers .= "From: Miguel Angel Alvarez <[email protected]>\r\n"; 
  204.  
  205. //dirección de respuesta, si queremos que sea distinta que la del remitente 
  206. $headers .= "Reply-To: [email protected]\r\n"; 
  207.  
  208. //ruta del mensaje desde origen a destino 
  209. $headers .= "Return-path: [email protected]\r\n"; 
  210.  
  211. //direcciones que recibián copia 
  212. $headers .= "Cc: [email protected]\r\n"; 
  213.  
  214. //direcciones que recibirán copia oculta 
  215. $headers .= "Bcc: [email protected],[email protected]\r\n"; 
  216.  
  217. mail($destinatario,$asunto,$cuerpo,$headers) 
  218. ?>