im trying to make a newsletter template for my organization. It looks like i want int in browser, but not in outlook. almost like it's not reading the css. The white background of my divs dont show up in my email. It's all green.
Some answers said that divs dont work good in e-mails, but i dont understand how to do it without divs.
what gives? i want it to look pretty:)
I'm not the best at html but i didn't see another way to make a nicely formated email, so apologies in advance.
i started from a template i downloaded, but i had to basically rewrite everything, but there is some reminents of the template.
I'll include the entire document below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- If you delete this meta tag, the ground will open and swallow you. -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nyhetsbrev Centerpartiet Västernorrland</title>
<link rel="stylesheet" type="text/css" href="stylesheets/email.css" >
<style>
* {
font-family: baton turbo;
}
.bgPINK{
background-color: #f1babd; width:90%; border-radius: 5px; padding: 5px; }
.content{
width:90%; border-radius: 5px; padding: 5px; background-color: white; margin:10px; }
.footer{
width:10%; border-radius: 5px; padding: 5px; background-color: #f1babd; width:100%; align:left; }
.spacer{
width:90%; border-radius: 5px; padding: 5px; background-color: ##114838; margin:10px; }
.header{ padding:0px; margin:10;
}
</style>
</head>
<body bgcolor="#114838" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<!-- BODY -->
<table class="body-wrap">
<tr>
<td></td>
<td></td>
<td align="center" bgcolor="#114838" width="60%">
<div class="header" width="100%" align="center" >
<table bgcolor="#114838" >
<tr >
<td><h3 style="font-size:350%; color:white;" ;>Nyhetsbrev</h6></td>
<td><img src="https://people.kth.se/~dsall/Images/vnorr.png" width="230px" align="right"/></td>
</tr>
</table>
</div><!-- /content -->
<!-- content -->
<div class="content">
<table>
<tr>
<td>
<h1>Kommundagar!</h1>
<p class="lead">Lorem ipsum dolodfjdfhfr sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<!-- A Real Hero (and a real human being) -->
<p><img src="http://placehold.it/600x300" width="100%"/></p><!-- /hero -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</td>
</tr>
</table>
</div><!-- /content -->
<!-- content -->
<div class="content">
<table bgcolor="">
<tr>
<td class="small" width="10%" style="vertical-align: top; padding-right:10px;"><img src="http://placehold.it/75x75" width="200px"/></td>
<td>
<h4>Title Ipsum <small>This is a note.</small></h4>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</td>
</tr>
</table>
</div><!-- /content -->
<!-- content -->
<div class="content"><table bgcolor="">
<tr>
<td class="small" width="10%" style="vertical-align: top; padding-right:10px;"><img src="http://placehold.it/75x75" width="200px"/></td>
<td>
<h4>Title Ipsum <small>This is a note.</small></h4>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</td>
</tr>
</table></div><!-- /content -->
<!-- content -->
<div class="bgPINK"><table>
<tr>
<td">
<!-- Callout Panel -->
<p class="callout">Brinner du lite extra för EP-valet och vill hjälpa till att kampanja? <a href="https://forms.office.com/Pages/ResponsePage.aspx?id=DMaHGFre-EmaU90DgAdtZrgQ5v5OIDJDqebswmtwOPFUNlBPWVczTDFBSVQ0SUFCQlhNUEZXNVFNRC4u">Anmäl dig här! »</a> </p><!-- /callout panel -->
</td>
</tr>
</table></div><!-- /content -->
<!-- content -->
<div class="content"><table bgcolor="">
<tr>
<td class="small" width="10%" style="vertical-align: top; padding-right:10px;"><img src="http://placehold.it/75x75" width="200px"/></td>
<td>
<h4>Title Ipsum <small>This is a note.</small></h4>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</td>
</tr>
</table></div><!-- /content -->
<!-- spacer -->
<div class="spacer">
<table >
<tr>
<td>
</td>
</tr>
</table>
</div><!-- /spacer -->
<!-- content -->
<div class="content"><table bgcolor="">
<tr>
<h4 align="left">Regiongruppen informerar</h4>
<p align="left">Lorem ipsum dolorhgfhjgjfjgdjgkgdfkghkghdfkghdfjkghdfkghdfhdfkhdfkghdkghdfkgh sit amet, consec
tetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
. </p>
</td>
</tr>
</table></div><!-- /content -->
<!-- spacer -->
<div class="spacer">
<table >
<tr>
<td>
</td>
</tr>
</table>
</div><!-- /spacer -->
<!-- spacer -->
<div class="spacer">
<table >
<tr>
<td>
</td>
</tr>
</table>
</div><!-- /spacer -->
<div class="header" width="100%" align="center" >
<table bgcolor="#114838" >
<td><img src="https://people.kth.se/~dsall/Images/vnorr2.png" width="300px" align="right"/></td>
</table>
</div><!-- /content -->
<!-- spacer -->
<div class="spacer">
<table >
<tr>
<td>
</td>
</tr>
</table>
</div><!-- /spacer -->
<!-- spacer -->
<div class="spacer">
<table >
<tr>
<td>
</td>
</tr>
</table>
</div><!-- /spacer -->
<div class="footer">
<table>
<td >
<p>
<h5 class="">Kontakt:</h5>
<p>Telefon: <strong>0760-3xxxx</strong><br/></p>
<p>E-post: <strong><a href="emailto:[email protected]">[email protected]</a></strong></p>
</p>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /BODY -->
</body>
</html>