CODEWITHSUNDEEP
htmlemailoutlook
drewhagni
drewhagni

Reputation: 3

Why is Outlook ignoring my width attributes?

I've looked thoroughly, but can't seem to find the culprit on this one. I understand that coding for emails is kind of like coding for the web in 1999 and each client ignores different attributes, but there must be one that I'm not aware of. Other email clients look fine, but Outlook seems to stretch the width of the content to 100% regardless of what I do.

I've removed all instances of "px", applied width="599" to every <table>, <tr>, and <td> I could find, and have removed all divs in favor of spans when needed.

I realize the repeated width="599" is redundant and probably unnecessary, but I'm at a point of desperation now. Other questions were similar and I attempted their solutions, but no luck for me yet. My code is below if someone is willing to look through it:

<html>
<head>
<title>Ultimate 5K Arena Challenge</title>
<style type="text/css">
body { background: #333333; }
a:link, a:active, a:visited, a:hover { color: #0033ff; text-decoration: underline; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.4rem; font-weight: 400; }
h4 { font-size: .9rem; font-style: italic; }
h5 { font-size: .8rem; font-style: italic; font-weight: 300; }
h5 a:link, h5 a:visited, h5 a:active, h5 a:hover { color: #999999;}
.orange { color: #ff5801;}
.underline { text-decoration: underline}
</style>
</head>
<body>
<table width="599; text-align:center;" cellpadding="0" cellspacing="0" border="0" align="center" style="text-align:center; font-family:'Calibri', sans-serif; background:#ffffff;">
<tr width="599;">
<td width="599;"><a href="http://ultimate5k.mabeecenter.com/" target="_blank"><img src="http://mabeecenter.com/ultimate5k/storage/Eblast/Student%20Instructions/Assets/header.jpg"></a></td>
</tr>
<tr width="599;">
<td width="599;" style="background:#ffffff; padding:1rem; color:#222222;">
<p><em><small>Please pass this on to other students!</small></em></p>
<h2>Oral Roberts University 50th Anniversary</h2>
<h1>Ultimate 5K Arena Challenge</h1>
<h3>Saturday, October 24, 2015 @ 8:30 AM</h3>
<h4 class="orange">HPE Extra Credit Available for ORU Students!</h4>
<span align="left">
<p>Students,</p>
<p>If you haven't yet heard, our traditional Fun Run has partnered with the ORU 50th Anniversary  Ultimate 5K Arena Challenge! This is a real community 5K race that we're encouraging all students to participate in. Just like in years past, you will be able to receive <strong class="orange">EXTRA CREDIT</strong> in participating HPE courses for completing this year's race.</p>
<p>There are a few minor changes that we'd like to make you aware of:
<br /><ol>
<li>You may register online now at <a href="http://ultimate5k.mabeecenter.com/" target="_blank">Ultimate5K.MabeeCenter.com</a></li>
<li class="orange">To receive the student discount, you must use password: <span class="underline">funrun</span></li>
<li>Alternatively, you may download our student cash-only form from our <a href="http://ultimate5k.mabeecenter.com/students/" target="_blank">Students page</a> and register in person at the Mabee Center Ticket Office from September 14th to October 16th (M-F, 10 AM - 5 PM). For more registration information, please visit our <a href="http://ultimate5k.mabeecenter.com/event/" target="_blank">Event Info page</a>.</li>
<li>You may also obtain our cash-only form from the Health, Leisure, and Sport Science Department at the Aerobics Center</li>
<li>Just like a real community 5K, packet and T-shirt pickup will begin the week prior to the event (Oct. 17-23). Don't worry, we'll remind you via email!</li>
</ol></p>
<p>If you have any questions, please feel free to contact your HPE instructor or refer to <a href="http://ultimate5k.mabeecenter.com/" target="_blank">Ultimate5K.MabeeCenter.com</a></p>
<p>By the way, don't forget to smile when you cross the finish line - you'll be on our Jumbo Mabee Vision Screen! Also, your race results will be available online immediately at <a href="http://ultimate5k.mabeecenter.com/" target="_blank">Ultimate5K.MabeeCenter.com</a>. We look forward to seeing you at the race!</p>
<h4>Dr. Fritz Huber, Chair of Health, Leisure, and Sport Science Department</h4>
</span>
</td>
</tr>
<tr width="599;">
<td width="599;"><a href="http://ultimate5k.mabeecenter.com/" target="_blank"><img src="http://mabeecenter.com/ultimate5k/storage/Eblast/Student%20Instructions/Assets/footer.jpg"></a></td>
</tr>
</table>
</body>
</html>

Any help is greatly appreciated!

Upvotes: 0

Views: 466

Answers (1)

Henkealg
Henkealg

Reputation: 1516

Most web based email clients and some of the email applications ignore the entire header of emails, including the style definitions, therefore breaking the class definitions.

You should consider keeping as much styling inline as possible, even if the email template is responsive.

The semicolon in your width attributes is unnecessary and might even break the email in some clients. Try setting the same width as a style attribute as some email clients prioritize that more.

style="width:600;"

Campaign monitor has some good guidelines to coding and css in emails.

This is a good starting point.

Upvotes: 1

Related Questions