CODEWITHSUNDEEP
cssoutlookapache-poiopenxmloutlook-2010
Fayaz
Fayaz

Reputation: 334

Multiple css classes not working

I am converting a docx to html format (using apache poi) and sending it as email.

A snippet of generated html looks something like this 

<html>
<head>
	....
	<style>

		span.Normal{
			font-family: 'Arial';font-size: 9.0pt;
		}

		span.Title{
			font-family: 'Cambria';font-size: 28.0pt;color: #000000;
		}

		span.MySubtitle{
			font-family: 'Arial';font-size: 18.0pt;color: #000000;
		}

		span.MyTitle{
			font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000;
		}

	...
	</style>
</head>
<body> 
....

	<p class="Normal Title MyTitle">
		<span id="_GoBack">
			<span class="Normal Title MyTitle">Welcome Message</span>
			<span class="Normal Title MyTitle"> </span>
			<span class="Normal Title MyTitle">Username</span>
		</p>
		<p class="Normal Title MySubtitle">
			<span class="Normal Title MySubtitle">Issues and Solutions</span>
		</p>

	...
</body>
</html>

The multiple css classes are not recognized by Outlook client. It is only rendering the first css class "Normal" and ignoring the rest. But my original formatting (in docx) is present in "MyTitle" & "MySubTitle" classes.

Does Outlook support multiple css? Is there a way I can control multiple css generation.

Upvotes: 5

Views: 5595

Answers (3)

e1v
e1v

Reputation: 637

I've just discovered this problem myself.

It seems that Outlook is only taking the first class listed in the class attribute, ignoring everything else.

Stylesheet:

<!--[if gte mso 9]>
<style type="text/css">
.red {
    color: red;
}
.large {
    font-size: 72px;
}
</style>
<![endif]-->

Markup:

<div class="red">
    THIS SHOULD BE RED IN OUTLOOK
</div>
<div class="large">
    THIS SHOULD BE LARGE IN OUTLOOK
</div>
<div class="red large">
    THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
<div class="large red">
    THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>

Result:

Screenshot demonstrating that Outlook ignores all classes except the first one when applying stylesheet

As far as I see, all versions of Outlook are affected. Including the newer ones.

I've filed a bug report to hteumeuleu/email-bugs documenting this quirk:

https://github.com/hteumeuleu/email-bugs/issues/117

Upvotes: 5

P13
P13

Reputation: 46

As said previously you should first check your html to make it cleaner. Emails are tough to get right and perfect in every single mail client/server out there. So if you want to get things right, have a look at all the free and responsive templates available anywhere on the web.

The classic yet efficient solution for mail is rely in the table tag.

You can find a good example here

Also, when it comes to display on different mail clients, Outlook is one of the most difficult. There are tools like Litmus that allows you to preview the result of your email but it's quite expensive. Fortunatly they also propose free responsive templates that you can use for inspiration.

Don't hesitate to post an improved version of your email so we can look at it and help you more efficiently.

Upvotes: 1

Longblog
Longblog

Reputation: 849

Okay, there's a lot going wrong here. First and foremost, the html isn't really correct at all. You have paragraphs nested in paragraphs, and you're using spans to define headings, and splitting each word into it's own span.

I don't know what those three dots at the beginning and end are for, but they shouldn't be in the style tags.

Your class names aren't really descriptive, they're repeating rules, you have every class applied to every element, and they're out of order in the style sheet, making it confusing to understand what's going on.

My suggestions are to:

  • Use semantic markup
  • Discard classes and use semantic selectors
  • Use the DRY principle (don't repeat yourself)
  • list rules with a logical order, such as starting from the largest and ending at the smallest.

Here's some refactored code using your styling rules and demonstrating how to use each element.

<html>
	<head>
		<style>
			body {
				color: #000000;
			}
			h1,
			h2,
			p { 
				font-family: 'Arial';
			}
			h3 {
				font-family: 'Cambria';
			}
			h1 {
				font-size: 28pt;
			}
			h2 {
				font-size: 22pt;
			}
			h3 {
				font-size: 18pt;
			}
			p {
				font-size: 9pt;
			}
		</style>
	</head>
	<body> 
		<h1>Heading 1</h1>
		<h2>
			Heading 2
		</h2>
		<h3>
			Heading 3
		</h3>
		<p>
			This is paragraph text.
		</p>
	</body>
</html>

Upvotes: 0

Related Questions