Vivek Vardhan Vivek Vardhan - 7 months ago 30
HTML Question

Some CSS styles not applied in html when it as a mail using javax mail

I am trying to send a formatted html as a mail using Javax mail API.
The mail util-code used is

Message message = new MimeMessage(session);
message.setFrom(new InternetAddress(from));
message.setHeader("Auto-Submitted", "auto-generated");
message.setReplyTo(InternetAddress.parse(commaSeperatedReplyTo));

Multipart multipart = new MimeMultipart();
if (body != null) {
MimeBodyPart messageBodyPart = new MimeBodyPart();
messageBodyPart.setContent(body, "text/html;charset=utf-8");
multipart.addBodyPart(messageBodyPart);

}
message.setContent(multipart);


And the html body generated was

<html>
<body>
<style type="text/css">

#content ul li{
display:inline !important;
float:left;
padding: 7px;
margin-right: 4px;
font-style: italic;

}
</style>

<font face ="Arial" size=4> <U>DESCRIPTION</U>:Test </font><br/><br/>
<div id="content">
<ul>
<li> component_id</li>
<li> component_type_id</li>
<li> name</li>
<li> update_user</li>
<li> update</li>
<li> key</li>
<li> field</li>
</ul>

</div>
</body>
</html>


I am expecting this to display inline, not up and down. I tested the generated html in fiddle also. Working as expected. But, in the mail, i am getting it as normal list. Why inline display is not working in email?

need help

Answer

E-mail-clients often do not follow standards. Some clients like gMail even ignore CSS-declarations in a <style>-block. CampaignMonitor has some great resources on how to create HTML-e-mails that are supported by most clients.

You should convert your layout to something like this (use tables!):

<html>
    <body>
        <font face="Arial" size=4><U>DESCRIPTION</U>:Test</font>
        <br/>
        <br/>
        <table>
            <tr>
                <td>component_id</td>
                <td>component_type_id</td>
                <td>name</td>
                <td>update_user</td>
                <td>update</td>
                <td>key</td>
                <td>field</td>
            </tr>
        </table>
    </body>
</html>

Then you can style the table/cells using inline CSS.