No reconoce CSS

fonchi · #1 (**permalink**) 02/12/2013, 14:15

Hola Amigos:

Tengo la siguiente situación a ver si me dan una mano en el tema:

Hice un html y con CSS , en un navegador se me ve bien, pero la idea es llamar a ese html desde un correo y visualizar un pie de firma. En primera instancia tenia el CSS aparte, luego lo puse todo en un archivo, pero continua viendose desordenado.

¿Alguna noción de lo que pueda ser? A mi se me hace que no está leyendo el estilo. Adjunto lo que tengo.... Y desde ya gracias y saludos.

Código HTML:

Ver original<html>
<head>
<style type="text/css">
    <!--
    BODY  {
        background-color:#FFF;
        background-color:white;
        text-align:left; 
        line-height: 10px; 
        float:left;
    }
    #CONTENEDOR {   
        background-color:white;
        border-style:inset;
        border-color:#000000;
        border:0px;
        margin: 0 auto; 
        border-width:thin;
    }   
    .div1{
        border-style:solid;
        border:0px;
        border-color:red;
        float:left;
        
    }
    .div2{
        border-style:solid;
        border:0px;
        border-color:red;
        float:right;
    }
    .div3{
        border-style:solid;
        border:0px;
        border-color:red;
        float:left;
    }
    .lineav{
        border-style:solid;
        border:0px;
        border-color:blue;
        background-color:blue; 
        background:blue;  
        height:300px;
        padding:0px;
        width:1px;
        float:left;         
    }
    .lineah{
        border-style:solid;
        border:0px;
        border-color:blue;
        background-color:blue;
        height:1px;
        width:255px;    
        float:right;
    }
    .style1 {
        text-decoration: none;
    }
    .style2 {
        height: 180px;
        width: 249px;
        float: right;
        text-align: left;
        border: 0px none red;
    }
    .style3 {
        height: 104px;
        width: 249px;
        float: left;
        text-align: left;
        border: 0px none red;
    }
    .style4 {
        height: 300px;
        width: 1px;
        float: left;
        border: 0px none blue;
        margin-left: 0px;
        padding: 0px;
        background: blue;
    }
        .style5 {
    float: left;
    text-align: center;
    border: 0px none red;
}
        -->
</style>
</head> 
<body>
    <div id="CONTENEDOR" style="height: 95px; width: 360px;">
          <div class="style5" style="width: 103px; height: 98px;">
                <img src="http:\\descargas\logo.gif" height="60" 
                          width="80"></img>
                <font size="-4" face="Arial, Helvetica, sans-serif" color="blue">
                    <br />
                    DIRECCIÓN
                    <br />
                    DIRECCIÖN 2
                    <br />
                    <a href="http://www.empresa.cl">www.svti.cl</a>
                 </font>
          </div>
          <div class="style4" style="height: 95px"></div>
          <div class="style3" style="height: 25px">
                <font size="-1" face="Arial" color="blue">
                    <strong><br/>&nbsp;&nbsp;NOMBRE</strong>
                </font>
          </div>     
          <div class="lineah"></div> 
          <div class="style2" style="height: 46px"> 
              <font size="-2" face="Arial, Helvetica, sans-serif" color="blue">
                <br />
                 Encargado Soporte TIC
                 CARGO EMPLEADO<br />
                (XX-41) 2503XXX | 9327XXXX <br />
                <a href="mailto:correo@usuario" 
                                 class="style1">[email protected]</a>
                <br />
                  <!--  Para agregar celular -->
                  <!--   <br>cel: xxxxxxxx -->
              </font>
              <font size="-2" face="Arial, Helvetica, sans-serif"> 
                 <a href="http://www.empresa.cl/consideraciones/"> Consideraciones uso de correo electr&oacute;nico</a>
              </font>
         </div>   
    </div>
</body>
</html>

pzin · #2 (**permalink**) 02/12/2013, 14:34

Generalmente un cliente de correo, incluidos los que van vía web, no leen los estilos a menos que vayan embebidos en las propias etiquetas.

De ahí la costumbre de hacer los correos usando tablas.

Cuando publiques código aquí en el foro, hazlo usando las etiquetas de highlight o code.

fonchi · #3 (**permalink**) 03/12/2013, 06:02

Estimado:

Buen día.

Gracias por responder pzin.

Hice uno con solo tablas y al enviar me aparecen los bordes de esta, por lo menos en la prueba que hice al enviar a gmail. Cuando dices que vayan en las propias etiquetas ¿te refieres entonces a darle las propiedades en el propio elemento?

Saludos y gracias