Problema con estilos en un mail php

eresvey · #1 (**permalink**) 14/04/2011, 04:58

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<? 
$destinatario = "[email protected]"; 
$asunto = "Activa tu cuenta"; 
$cuerpo = ' 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer4 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:3;
}
-->
</style>
</head>
<style type="text/css">
.marco1 {
    padding:8px;
    background-color: #FF6600;
    width: 500px;
    height:5px;
    border-bottom: 1px solid #FF6600;
    border-right: 1px solid #FF6600;
    border-left: 1px solid #FF6600;
    border-top: 1px solid #FF6600;
    
    float:left;
}
.marco1 IMG{
 
}
 
.marco2 {
    padding:8px;
    width: 500px;
    border-bottom: 1px solid #FF6600;
    border-right: 1px solid #FF6600;
    border-left: 1px solid #FF6600;
    border-top: 1px solid #FF6600;
} 
 
.marco3 {
    padding:8px 8px 20px 8px;
    background-color: #ffffff;
    width: 200px;
    border: 1px solid #999999;
} 
 
.blur{
   background-color: #ccc; /*shadow color*/
   color: inherit;
   margin-left: 4px;
   margin-top: 4px;
   width: 224px;
}
.shadow,  .content{
   position: relative;
   bottom: 2px;
   right: 2px;
}
.shadow{
   background-color: #666; /*shadow color*/
   color: inherit;
}
.content{
   background-color: #fff; /*background color of content*/
   color: #000; /*text color of content*/
   border: 1px solid #000; /*border color*/
   padding: .5em 2ex;
} 
.content IMG{
    border: 1px solid #000000;
}
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
 
}
.style1 {
    color: #FFFFFF;
    font-weight: bold;
}
#Layer90 {position:absolute;
    width:598px;
    height:34px;
    z-index:12;
    left: 339px;
    top: 5px;
}
        #Layer1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 51px;
    top: 41px;
}
#Layer2 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 16px;
    top: 12px;
}
#Layer3 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:2;
    left: 16px;
    top: 12px;
}
#Layer5 {
    position:absolute;
    width:262px;
    height:15px;
    z-index:2;
    left: 157px;
    top: 371px;
}
#Layer6 {
    position:absolute;
    width:303px;
    height:19px;
    z-index:2;
    left: 26px;
    top: 13px;
}
#Layer7 {
    position:absolute;
    width:303px;
    height:19px;
    z-index:2;
    left: 115px;
    top: 53px;
}
#Layer8 {
    position:absolute;
    width:497px;
    height:19px;
    z-index:2;
    left: 24px;
    top: 120px;
}
#Layer9 {
    position:absolute;
    width:54px;
    height:19px;
    z-index:2;
    left: 237px;
    top: 303px;
}
.style2 {font-size: 10px}
</style>
 
 
<body>
<div id="Layer2">
<div class="marco2">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div>
<div id="Layer3">
  <div class="marco1"></div>
</div>
<div class="style1" id="Layer6">hola</div>
<div id="Layer7">
  <div align="center"><strong>hola</strong></div>
</div>
<div id="Layer8">
  <div align="justify">y mas hola </div>
</div>
<div id="Layer9">
  <label>
  <input type="submit" name="Submit" value="Aprobar" />
  </label>
</div>
</body>
</html>
 
 
'; 
 
//para el envío en formato HTML 
$headers = "MIME-Version: 1.0\r\n"; 
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n"; 
 
//dirección del remitente 
$headers .= "From: Miguel Angel Alvarez <[email protected]>\r\n"; 
 
//dirección de respuesta, si queremos que sea distinta que la del remitente 
$headers .= "Reply-To: [email protected]\r\n"; 
 
//ruta del mensaje desde origen a destino 
$headers .= "Return-path: [email protected]\r\n"; 
 
//direcciones que recibián copia 
$headers .= "Cc: [email protected]\r\n"; 
 
//direcciones que recibirán copia oculta 
$headers .= "Bcc: [email protected],[email protected]\r\n"; 
 
mail($destinatario,$asunto,$cuerpo,$headers) 
?>

KoswiDigital · #2 (**permalink**) 14/04/2011, 06:14

Hola.

No todos los clientes de e-mail reconocen los estilos. Lo mejor suele ser aplicarlos directamente en las etiquetas por medio de style. Te dejo -[URL="http://www.campaignmonitor.com/css/"]este enlace[/URL]- para que eches un vistazo a las compatibilidades de los clientes e-mail.

Un saludo.

GrupoC · #3 (**permalink**) 14/04/2011, 07:45

De hecho, no todos los gestores de correo los aceptan...