| dubafluye | 25/10/2004 09:00 |
Envio Boletin html con css en Outlook
Hola, estoy preparando un boletín en formato html que utiliza un fichero externo css pero resulta que al generar el boletín e insertarlo en el cuerpo del mensaje como Insertar>Texto de Archivo no consigo que coja los estilos, en cambio, visualizo dicha página en netscape o explorer y se ve correctamente, no sé donde estará el error. Os cuelto los códigos para ver si me podéis echar una mano, asimismo podéis ver el boletín generado en la dirección http://www.metropolislibros.com/bole...oletin_php.htm
Aquel codigo html del boletin: Código HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.metropolislibros.com/css/boletin.css">
<base target="_blank">
</head>
<body>
<div id="c">
<p class="nor">
Si no puedes ver correctamente este mensaje, accede a
<a href="http://www.metropolislibros.com/boletinnovedades/novedades.html">
www.metropolislibros.com/boletinnovedades/novedades.html</a></p>
<div id="a">
<div id="sb">
<p class="ti"> Novedades de la Segunda quincena de Octubre</p>
</div>
<div id="f">Lunes 25 de Octubre de 2004</div>
</div>
<div id="p">
<p class="nor">Buenas</p><table id ="b">
<colgroup>
<col id="d">
<col id="e">
</colgroup>
<tr><td colspan="5"><p class="z">LIBROS</p></td></tr><tr><td rowspan="4"><center><img src="http://www.metropolislibros.com/portadas/9920000000262.jpg" alt="NOSFERATU 46 -MARC RECHA AL DESNUDO-" height="120"></center></td><td colspan="4"><p class=v>NOSFERATU 46 -MARC RECHA AL DESNUDO-</p></td></tr><tr><td colspan="2">JUNIO 2004</td><td>66 Pag.</td><td>4.5 € </td></tr><tr><td colspan="4">Nuevo número de la prestigiosa revista NOSFERATU dedicada en esta ocasión a Marc Recha, en la cual varios expertos analizan su obra. Contiene una entrevista con el director y su filmografía incluyendo sus primeros cortometrajes.</td></tr><tr><td colspan="2"><a href=index2.php?case=f&id=9920000000262>Mas información</a></td><td colspan="2"><a class=boton href=compras/compra.php?&codigo=9920000000262>Compra</a></td></tr></table>
<div id="d">
<table id ="c">
<tr><td><p class="gr">OFERTAS</p></td></tr>
<tr><td><p class="g">OFERTA AJEDREZ STAR WARS EPISODIO II</p></td></tr><tr><td>Rebajamos el stock de este maravilloso ajedrez que reproduce...<a href=index2.php?case=o> Más</a></td></tr><tr><td><p class="g">VIDEO A MITAD DE PRECIO</p></td></tr><tr><td>Todo el stock de vídeo que tenemos en la librería lo hemos rebajado...<a href=index2.php?case=o> Más</a></td></tr><tr><td><p class="g">COMPRA 5 NOSFERATUS Y PAGA SOLO 2</p></td></tr><tr><td>Por la compra de tres números de la revista Nosferatu te regalamos...<a href=index2.php?case=o> Más</a></td></tr></table>
<table id ="c">
<tr><td><p class="z">VISITA</p></td></tr>
<tr width="80" height="60"><td>
<a href=http://www.zinema.com><center><img src="http://www.metropolislibros.com/banners/zinema.jpg" width="80" height="51" alt="" border="0"></center></a></td></tr><tr width="80" height="60"><td>
<a href=http://www.babadu.com><center><img src="http://www.metropolislibros.com/banners/badabu.gif" width="80" height="33" alt="" border="0"></center></a></td></tr></table>
<div id="op">
<p class="nor">Para darte de baja visita nuestra web <a href="http://www.metropolislibros.com/">AQUI</a> y activa la opción de baja junto con el e-mail al que te ha llegado este boletín.
</div>
</div>
</body>
</html>
y el fichero boletin.css Código:
/* estilos de tabla */
thead {background: #A4A684;
font: bold 10px;
text-align:center;
color:white;
}
td { font-size : 8pt;
font-family:verdana,arial;
text-align:justify;
}
/* tabla con color */
table#c,
table#d {table-layout:fixed;
background-color: #FDF5CE;
}
table#c {width:100%;text-align:center}
table#d {width:300px;text-align:justify;}
/* tabla transparente*/
table#b {table-layout:fixed;
background-color: transparent;
overflow:hidden;
width:80%;
text-align:justify;}
/* columnas de enlaces */
col#d {width:100px;}
col#e {width:250px;text-align: justify;}
/* tipos de letras */
.ti {font:15pt verdana, arial;
text-decoration: none;
text-align: center;
color: white;
}
.b {font:8pt verdana, arial; background-color: transparent;color: white;text-align: center;}
.z,
.v,
.ne,
.n,
.t,
.gr {font:bold 8pt verdana, arial;
text-decoration: none;
text-align: center;}
.b { background-color: transparent;color: white;}
.z { background-color: #0B5B9F;color: white;}
.v { background-color: #A4A684;color: white;}
.ne { background-color: black;color: white;}
.n { background-color: #A4A684;color: black;}
.t { background-color: transparent;color: white;}
.gr { background-color: #CC6600;color: white;}
.g,
.nor {font: 8pt verdana,arial;
text-decoration: none;
text-align: center;
}
.g { text-align: center;color:#CC6600;}
.nor {text-align: justify;color:black;}
/* enlaces */
a:link,
a:visited,
a:active {text-decoration:none;
color:#0B5B9F;
font: 12px arial;
}
a:hover {
text-decoration:none;
color:#F4A460;
font: bold 12px arial;
}
/* divisiones generales */
div#c { position:absolute;
left:50%;
width:780px;
margin-left:-390px;
top:0px;
}
div#a {position: absolute;
z-index: 100;
background-image: url(../images/logogranate.gif);
width: 780px;
height: 110px;
top: 15px;
}
div#p {position: relative;
z-index: 100;
width: 780px;
top: 100px;
left: 0px;
font: 10px arial;
}
div#d {position: absolute;
width: 120px;
left: 650px;
top: 0px;
z-index: 100;
}
/* divisiones superiores */
div#f,
div#sb {background-color: transparent;
position: absolute;
z-index: 120;
}
div#f { position: relative;
left: 620px;
top:85px;
font: 9px arial;
text-align: rigth;
color: White;
}
div#sb {left:200px;top:25px;}
div#co,
div#op {background-color:transparent;
position: relative;
text-align: center;
left:10px;
z-index:80;
width: 90px;
height: 20px;
font: 8pt arial;
border-style:groove;
}
div#co {top:40px;}
div#op {top:30px;}
.cajon {padding: 0.1em;
font: 10px "Verdana, Tahoma, Arial";
margin-left: 0.1em;
background-color: #FDF5CE;
text-align: left;
}
.boton {border: 1px solid #000000;
font: normal 9px verdana, arial, "trebuchet MS", helvetica, sans-serif;
background: #FDF5CE;
color: #000000;
padding: 0px;
}
A ver si me echais una mano. Saludos :adios: | 