Solved

Java mail css problem

Posted on 2010-09-20
21
2,011 Views
Last Modified: 2012-05-10
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
Comment
Question by:habte
  • 7
  • 4
  • 4
  • +2
21 Comments
 
LVL 26

Accepted Solution

by:
ksivananth earned 206 total points
ID: 33714275
try fixing it in the HTML file and then move the changes to you java class!
0
 
LVL 6

Assisted Solution

by:__geof__
__geof__ earned 59 total points
ID: 33714276
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
 
LVL 26

Assisted Solution

by:ksivananth
ksivananth earned 206 total points
ID: 33714278
atleast I can't see the end tag of body, html...
0
 
LVL 26

Assisted Solution

by:ksivananth
ksivananth earned 206 total points
ID: 33714286
and makre sure you are sending the mail as HTML content and the the mail client program is enabled to show HTML!
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 119 total points
ID: 33714308
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
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 119 total points
ID: 33714318
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
 
LVL 16

Assisted Solution

by:Valeri
Valeri earned 116 total points
ID: 33714322
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
 

Author Comment

by:habte
ID: 33714342
the mail client is Microsoft Office Outlook 2007
0
 
LVL 16

Assisted Solution

by:Valeri
Valeri earned 116 total points
ID: 33714351
Here are some templates with embeded CSS, you can use them as an example :
http://www.campaignmonitor.com/templates/
0
 

Author Comment

by:habte
ID: 33714408
any solution, i'm using outlook 2007? i think outlook 2007 engine is inferior in terms of CSS support
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 26

Assisted Solution

by:ksivananth
ksivananth earned 206 total points
ID: 33714418
why don't yuou send it as attachement, don't have to worry about the client program!
0
 
LVL 26

Assisted Solution

by:ksivananth
ksivananth earned 206 total points
ID: 33714422
>>any solution, i'm using outlook 2007

in that case, it should work, just makre sure the content is opening fine in IE
0
 
LVL 16

Assisted Solution

by:Valeri
Valeri earned 116 total points
ID: 33714436
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
 
LVL 26

Assisted Solution

by:ksivananth
ksivananth earned 206 total points
ID: 33714449
if you see only HTML tags as message, that clearly says you are not sending it as HTML message, post the actual code!
0
 

Author Comment

by:habte
ID: 33717025
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
 
LVL 26

Assisted Solution

by:ksivananth
ksivananth earned 206 total points
ID: 33717043
can you post the screenshot how you see it in outlook?
0
 
LVL 6

Assisted Solution

by:__geof__
__geof__ earned 59 total points
ID: 33717068
You should have your CSS inline. not in the <head> email is not (yet) a browser.
0
 

Author Comment

by:habte
ID: 33717268
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
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 119 total points
ID: 33718031
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
 
LVL 16

Assisted Solution

by:Valeri
Valeri earned 116 total points
ID: 33718290
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
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 119 total points
ID: 33720690
@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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Go is an acronym of golang, is a programming language developed Google in 2007. Go is a new language that is mostly in the C family, with significant input from Pascal/Modula/Oberon family. Hence Go arisen as low-level language with fast compilation…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to implement Singleton Design Pattern in Java.

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now