Please Help - problem with design

Hello,

I hope someone can help me. The situation is the following:
When I do the preview of my Campaign, it looks good.

But when I send a test or a real campaign, it is changed, not showing some of the pictures and texts. It is like everything is shifted to the left, and some images are "lost".
I have these problems with Outlook and Hotmail. In Gmail it looks better, although it is still not exactly what we expected.

Thanks for the help you can provide, it is quite urgent,

Jose Escobedo

jlescobedo, 6 years ago

Here you can see an screenshot of the preview in Campaign Monitor:
http://www.axikon.com/admin/funciones/archivo.php?id_archivo=7&buscadores=1&directorio_admin=../admin

And here you are a screenshot of the test received in Outlook:
http://www.axikon.com/admin/funciones/archivo.php?id_archivo=8&buscadores=1&directorio_admin=../admin

Thanks!

supernath, 6 years ago

Hi, you'll need to post code samples to let people dig in and help.

jlescobedo, 6 years ago

Here is the HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Business Newsletter</title>
<style type="text/css">
<!--
body{background:#D3DDE4;font-family:Helvetica, Arial, sans-serif;}
p{text-align:justify;}
h1{color:#820024;font-size:26px;}
p{font-size:21px;}
img, a img{border:none;}
p a{color:#820024;font-weight:600;}
#noticia1 h1{background:url(imagenes/h1-corto.png) no-repeat;min-width:250px;height:50px;padding-left:40px;padding-top:12px;}
#noticia2 h1{background:url(imagenes/h1.png) no-repeat;min-width:500px;height:50px;padding:14px 0 0 40px;font-size:22px;}
#noticia3 h1,#noticia4 h1,#noticia5 h1{background:url(imagenes/bullet.png) no-repeat left top;padding:3px 0 0 35px;font-size:22px;max-width:450px;}
#noticia2 p,#noticia3 p,#noticia4 p,#noticia5 p{font-size:18px;}
#cuerpo{position:absolute;width:1024px;height:auto;left:50%;margin-left:-512px;top:0;}
#visual{background:url(imagenes/1.jpg) no-repeat;height:63px;}
#visual p{margin:25px 40px 0 40px;float:left;font-size:16px; color:#FFF;}
#visual a{color:#FFF;font-weight:600;}
#cap{background:url(imagenes/2.jpg) no-repeat;height:166px;}
.noticia{margin:0 40px 0 40px; clear:both;}
#noticia1{margin-right:65px;}
.izq{float:left;}
.centro{float:left;}
.dcha{float:right;}
#a{background:#FFF url(imagenes/3.jpg) top no-repeat;min-height:1010px;}
#b{background:#FFF;min-height:0;}
#c{background:#FFF url(imagenes/4.jpg) bottom no-repeat;min-height:469px;}
#botonera{background:url(imagenes/5.jpg) no-repeat;height:70px;}
#botonera img{float:right;margin-right:40px;margin-top:15px;}
#pie{background:#FFF;}
#pie img{height:190px;width:1024px;border:none;}
#subpie{background:url(imagenes/7.jpg) no-repeat;height:106px;}
#subpie p{margin:15px 40px 0 40px;float:left;font-size:16px;text-align:justify;}
#subpie a{color:#000;font-weight:600;}
a:hover{color:#333!important;text-decoration:none;}
.img_izq1,.img_izq2{margin:20px 20px 20px 0;}
.img_dcha1,.img_dcha2{margin:20px 0 20px 20px;}
-->
</style>
</head>
<body>
<div id="cuerpo">
    <div id="visual"><p>En caso de no poder visualizar correctamente este newsletter, por favor <webversion>pulse aqu&iacute;</webversion>.</p></div>
    <div id="cap"></div>
    <div id="a">
        <div id="noticia1" class="noticia">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                    <img src="<$imagesrc link='true'$>" width="500" class="img_izq1">
                    <img src="<$imagesrc link='true'$>" width="500" class="img_izq2">
                </td>
                <td>
                    <h1><$title$></h1>
                    <p><$description$></p>
                </td>
                <td>
                    <img src="<$imagesrc link='true'$>" width="500" class="img_dcha1">
                    <img src="<$imagesrc link='true'$>" width="500" class="img_dcha2">
                </td>
              </tr>
            </table>
            </div>
        <div id="noticia2" class="noticia">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq2">
                </td>
                <td>
                    <h1><$title$></h1>
                    <p><$description$></p>
                </td>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha2">
                </td>
              </tr>
            </table>
        </div>
   </div>
   <div id="b">
        <div id="noticia3" class="noticia">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq2">
                </td>
                <td>
                    <h1><$title$></h1>
                    <p><$description$></p>
                </td>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha2">
                </td>
              </tr>
            </table>
        </div>
        <div id="noticia4" class="noticia">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq2">
                </td>
                <td>
                    <h1><$title$></h1>
                    <p><$description$></p>
                </td>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha2">
                </td>
              </tr>
            </table>
        </div>
    </div>
    <div id="c">
         <div id="noticia5" class="noticia">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq2">
                </td>
                <td>
                    <h1><$title$></h1>
                    <p><$description$></p>
                </td>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha2">
                </td>
              </tr>
            </table>
        </div>
      </div>
    <div id="botonera">
        <unsubscribe><img src="imagenes/baja.png" width="156" height="37" alt="Comun&iacute;quenos que no desea recibir m&aacute;s newsletters de a"></unsubscribe>
        <webversion><img src="imagenes/imprimir.png" width="209" height="37" alt="Imprima la versi&oacute;n online de este newsletter"></webversion>
           <forwardtoafriend><img src="imagenes/reenviar.png" width="207" height="37" alt="Reenv&iacute;e este newsletter"></forwardtoafriend>
    </div>
    <div id="pie"><img src="imagenes/6.jpg" alt="Informaci&oacute;n de contacto de a" border="0" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="735,60,946,88" href="mailto:spain@a.com" alt="Env&iacute;e un correo electr&oacute;nico a a">
        <area shape="rect" coords="734,98,981,123" href="http://www.a.tel" alt="Vea todos la informaci&oacute;n de contacto de a">
        <area shape="rect" coords="733,137,935,167" href="http://www.a.com" alt="Visite la p&aacute;gina web de a">
      </map>
  </div>
    <div id="subpie">
    </div>
</div>
</body>
</html>

Thanks for any help you can give.
J

Mathew Mathew, 6 years ago

OK,

Using CSS position: values will cause you problems in many email clients including Outlook, so we'd recommend staying away from them.

Your safest bet would be to simplify things and use old school table layout for the most consistent results.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098