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

habteAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
ksivananthConnect With a Mentor Commented:
try fixing it in the HTML file and then move the changes to you java class!
0
 
__geof__Connect With a Mentor 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
 
ksivananthConnect With a Mentor Commented:
atleast I can't see the end tag of body, html...
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
ksivananthConnect With a Mentor Commented:
and makre sure you are sending the mail as HTML content and the the mail client program is enabled to show HTML!
0
 
Dave BaldwinConnect With a Mentor Fixer 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 BaldwinConnect With a Mentor Fixer 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
 
ValeriConnect With a Mentor Commented:
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
 
ValeriConnect With a Mentor Commented:
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
 
ksivananthConnect With a Mentor Commented:
why don't yuou send it as attachement, don't have to worry about the client program!
0
 
ksivananthConnect With a Mentor Commented:
>>any solution, i'm using outlook 2007

in that case, it should work, just makre sure the content is opening fine in IE
0
 
ValeriConnect With a Mentor Commented:
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
 
ksivananthConnect With a Mentor Commented:
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
 
ksivananthConnect With a Mentor Commented:
can you post the screenshot how you see it in outlook?
0
 
__geof__Connect With a Mentor 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 BaldwinConnect With a Mentor Fixer 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
 
ValeriConnect With a Mentor Commented:
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 BaldwinConnect With a Mentor Fixer 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.