1
J'ai du mal à trouver pourquoi mon html + css semble bien dans un navigateur et dans la fonction de prévisualisation mailchimp mais est moche dans la boîte de réception de Outlook.MailChimp Template semble faux dans Outlook et correct dans tous les navigateurs
Y a-t-il des choses qui ne peuvent pas être faites dans un email Outlook html?
Voici le code source:
<!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=utf-8" />
<title>Scandia Housing</title>
<style type="text/css">
body {
background:#eeeeee;
margin:0; padding:0;
}
a {
color:#2f894d;
text-decoration:none;
}
h2 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
color:#2d4760;
font-weight:lighter;
}
h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:15px;
color:#2d4760;
font-weight:lighter;
}
#headtext {
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
color:#9aaec2;
text-align:center;
width:720px; display:block;
clear:both; margin:auto;
margin-bottom:10px;
}
#content {
display:block;
margin:auto;
background:#fff;
width:720px;
}
#rowbox1 {
padding:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
margin-top:30px;
width:720px; height:250px;
display:block;
}
#rowbox2, #rowbox3, #rowbox4 {
padding:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
margin-top:20px;
width:720px; height:210px;
display:block;
}
#rowbox1 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/rowboxbg.png) no-repeat bottom;
}
#a1 img, #c1 img, #d1 img, #e1 img {
margin-right:10px;
margin-bottom:10px;
}
#b1 img {
margin-left:10px;
}
#a1, #b1, #c1, #d1, #e1 {
color:#606060;
width:350px; height:240px;
display:block;
float:left;
margin-left:30px;
}
#b1, #c1, #d1, #e1 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/boxbg.png) bottom;
width:380px; height:170px;
padding:10px;
}
#a1 h2, #b1 h3, #c1 h3, #d1 h3, #e1 h3 {
margin:0; padding:0;
}
#a2 h2, #b2 h3, #c2 h3, #d2 h3, #e2 h3 {
margin:0; padding:0;
}
#a2, #b2, #c2, #d2, #e2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
color:#2d4760;
width:230px;
height:190px;
display:block;
float:left;
margin-left:20px;
}
#a2, #b2, #c2, #d2, #e2 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/line.png) bottom no-repeat ;
}
#a2 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/listbox.png) no-repeat;
width:260px; height:220px;
margin-left:70px;
}
#b1 {
height:210px;
}
#b2 {
width:268px; height:210px;
}
#a2 h3 {
margin:5px 0 0 10px; padding:0;
}
#a2 ul {
margin:0; padding:0;
margin:20px 0 0 30px;
}
#a2 h3 {
color:#fff;
}
#footer {
text-align:center;
font-size:10px;
font-family:Tahoma, Geneva, sans-serif;
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/footer.png);
color:#fff;
padding:20px;
}
</style>
</head>
<body>
<div id="headtext"><a href="*|ARCHIVE|*">Hvis du modtager denne email, er du blevet tilmeldt Scandia Housings nyhedsbrev.<br />
Har du problemer med at få vist dete nyhedsbrev, så klik her og få det vist i din browser.</a></div>
<div id="content"><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/header.png" width="720" height="137" />
<div id="rowbox1">
<div id="a1">
<h2>Velkommen til vores nyhedsbrev </h2>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/peter.gif" width="119" height="176" align="left" />Lorem ipsum dolor sit amet, consectetur adipisc ing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p>Quisque leo tellus, eleifend vel scelerisque rhonc us, viverra a risus. <img style="margin-top:20px;" src="http://www.scandiahousing.com/DND/nyhedsbrev/images/petersign.png" width="112" height="50" /><br />
</p>
</div>
<div id="a2">
<h3>Nyt fra Scandia Housing </h3>
<ul>
<li>Lejemarkedet om 5 år</li>
<li>Regeringen vil lokke udenlandsk talent til Danmark</li>
<li>Århus Universitet kommenterer regerings-planerne</li>
<li>Fokus på boligen</li>
<li>Scandia Housing vokser</li>
<li>Travl periode i udsigt</li>
<li>Lektor Morten Skak's antagelser</li>
</ul>
</div>
</div>
<div id="rowbox2">
<div id="b1">
<h3><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/person1.gif" width="118" height="178" align="right" />Århus Universitet kommenterer <br />
regeringsplanerne</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. Quisque leo tellus.</p>
<p><a href="#">>> Læs yderligere her</a></p>
</div>
<div id="b2">
<img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/pictures.png" width="268" height="210" />
</div>
</div>
<div id="rowbox3">
<div id="c1">
<h3>Fokus på boligen</h3>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house.gif" width="138" height="83" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p> Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu.</p>
<p><a href="#">>> Læs yderligere her</a></p>
</div>
<div id="c2">
<h3>Travl periode i udsigt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
<p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
<p><a href="#">>> Læs yderligere her</a></p>
</div>
</div>
<div id="rowbox3">
<div id="c1">
<h3>Scandia Housing vokser</h3>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house2.gif" width="102" height="136" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p>Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. </p>
<p><a href="#">>> Læs yderligere her</a></p>
</div>
<div id="c2">
<h3>HR chefens top 5 liste</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
<p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
<p><a href="#">>> Læs yderligere her</a></p>
</div>
</div>
<div id="rowbox3">
<div id="c1">
<h3>Lektor Morten Skak's antagelser</h3>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house2.gif" width="102" height="136" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p>Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. </p>
<p><a href="#">>> Læs yderligere her</a></p>
</div>
<div id="c2">
<h3>Lejemarkedet om 5 år</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
<p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
<p><a href="#">>> Læs yderligere her</a></p>
</div>
</div>
<div id="footer">Capella Huset • Indiakaj 1 • 2100 København Ø • Danmark • Telefon: (+45) 33 93 11 81<br />
Vestergade 19B • 8000 Århus C • Danmark • Telefon: (+45) 72 30 04 88<br />
Telefax København: (+45) 33 93 14 46 Telefax Århus (+45) 86 27 11 87: • e-mail: [email protected]<br />
</div>
</div>
</body>
</html>
Dans la version actuelle je hardcoded tous les chemins images et ils montrent correctement.
C'est le formatage qui est complètement faux.