CODEWITHSUNDEEP
htmlcssemailoutlookhotmail
johhny B
johhny B

Reputation: 1452

HTML emails in outlook.com

I just went to a lot of trouble to create a nice looking email using html.

It works for both gmail and yahoo. I just though i'd test on hotmail and outlook.com and it just displays the whole email as the HTML code?!

The html is well formed and appears like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
   background-color:white;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
}

#outterBox {
   position:relative;
   width:500px;
   height:320px;
   background-color:#F0f0f0;
   padding:10px;
}

#innerBox {
   background-color:white;
   width:90%;
   height:55%;
   margin-top:6px;
   margin: 0 auto;
   margin-top:24px;
   position:relative;
}

#headingBox {
   width:100%;
   height:18%;
   background-color:#f0f0f0;
   overflow: hidden;
}

#notiBar {
   background-color:#a1a1a1;
   width:100%;
   height:42px;
   line-height:42px;
}

#notiBar > span {
   font-size:18px;
   color:white;
   margin-left:16px;
}

#notiContent {
   width:100%;
   height:100%;
   position:relative;
}

#notiContent > span {
   font-size:18px;
   color:#878787;
   margin-top:16px;
   margin-bottom:16px;
   margin-left:14px;
}

#msgContent {
   height:30px;
   line-height:30px;
   padding:10px;
}

#msgContent > span {
   font-size:18px;
   color:#878787;
   margin-top:16px;
   margin-bottom:16px;
   margin-left:4px;
}

#linkContent {
   margin-top:2%;
   height:50px;
   width:100%;
   position:relative;
   text-align:center;
}

#siteButton {
   display:inline-block;
   background-color:#5683CC;
   border:none;
   color:white;
   font-size:16px;
   padding-left:10px;
   padding-right:10px;
   text-decoration:none;
   height:36px;
   width:40%;
   line-height:36px;
   text-align:center;
}

#footer {
   height:27%;
   width:90%;
   padding-top:10%;
}

#footer > span {
   color:#878787;
   font-size:10px;
 }

 #unsubscribe {
    text-decoration:none;
    color:#81a0d3;
    font-size:10px;
 }

</style>
</head>
<body>
   <div id="outterBox">
      <div id="headingBox">
         <img src="image location" alt="xx" title="xx" style="display:block"/>
      </div>
      <div id="innerBox">
         <div id="notiContent">
            <div id="msgContent">
               <span><span id="userName"></span>, new message</span>
            </div>
            <div id="linkContent">
               <a id="siteButton" href="website">Check msgs now</a>
            </div>
         </div>
      </div>
      <div id="footer">
         <span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span>
      </div>
   </div>
</body>
</html>

Is there a trick to getting this working without having to dramatically change my code for microsoft?

Upvotes: 0

Views: 1930

Answers (3)

gwally
gwally

Reputation: 3557

johhny B, this is salvageable, but as you have figured out by now, Outlook does not work with HTML 5, CSS 3, divs or darn near anything fun.

The biggest thing you need to do is inline css values. Outlook ignores style sheets. It's going to ignore any css like, #msgContent > span.

This is your email with very few values inlined to clean up the look of Outlook slightly.

Good luck.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
  body {
  background-color:white;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  }
  #outterBox {
  position:relative;
  width:500px;
  height:320px;
  background-color:#F0f0f0;
  padding:10px;
  }
  #innerBox {
  background-color:white;
  width:90%;
  height:55%;
  margin-top:6px;
  margin: 0 auto;
  margin-top:24px;
  position:relative;
  border: 1px;
  }
  #headingBox {
    width:100%;
    height:18%;
    background-color:#f0f0f0;
        overflow: hidden;
      }

#notiBar {
   background-color:#a1a1a1;
   width:100%;
   height:42px;
   line-height:42px;
}

#notiBar > span {
   font-size:18px;
   color:white;
   margin-left:16px;
}

#notiContent {
   width:100%;
   height:100%;
   position:relative;
}

#notiContent > span {
   font-size:18px;
   color:#878787;
   margin-top:16px;
   margin-bottom:16px;
   margin-left:14px;
}

#msgContent {
   height:30px;
   line-height:30px;
   padding:10px;
}

#msgContent > span {
   font-size:18px;
   color:#878787;
   margin-top:16px;
   margin-bottom:16px;
   margin-left:4px;
}

#linkContent {
   margin-top:2%;
   height:50px;
   width:100%;
   position:relative;
   text-align:center;
}

#siteButton {
   display:inline-block;
   background-color:#5683CC;
   border:none;
   color:white;
   font-size:16px;
   padding-left:10px;
   padding-right:10px;
   text-decoration:none;
   height:36px;
   width:40%;
   line-height:36px;
   text-align:center;
}

#footer {
   height:27%;
   width:90%;
   padding-top:10%;
}

#footer > span {
   color:#878787;
   font-size:10px;
 }

 #unsubscribe {
    text-decoration:none;
    color:#81a0d3;
    font-size:10px;
 }
</style>
</head>
<body>
   <div id="outterBox" style="width: 500px; border: 1px solid;">
      <div id="headingBox" style="width: 500px; height:55px; background:#f0f0f0;">
         <img src="image location" alt="xx" title="xx" style="display:block"/>
      </div>
      <div id="innerBox" style="width: 450px;">
         <div id="notiContent" style="width: 450px; border: 1px solid;">
            <div id="msgContent">
               <span><span id="userName"></span>, new message</span>
            </div>
            <div id="linkContent">
               <a id="siteButton" href="website">Check msgs now</a>
            </div>
         </div>
      </div>
      <div id="footer">
         <span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span>
      </div>
</div>
</body>
</html>

Upvotes: 0

cagcak
cagcak

Reputation: 4200

Try to use on top of it: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Upvotes: 1

Josh Rotenberg
Josh Rotenberg

Reputation: 54

Email is not forgiving at all. Every browser, every client could display something different. With microsoft being the absolute worst at rendering expectations. Your best bet is to inline style as much as you can, using tools like: http://foundation.zurb.com/emails/inliner.html

This is a good resource as well, for what elements/attributes to stay away from: https://www.campaignmonitor.com/css/

Also, check out email on Acid. I'm not sure if they are fremium, but you can see how the email looks in every browser/client/device etc...

good luck.

Upvotes: 1

Related Questions