[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2098
  • Last Modified:

Java mail css problem

I had created on java mail program I would send a static html page to the clients.  The style sheets (css) is static as well embedded with html. Using Stringbuffer to append the entire html content and sent to client.  The mail is sending successfully, but in the client side, only html message with some text was appeared but the style sheet formatted design was not send why? Can anyone please give solutions for this problem.
Sample code


webHeader.append("<html>");
		webHeader.append("<head>");
		webHeader
				.append("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">");
		webHeader.append("<title>Test</title>");
		webHeader.append("<style type=\"text/css\">");
		webHeader.append("html { height: 100% } ");
		webHeader.append("body {");
		webHeader.append("margin: 0px;");
		webHeader.append("padding: 0px;");
		webHeader.append("background-attachment:fixed;");
		webHeader.append("background-color: #fff;");
		webHeader
				.append("background-image: url(http://mypage/images/bg.gif);");
		webHeader.append("background-repeat: repeat-x;");
		webHeader.append("background-position: left top;");
		webHeader.append("min-height: 101%");
		webHeader.append("}");
		webHeader.append(".search {");
		webHeader.append("padding-left: 25px;");
		webHeader.append("padding-top:6px;");
		webHeader.append("font-family: Verdana, Geneva, sans-serif;");
		webHeader.append("font-size: 11px;");
		webHeader.append("	color: #E53124;");
		webHeader.append("	}");
		webHeader.append("	.main {");
		webHeader
				.append("background-image: url(http://mypage/images/steve1_11.jpg);");
		webHeader.append("}");
		webHeader.append(".body-middle {");
		webHeader
				.append("background-image: url(http://mypage/images/emailer-middle.jpg);");
		webHeader.append("background-repeat: repeat-y;");
		webHeader.append("background-color:#FFF;");
		webHeader.append("height:100px;");
		webHeader.append("overflow:visible;");
		webHeader.append("padding-left:20px;");
		webHeader.append("_padding-left:20px;");
		webHeader.append("	padding-right:40px;");
		webHeader.append("_padding-right:40px;");
		webHeader.append("}");
		webHeader.append(".body-top{");
		webHeader
				.append("background-image: url(http://mypage/images/emailer-top.jpg);");
		webHeader.append("background-repeat: no-repeat;");
		webHeader.append("	height:63px;");
		webHeader.append("width: 100%;");
		webHeader.append("border-top: 0px solid #cccccc;");
		webHeader.append("border-bottom: 0px solid #cccccc;");
		webHeader.append("padding-bottom: 0px;");
		webHeader.append("_padding-bottom: 0px;");
		webHeader.append("}");
		webHeader.append(".body-bottom{");
		webHeader
				.append(" background-image: url(http://mypage/images/emailer-bottom.jpg);");
		webHeader.append(" height:21px;");
		webHeader.append("width: 100%;");
		webHeader.append("		}");
		webHeader.append(".bottom {");
		webHeader
				.append("background-image: url(http://mypage/images/page-bottom.png);");
		webHeader.append("background-repeat: no-repeat;");
		webHeader.append("height:23px;");
		webHeader.append("}");

		webHeader.append("#tab H1 {");
		webHeader.append("color: #000;;");
		webHeader.append("text-decoration: none;;");
		webHeader.append(" font-family: Verdana, Geneva, sans-serif;;");
		webHeader.append(" font-size: 18px;;");
		webHeader.append("line-height: 16px;;");
		webHeader.append("padding-left: 20px;;");
		webHeader
				.append("  background: url(http://mypage/images/arrow.gif) no-repeat center left;;");
		webHeader.append(" font-weight:normal;;");

		webHeader.append("};");
		webHeader.append("#tab h1 span {;");
		webHeader.append("color: #E63223;;");
		webHeader.append("};");
		webHeader.append(".body-top h1 {;");
		webHeader.append("padding-right: 18px;;");
		webHeader.append("padding-bottom: 0px;;");
		webHeader.append("	padding-left: 18px;");
		webHeader.append("	}");
		webHeader.append(".body-top #tab {");
		webHeader.append("padding-left: 20px;");
		webHeader.append("padding-top: 10px;");
		webHeader.append("padding-bottom:0px;");
		webHeader.append("}");
		webHeader.append("#advsearch {");
		webHeader.append("font-family: Verdana, Geneva, sans-serif;");
		webHeader.append("font-size: 10px;");
		webHeader.append("color: #333;");
		webHeader.append("	margin-left:90px;");
		webHeader.append("margin-top:4px;");
		webHeader.append("	margin-bottom:10px;");
		webHeader.append("	}");
		webHeader.append("	#advsearch a {");
		webHeader.append("color: #333;");
		webHeader.append("text-decoration: none;");
		webHeader.append("}");
		webHeader.append("#main {");
		webHeader.append(" 	margin:0px 0px 0px 0px;");
		webHeader.append("}");
		webHeader.append("#main h1 {");
		webHeader.append("font-family:Verdana, Geneva, sans-serif;");
		webHeader.append("font-size:12px;");
		webHeader.append("line-height:22px;");
		webHeader.append("padding-left:0px;");
		webHeader.append("_padding-left:0px;");
		webHeader.append("font-weight:bold;");
		webHeader.append("}");
		webHeader.append("#main h2 {");
		webHeader.append("font-family:Verdana, Geneva, sans-serif;");
		webHeader.append("font-size:12px;");
		webHeader.append("line-height:22px;");
		webHeader.append("padding-left:20px;");
		webHeader.append("	_padding-left:0px;");
		webHeader.append("	font-weight:normal;");
		webHeader
				.append("	background: url(http://mypage/images/arrow.gif) no-repeat center left;");
		webHeader.append("	}");
		webHeader.append("	#main p {");
		webHeader.append("font-family:Verdana, Geneva, sans-serif;");
		webHeader.append("	font-size:12px;");
		webHeader.append("	line-height:24px;");
		webHeader.append("	font-weight:normal;");
		webHeader.append("	padding-left:25px;");
		webHeader.append("	}");
		webHeader.append("	#main .clear {");
		webHeader.append("border-top: 1px solid #eaeaea;");
		webHeader.append("display: block;");
		webHeader.append("}");

		webHeader.append("#main p a {");
		webHeader.append("color: #0066cc;");
		webHeader.append("line-height:24px;	");
		webHeader.append("text-decoration: none;");
		webHeader.append("}");
		webHeader.append("#main p a:hover {");
		webHeader.append("color: #aa2716;");
		webHeader.append("text-decoration: none;");
		webHeader.append("}");
		webHeader.append("#emailer table {");
		webHeader.append("width: 100%;");
		webHeader.append("}");
		webHeader.append("#header {");
		webHeader.append("text-align: center;");
		webHeader.append("padding-top: 5px;");
		webHeader.append("_padding-top: 5px;");
		webHeader.append("padding-bottom: 5px;");
		webHeader.append("_padding-bottom: 5px;");
		webHeader.append("	border-top: 1px solid #cccccc;");
		webHeader.append("border-bottom: 1px solid #cccccc;");
		webHeader.append("}");
		webHeader.append(".emailernav {");
		webHeader.append("font-family: Verdana, Geneva, sans-serif;");
		webHeader.append("font-size: 12px;");
		webHeader.append("padding-right: 10px;");
		webHeader.append("color: #000;");
		webHeader.append("margin-top:8px;");
		webHeader.append("	margin-bottom:8px;");
		webHeader.append("}");
		webHeader.append(".emailernav a {");
		webHeader.append("color: #000;");
		webHeader.append("text-decoration: none;");
		webHeader.append("font-size: 11px;");
		webHeader.append("font-family: Verdana, Geneva, sans-serif;");
		webHeader.append("	margin-right:3px;");
		webHeader.append("	margin-left:3px;");
		webHeader.append("}");
		webHeader.append(".emailernav a span {");
		webHeader.append("	color: #E63223;");
		webHeader.append("}");
		webHeader.append(".warning {");
		webHeader.append("	height:75px;");
		webHeader.append("text-align: center;");
		webHeader.append("vertical-align: bottom;");
		webHeader.append("padding-bottom: 10px;");
		webHeader.append("_padding-bottom: 10px;");
		webHeader.append("}");
		webHeader.append("#subcat .prefheader {");
		webHeader.append("	vertical-align: middle;");
		webHeader.append("	width: 510px;");
		webHeader.append("	background-color: #E7E7E7;");
		webHeader.append("	}");
		webHeader.append("	</style>");
		webHeader.append("</head>");
		webHeader.append("	<body>");

		webHeader
				.append("<table width=\"900\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">");
		webHeader.append("<tr>");
		webHeader.append("  <td>&nbsp;</td>");
		webHeader.append(" </tr>");
		webHeader.append("  <tr>");
		webHeader
				.append(" <td width=\"100%\" height=\"87\" background=\"http://mypage/images/TopPage_Fade.jpg\"><a href=\"http://mypage/home.jsp\"><img src=\"http://mypage/images/logo.jpg\" width=\"295\" height=\"57\" border=\"0\" style=\"margin-top:10px; margin-left:30px;\">");
		webHeader.append("</a></td>");
		webHeader.append("  </tr>");
		webHeader.append("</table>");

		webHeader
				.append("<table width=\"900\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"white\">");
		webHeader.append("<tr>");
		webHeader.append("<td>");
		webHeader.append("<div class=\"emailernav\">");
		webHeader
				.append("<a href=\"http://mypage/home.jsp\">My Home</a> | ");
		webHeader
				.append("<a href=\"http://mypage/catpage.jsp\">X1</a> |");
		webHeader
				.append("<a href=\"http://mypage/catpage.jsp\">X2</a> |");
		webHeader
				.append("<a href=\"http://mypage/catpage.jsp\">X3</a> |");
		webHeader
				.append("<a href=\"http://mypage/catpage.jsp\">X3</a>");
		webHeader.append("</div>");
		webHeader.append("</td>");
		webHeader.append("<td align=\"right\">");
		webHeader.append("<div class=\"emailernav\">");
		webHeader
				.append("<a href=\"http://mypage/catpage.jsp\"><span>Profile</span></a> |");
		webHeader
				.append("<a href=\"http://mypage/catpage.jsp\"><span>Test</span></a>");
		webHeader.append("</div>");
		webHeader.append("</td>");
		webHeader.append("</tr>");
		webHeader.append("<tr>");
		webHeader.append("<td colspan=\"2\" id=\"header\">");
		webHeader
				.append("<img src=\"http://mypage/images/headers/emailer-header.jpg\">");
		webHeader.append("</td>");
		webHeader.append("</tr>");

Open in new window

0
habte
Asked:
habte
  • 7
  • 4
  • 4
  • +2
17 Solutions
 
ksivananthCommented:
try fixing it in the HTML file and then move the changes to you java class!
0
 
__geof__Commented:
If I remember correctly, not all mail programs render CSS correctly. I would replace your CSS class/id with the actual CSS in each tag.
0
 
ksivananthCommented:
atleast I can't see the end tag of body, html...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ksivananthCommented:
and makre sure you are sending the mail as HTML content and the the mail client program is enabled to show HTML!
0
 
Dave BaldwinFixer of ProblemsCommented:
HTML email is Not a web page.  Most email client programs will not fetch external CSS and some strip the entire <head> section off.  Inline CSS and only some of it is supported.  Here is a report on CSS support in email programs: http://www.campaignmonitor.com/css/
0
 
Dave BaldwinFixer of ProblemsCommented:
Also note that Gmail, Yahoo, and Hotmail will rewrite your code so it doesn't break their pages.  Most email programs block external images also until you enable them.
0
 
ValeriCommented:
Rhen read this http://www.campaignmonitor.com/css/ in order to render your email across the major email clients. Also I think that it's better to put your css inline in your tags.
0
 
habteAuthor Commented:
the mail client is Microsoft Office Outlook 2007
0
 
ValeriCommented:
Here are some templates with embeded CSS, you can use them as an example :
http://www.campaignmonitor.com/templates/
0
 
habteAuthor Commented:
any solution, i'm using outlook 2007? i think outlook 2007 engine is inferior in terms of CSS support
0
 
ksivananthCommented:
why don't yuou send it as attachement, don't have to worry about the client program!
0
 
ksivananthCommented:
>>any solution, i'm using outlook 2007

in that case, it should work, just makre sure the content is opening fine in IE
0
 
ValeriCommented:
ksivananth is right! Just dump the content of webHeader on the console, then create a html file from this content and open it in IE6. Probably there is some error there?!
0
 
ksivananthCommented:
if you see only HTML tags as message, that clearly says you are not sending it as HTML message, post the actual code!
0
 
habteAuthor Commented:
i have dumped the source to html, and it look ok using IE6, the only problem is email client. See the html code, and please edit the source if you can
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/T
R/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XXXXXX</title>

<style type="text/css">
html { height: 100% }
body {
        margin: 0px;
        padding: 0px;
        background-attachment:fixed;
        background-color: #fff;
        background-image: url(http://myhome/images/bg.gif);
        background-repeat: repeat-x;
        background-position: left top;
        min-height: 101%;
}
.search {
        padding-left: 25px;
        padding-top:6px;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 11px;
        color: #E53124;
}
.main {
        background-image: url(http://myhome/images/steve1_11.jpg);
}
.body-middle {
        background-image: url(http://myhome/images/emailer-middle.jpg);
        background-repeat: repeat-y;
        background-color:#FFF;
        height:100px;
        overflow:visible;
        padding-left:20px;
        _padding-left:20px;
        padding-right:40px;
        _padding-right:40px;
}
.body-top{
        background-image: url(http://myhome/images/emailer-top.jpg);
        background-repeat: no-repeat;
        height:63px;
        width: 100%;
        border-top: 0px solid #cccccc;
        border-bottom: 0px solid #cccccc;
        padding-bottom: 0px;
        _padding-bottom: 0px;
}
.body-bottom{
        background-image: url(http://myhome/images/emailer-bottom.jpg);
        height:21px;
        width: 100%;
}
.bottom {
        background-image: url(http://myhome/images/page-bottom.png);
        background-repeat: no-repeat;
        height:23px;
}

#tab H1 {
        color: #000;
        text-decoration: none;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 18px;
        line-height: 16px;
        padding-left: 20px;
        background: url(http://myhome/images/arrow.gif) no-repeat center
 left;
        font-weight:normal;

}
#tab h1 span {
        color: #E63223;
}
.body-top h1 {
        padding-right: 18px;
        padding-bottom: 0px;
        padding-left: 18px;
}
.body-top #tab {
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom:0px
}
#advsearch {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 10px;
        color: #333;
        margin-left:90px;
        margin-top:4px;
        margin-bottom:10px;
}
#advsearch a {
        color: #333;
        text-decoration: none;
}
#main {
        margin:0px 0px 0px 0px
}
#main h1 {
        font-family:Verdana, Geneva, sans-serif;
        font-size:12px;
        line-height:22px;
        padding-left:0px;
        _padding-left:0px;
        font-weight:bold;
}
#main h2 {
        font-family:Verdana, Geneva, sans-serif;
        font-size:12px;
        line-height:22px;
        padding-left:20px;
        _padding-left:0px;
        font-weight:normal;
        background: url(http://myhome/images/arrow.gif) no-repeat center
 left;
}
#main p {
        font-family:Verdana, Geneva, sans-serif;
        font-size:12px;
        line-height:24px;
        font-weight:normal;
        padding-left:25px;
}
#main .clear {
        border-top: 1px solid #eaeaea;
        display: block;
}

#main p a {
        color: #0066cc;
        line-height:24px;
        text-decoration: none;
}
#main p a:hover {
        color: #aa2716;
        text-decoration: none;
}
#emailer table {
        width: 100%;
}
#header {
        text-align: center;
        padding-top: 5px;
        _padding-top: 5px;
        padding-bottom: 5px;
        _padding-bottom: 5px;
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
}
.emailernav {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        padding-right: 10px;
        color: #000;
        margin-top:8px;
        margin-bottom:8px;
}
.emailernav a {
        color: #000;
        text-decoration: none;
        font-size: 11px;
        font-family: Verdana, Geneva, sans-serif;
        margin-right:3px;
        margin-left:3px;
}
.emailernav a span {
        color: #E63223;
}
.warning {
        height:75px;
        text-align: center;
        vertical-align: bottom;
        padding-bottom: 10px;
        _padding-bottom: 10px;
}
#subcat .prefheader {
        vertical-align: middle;
        width: 510px;
        background-color: #E7E7E7;
}
</style>
</head>
<body>

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="100%" height="87" background="http://myhome/images/TopPag
e_Fade.jpg"><a href="http://myhome/home.jsp"><img src="http://xrpdev/xi
linx-xrp/images/logo.jpg" width="295" height="57" border="0" style="margin-top:10px
; margin-left:30px;"></a></td>
  </tr>
</table>

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0" bgcolo
r="white">
<tr>
<td>
<div class="emailernav">
<a href="http://myhome/home.jsp">MAG Home</a> |
<a href="http://myhome/catpage.jsp?cid=403185503&mid=403185503">Re
search</a> |
<a href="http://myhome/catpage.jsp?cid=1197390703&mid=1197390703">
Data & Analysis</a> |
<a href="http://myhome/catpage.jsp?cid=859507566&mid=859507566">Co
mpetition</a> |
<a href="http://myhome/catpage.jsp?cid=1542776883&mid=1542776883">
My Research</a>
</div>
</td>
<td align="right">
<div class="emailernav">
<a href="http://myhome/catpage.jsp?cid=67461296&mid=67461296"><spa
n>Update User Profile</span></a> |
<a href="http://myhome/catpage.jsp?cid=846487118&mid=846487118"><s
pan>Contact</span></a>
</div>
</td>
</tr>
<tr>
<td colspan="2" id="header">
<img src="http://myhome/images/headers/emailer-header.jpg">
</td>
</tr>
<!-- top.html -->
<tr>
<td colspan="2">
  <div id="emailer">
  <table cellpadding="0" cellspacing="0">
  <tr>
   <td bgcolor="#FFFFFF" class="body-top">
      <div id="tab">
<h1>Welcome <span>xxxx</span></h1><h1>xxxxx</h1><!-- middle.html -->
      </div>
   </td>
   </tr>
   <tr>
   <td valign="top" bgcolor="#FFFFFF" class="body-middle">
<a href="http://xxxxxxx.jsp</a> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<!-- bottom.html -->
   </td>
   </tr>
   <tr>
   <td valign="top" bgcolor="#FFFFFF" class="body-bottom">
   </td>
   </tr>
   </table>
   </div>
</td>
</tr>
<!-- footer.html -->
<tr>
<td colspan="2">
  <table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td class="warning">
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxx
    </td>
  </tr>
  <tr>
    <td class="bottom"></td>
    <td>
      <img src="http://myhome/images/spacer.gif" width="1" height="23" b
order="0" alt="">
    </td>
  </tr>
  </table>
</td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
ksivananthCommented:
can you post the screenshot how you see it in outlook?
0
 
__geof__Commented:
You should have your CSS inline. not in the <head> email is not (yet) a browser.
0
 
habteAuthor Commented:
can you give me an example, i'm new to CSS: edit my code if possible
What do you mean "You should have your CSS inline. not in the <head> email is not (yet) a browser?"
0
 
Dave BaldwinFixer of ProblemsCommented:
Basically take everything that is in your style section in the <head> section and put it 'inline' in the body of the message.  Most email clients will ignore your <head> section.  They will also refuse to load 'external' images like "http://myhome/images/arrow.gif" until you click Ok.  Outlook 2007 is noted to be bad.  Here's the bad news: http://www.campaignmonitor.com/blog/post/2393/microsoft-takes-email-design-b/
0
 
ValeriCommented:
Do it in this way. The attachment renders well in all of the email clients. Use only the allowed styles described here : http://www.campaignmonitor.com/css/
template-basic.html
0
 
Dave BaldwinFixer of ProblemsCommented:
@Valeri, I tried your template to all of the email services I have including Gmail, Yahoo, and Hotmail along with Outlook Express and Thunderbird.  It worked well except Gmail stripped out most the CSS so it was just a black on white page.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 7
  • 4
  • 4
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now