MailChimp Template looks wrong in Outlook and okay in all browsers -
i have hard time finding out why html+css looks fine in browser , in mailchimp preview function looks ugly in inbox of outlook.
are there things cant done in html outlook email?
here's source code:
<!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; } { 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 @ få vist dete nyhedsbrev, så klik og få det vist 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, @ ullamcorper neque lorem et arcu. nunc molestie ultrices rutrum. </p> <p>quisque leo tellus, eleifend vel scelerisque rhonc us, viverra 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 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, @ 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, @ ullamcorper neque lorem et arcu. nunc molestie ultrices rutrum. </p> <p> quisque leo tellus, eleifend vel scelerisque rhoncus, viverra risus. nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, @ ullamcorper neque lorem et arcu.</p> <p><a href="#">>> læs yderligere her</a></p> </div> <div id="c2"> <h3>travl periode udsigt</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, @ 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, @ ullamcorper neque lorem et arcu. nunc molestie ultrices rutrum. </p> <p>quisque leo tellus, eleifend vel scelerisque rhoncus, viverra 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, @ 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, @ ullamcorper neque lorem et arcu. nunc molestie ultrices rutrum. </p> <p>quisque leo tellus, eleifend vel scelerisque rhoncus, viverra 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, @ 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: scandiahousing@scandiahousing.com<br /> </div> </div> </body> </html> in current version have hardcoded images paths , showing correctly.
it formatting goes wrong.
which version of outlook? 2007 uses word render html email , can't handle floats or positions , background images...among host of other things. i've found best way generate html email write website 2000. table based layouts etc...
Comments
Post a Comment