HTML Forum

**Truly** · 02-20-2009, 10:55 PM

Another fine Microsoft Product.

I have tested this email in

Gmail
Hotmail
Outlook 03
Thunderbird
Windows Mail

and it looks fine in all of them but it is a total mess in Outlook 07. Any suggestions?

HTML Code:

<html>
<head>
<title>
Title
</title>
<style type="text/css">
a:link {color: #3A6E8F; text-decoration: none;}     /* unvisited link */
a:visited {color: #3A6E8F; text-decoration: none;}  /* visited link */
a:hover {color: #3A6E8F; text-decoration: underline;}   /* mouse over link */
a:active {color: #3A6E8F; text-decoration: none;}   /* selected link */
</style>
</head>
<body style="font: 12px Arial, Helvetica, Verdana, sans-serif;">
<table  width="840px" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td align="center">
			<table width="100%" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
					<td width="720px">
						<img src = "http://www.domain.com/images/email/LoremIpsum/top-header.gif" alt="Divider">
					</td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
				</tr>
				<!--BODY -->
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
					<td width="720px">
					<br>
					<img src = "http://www.domain.com/images/email/LoremIpsum/sw-header.gif" alt="Divider">
						<table width="100%" border="0" cellpadding="10px" cellspacing="0" style="background-color:#FFFFFF;">
							<tr>
								<!--LEFT COLUMN WITH GREETING -->
								<td width="300px">
									<h4><span style="color:#8e9d22; font-weight:bold;">Good morning [FirstName],</span></h4> 	
									<p>Lorem Ipsum</p>
									<img src="http://www.domain.com/images/email/LoremIpsum/signature.gif" alt="Signature">
								</td>
								<td valign="top" width="420px">
									<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#F1F4F7;">
										<tr>
											<td width="10px"></td>
											<td width="400px" style="background-color:#F1F4F7;">
											<br>
												<h4><span style="color:#8e9d22; font-weight:bold;">Lorem Ipsum:</span></h4> 
												<em>Link:</em><br> <a href="#a">Lorem Ipsum</a><br><br>
												<em>Link:</em><br> <a href="#b">Lorem Ipsum</a><br><br>
												<em>Link:</em><br> <a href="#c">Lorem Ipsum</a>
												<br>&nbsp;
											</td>
											<td width="10px" style="background-color:#F1F4F7;"></td>
										</tr>
										<tr>
											<td width="10px" style="text-align:right; background-color:#FFFFFF;">
											<img src="http://www.domain.com/images/email/LoremIpsum/light-bottom-left.gif" alt="Bottom Border">
											</td>
											<td width="400px" valign="top" style="background-color:#FFFFFF;">
												<img src="http://www.domain.com/images/email/LoremIpsum/light-bottom.gif" alt="Bottom Border">
											</td>
											<td width="10px" style="text-align:left; background-color:#FFFFFF;">
											<img src="http://www.domain.com/images/email/LoremIpsum/light-bottom-right.gif" alt="Bottom Border">
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td>
								<span style="color:#8e9d22; font-weight:bold;">Lorem Ipsum</span><br>
								<span style="color:#576978; font-weight:bold;">Lorem Ipsum<br></span>
								<span style="font: 11px Arial, Helvetica, Verdana, sans-serif; color:#576978;">Lorem Ipsum: <br>
								Lorem Ipsum<br>
								Address <br>
								
								T. phone<br>
								<a href="http://www.domain.com">www.domain.com</a></span>
								</td>
							</tr>
						</table>
					</td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>		
				
				</tr>
				<!-- SPACER LINE -->
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>

					<td width="720px"><img src = "http://www.domain.com/images/email/LoremIpsum/divider.gif" alt="Spacer"></td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
				</tr>
				<!--POST BLOCK -->
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
					<td width="720px">
						<table border="0" cellpadding="10px" cellspacing="0"  style="background-color:#FFFFFF;">
							<tr>
								<td>
								<div style="margin-left:auto; margin-right:auto; text-align:center;">
									<img src="http://www.domain.com/images/email/Lorem Ipsum/Lorem Ipsum.gif" alt="Lorem Ipsum">
								</div>
									<h4><span style="color:#8e9d22; font-weight:bold;"><a name="a"></a>Lorem Ipsum</span></h4>
									<p>Lorem Ipsum </p>
								</td>
							</tr>
						</table>
					</td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
				</tr>
			<!-- END OF POST BLOCK -->
							<!-- SPACER LINE -->
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>

					<td width="720px"><img src = "http://www.domain.com/images/email/LoremIpsum/divider.gif" alt="Spacer" ></td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
				</tr>
				<!--POST BLOCK -->
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
					<td width="720px">
						<table border="0" cellpadding="10px" cellspacing="0"  style="background-color:#FFFFFF;">
							<tr>
								<td>
									<div style="float:right;">
									<img src="http://www.domain.com/images/email/LoremIpsum/bars.gif" alt="Clipart" >
									</div>
									<h4><span style="color:#8e9d22; font-weight:bold;"><a name="b"></a>Lorem Ipsum</span></h4>
									<p>Lorem Ipsum</p>
								</td>
							</tr>
						</table>
					</td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
				</tr>
				<!-- END OF POST BLOCK -->
				<!-- SPACER LINE -->
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>

					<td width="720px"><img src = "http://www.domain.com/images/email/LoremIpsum/divider.gif" alt="Spacer" ></td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
				</tr>
				<!--POST BLOCK -->
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
					<td width="720px">
						<table border="0" cellpadding="10px" cellspacing="0"  style="background-color:#FFFFFF;">
							<tr>
								<td>
									<div style="float:right;">
										<img src="http://www.domain.com/images/email/LoremIpsum/puzzle.gif" alt="Clipart" >
									</div>
									<h4><span style="color:#8e9d22; font-weight:bold;"><a name="c"></a>Lorem Ipsum</span></h4>
									<p>Lorem Ipsum</p>
								</td>
							</tr>
						</table>
					</td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
				</tr>
				<!-- END OF POST BLOCK -->
				<!-- SPACER LINE -->
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>

					<td width="720px"><img src = "http://www.domain.com/images/email/LoremIpsum/divider.gif" alt="Spacer" ></td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
				</tr>
				<!--FOOTER-->
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
					<td width="720px">
						<table border="0" cellpadding="10px" cellspacing="0"  style="background-color:#FFFFFF;">
							<tr>
								<td width="720px" style="text-align:center; font-size: 10px;">
									Copyright 2009 <br>Lorem Ipsum<br>
									
								</td>
							</tr>
						</table>
					</td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
				</tr>
				<!-- //FOOTER-->
				<!-- SPACER LINE -->
				<tr>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>

				<td width="720px"><img src = "http://www.domain.com/images/email/LoremIpsum/footer.gif" alt="Footer" ></td>
					<td width="60px" style="background-color:#3A6E8F;">
						<!--PLACE HOLDER -->
					</td>
				</tr>
				<!--FOOTER-->
		</table>
	</td>
	</tr>
</table>
</body>
</html>

**stevej** · 02-21-2009, 12:15 AM

Spelling correction: it's existence not existance. Sorry... I like proofreading, so things like that sometimes really bug me.

At any rate, on to the problem. I copied that code into my text-editor and took a look at it - and it looked like a pretty bad mess to me, without images and all. I'm not very good at debugging 'email browser HTML', so a screenshot of what it looks like in Outlook might be helpful, and maybe some code with correct image paths.

**LadynRed** · 02-21-2009, 08:38 AM

My best advice is to take a look at the information at www.campaignmonitor.com. Outlook 07 is a disaster.

**Truly** · 02-22-2009, 03:04 AM

Sorry for taking out all of the images, since this is not just a personal project I am working on I wanted to get rid of the overtly identifying marks.

And thanks for pointing out my bad spelling and grammar stevej

. Normally I am a perfectionist when it comes to the English language but when I talk on web forums I normally am pretty relaxed and just post the first version I type out.

Thanks LadynRed I will check that out. This email is being sent out primarily to business people so I would assume that most are still using outlook 03 which from my testing it looks fine on (hopefully all the stories of companies avoiding the 07/vista updates are true

)

**Truly** · 02-22-2009, 12:12 PM

Second question for you:

Normally you can use <!--[if lt IE 7]> and other tags to display the page in different ways. I assume this is wishful thinking, but is their an equivalent to see what mail client they are opening the email up in so for clients that I know display the email wierd I can have a simplified layout of a text only version?

**vossie** · 02-23-2009, 07:52 PM

Quote:

Originally Posted by Truly

Another fine Microsoft Product.

I have tested this email in

Gmail
Hotmail
Outlook 03
Thunderbird
Windows Mail

and it looks fine in all of them but it is a total mess in Outlook 07. Any suggestions?

I feel your pain, the same thing happened to me, design a nice new basic mail template for all our notification mails, and then run into the monstrous, horrifying nightmare that is Outlook 07 HTML rendering. Bottom line, it uses the old Word HTML rendering engine, not IE, and therefore is one of the few technologies in existence that can make the electrical system on a '70s Jaguar look reliable.

I ended up going with a pure table-based design, with all CSS inline and no images, using the HTML only to provide borders and background colors and text colors/weights.

And I'm not going to try anything else more fancy until Outlook 07 has disappeared back into the steaming hell from whence it came.

**Lizapotter** · 02-25-2009, 05:57 AM

The code seems fine, let me try it at my end and then i will tell you the solution if i will be able to fix it

**LadynRed** · 02-25-2009, 09:28 AM

Unfortunately, conditional comments calling an external css file will not work for html email. Like all other css, it has to be in-line to work as consistently as possible across email clients, and even then some just do not support css or only partially support it.

Unfortunately, for HTML email, we ARE stuck with nasty tables and in-line css. If you're going to use images, use them sparingly and always make sure you have a none-image alternative.

**wayfarer07** · 02-25-2009, 11:17 AM

You're not alone. I pretty much refuse to do this type of thing unless I absolutely have to, though it is an interesting glimpse of how crappy things were before CSS became dominant and standard.

Coding for Outlook 2007 made me fall in love with Internet Explorer 6, which is not so bad, after all.

**Truly** · 02-25-2009, 07:30 PM

Haha I love reading all of your comments ripping on Outlook 07. I am generally one of the few MS fans in existence but my god this is terrible.

LadyNRed, ya that was my question. I am entirely using inline css where I have to for styles and using tables for the layout, but how do you do the non-image alternative you were talking about? Or do you mean just not to send an email with images?

**wayfarer07** · 01:08 PM

The older versions of Outlook used IE for their HTML. In '07, it took a "step up" to using MS Word to render HTML. Yay Microsoft.

I'm really not anti Microsoft. They have made some brilliant contributions to web technology, like many contributions to JavaScript. Their browser is behind the rest of the crowd now, but I do understand the extra burden they have of keeping backwards compatibility, which other browser venders do not need as much.

Microsoft has made many innovations, but this whole Outlook blunder just makes me wonder.

P.S. There is nothing wrong with using images, but I would test the emails with images disabled, since that will be the default for many email clients, including (I think) Outlook 07. Users usually know to turn on images. Use alt="" text (though I'm not sure all the email clients obey it).

**leafar** · 03-07-2009, 07:31 AM

Whats the difference between a html email and just sending a link to a specially created page with whatever content you want on it?

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!