none
Html for Email Problem RRS feed

  • Question

  • Hi,

    I created an email using Expression Web based on my Website.  It looks perfect in both the Expression Web Preview and ConstantContact Preview.  However when it is received in Outlook its all messed up.  In preview its got a header, left column, center content column and right column.

    When it shows up in outlook its all stacked up with the header on top of left column, on top of right column, on top of content.

    Heres the code:  Any suggestion would be appreciated!

     

    <html>
    <head>
    <meta content="en-us" http-equiv="Content-Language" >
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
    <title>A Place for Healing Newsletter</title>
    
    <style type="text/css">
    /* CSS layout */
    
    body {
    	margin: 0;
    	padding: 0;
    	min-width: 600px;
    }
    
    #masthead {
    	background-image: url('http://www.placeforhealing.com/Images/Header.jpg');
    	background-repeat: no-repeat;
    	background-attachment: inherit;
    	background-position: center center;
    	height: 150px;
    }
    
    #top_nav {
    }
    
    #container {
    	
    }
    
    #left_col {
    	width: 150px;
    	float: left;
    }
    
    #right_col {
    	width: 150px;
    	float: right;
    }
    
    #page_content {
    	background-position: center 210px;
    	margin-left: 150px;
    	margin-right: 175px;
    	background-image: url('http://www.placeforhealing.com/Images/Hands%20Logo%2050%20lite.jpg');
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	overflow: auto;
    	height: 850px;
    }
    #footer {
    	clear: both;
    	padding-right: 15px;
    	margin-top: 50px;
    	color: #008000;
    }
    #header {
    	margin-left: 225px;
    }
    #masthead {
    	min-width: 450px;
    }
    .contenttextCopy {
    	color: #663300;
    	font-family: "Times New Roman", Times, serif;
    }
    .testimonials {
    	color: #663300;
    	font-family: "Times New Roman", Times, serif;
    	margin-left: 200px;
    	margin-right: 200px;
    	font-weight: bold;
    	font-size: medium;
    }
    .center {
    	color: #663300;
    	font-family: "Times New Roman", Times, serif;
    	margin-left: 150px;
    	margin-right: 175px;
    	margin-top: 25px;
    	height: 850px;
    	background-image: url('http://www.placeforhealing.com/Images/Hands%20Logo%2050%20lite.jpg');
    	background-repeat: no-repeat;
    	background-position: center 210px;
    	background-attachment: fixed;
    	overflow: auto;
    }
    
    .auto-style2 {
    	text-align: center;
    }
    .footertest {
    	font-size: small;
    	color: #0B772A;
    	font-family: "Times New Roman", Times, serif;
    }
    .auto-style5 {
    	text-align: left;
    }
    .auto-style9 {
    	font-size: small;
    	color: #663300;
    	font-family: "Times New Roman", Times, serif;
    	text-align: left;
    }
    .auto-style10 {
    	font-family: "Times New Roman", Times, serif;
    }
    .auto-style12 {
    	font-size: x-small;
    	font-style: italic;
    }
    .auto-style13 {
    	font-size: medium;
    	color: #663300;
    	font-family: Garamond;
    	text-align: left;
    }
    .auto-style21 {
    	border-width: 0px;
    }
    .ccenews {
    	color: #006699;
    	font-size: 16px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    }
    .cctrust {
    	font-size: small;
    	color: #4C8BAE;
    	font-family: Arial, Helvetica, sans-serif;
    	text-align: left;
    }
    .auto-style23 {
    	margin-left: 40px;
    }
    .auto-style24 {
    	font-size: x-small;
    }
    .auto-style25 {
    	font-size: x-small;
    	color: #663300;
    	font-family: "Times New Roman", Times, serif;
    	text-align: left;
    }
    </style>
    
    </head>
    
    <body> 
    
    <div id="masthead" style="height: 169px">
    	<img src="http://www.placeforhealing.com/Images/Leap.jpg" width="120" height="165" alt="Jumping Logo"></div>
    <div id="top_nav" class="auto-style2">
    	<a href="http://www.placeforhealing.com/index.htm"><img src="http://www.placeforhealing.com/Images/buttonB6.jpg" width="100" height="33" alt="Home"></a>
    	<a href="http://www.placeforhealing.com/about/About.html"><img src="http://www.placeforhealing.com/Images/buttonB9.jpg" width="100" alt="About Dr. Barry" height="33"></a>
    	<a href="http://www.placeforhealing.com/about/APFH.html"><img src="http://www.placeforhealing.com/Images/button1D0.jpg" width="150" alt="About A Place for Healing" height="33"></a>
    	<a href="http://www.placeforhealing.com/Map/Map.html"><img src="http://www.placeforhealing.com/Images/button107.jpg" width="100" alt="Directions" height="33" ></a>&nbsp;
    	<a href="http://www.placeforhealing.com/Contact%20Us/Contact%20Us.html"><img src="http://www.placeforhealing.com/Images/button14B.jpg" width="100" alt="Contact Us" height="33"></a><br >
    <p class="testimonials"></p>
    </div>
    <div id="container">
    	
    	<div id="left_col" class="left_col">
    		<h3>What is...</h3>
    		<p><a href="http://www.placeforhealing.com/Services/ROH.html">
    		<img id="img1" alt="Reorganizational Healing" fp-style="fp-btn: Metal Capsule 2; fp-font-size: 9; fp-img-hover: 0; fp-img-press: 0; fp-preload: 0" fp-title="Reorganizational Healing" height="28" src="http://www.placeforhealing.com/images/button4.jpg" style="border: 0" width="140"></a><a href="http://www.placeforhealing.com/Services/ROH.html">
    		</a></p>
    		<p><a href="http://www.placeforhealing.com/Services/NSA.html">
    		<img id="img2" alt="Network Spinal Analysis" fp-style="fp-btn: Metal Capsule 2; fp-font-size: 9; fp-img-hover: 0; fp-img-press: 0; fp-preload: 0" fp-title="Network Spinal Analysis" height="28" src="http://www.placeforhealing.com/images/button7.jpg" style="border: 0" width="140"></a><a href="http://www.placeforhealing.com/Services/NSA.html">
    		</a></p>
    		<p><a href="http://www.placeforhealing.com/Services/SRI.html">
    		<img id="img3" alt="SRI" fp-style="fp-btn: Metal Capsule 2; fp-font-size: 9; fp-img-hover: 0; fp-img-press: 0; fp-preload: 0" fp-title="SRI" height="28" src="http://www.placeforhealing.com/images/button9.jpg" style="border: 0" width="140"></a><a href="http://www.placeforhealing.com/Services/SRI.html">
    		</a></p>
    		<p><a href="http://www.placeforhealing.com/Services/ROH.html">
    		<img id="img4" alt="Cause of All Disease" fp-style="fp-btn: Metal Capsule 2; fp-font-size: 9; fp-img-hover: 0; fp-img-press: 0; fp-preload: 0" fp-title="Cause of All Disease" height="28" src="http://www.placeforhealing.com/images/buttonB.jpg" style="border: 0" width="140"></a><a href="http://www.placeforhealing.com/Services/cause.html">
    		</a></p>
    		<div class="auto-style2">
    			<strong><a href="Services/ROH.html"><span class="auto-style24">Click here to receive a FREE 
    			Reorganizational Healing Consultation and Report</span></a></strong><br >
    		</div>
    		<p>	<!-- AddThis Button BEGIN -->
    <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c40c7986311cc2b">
    		<img src="http://www.placeforhealing.com/lg-share-en.gif" width="144" height="21" alt="Bookmark and Share" style="border:0"></a>
    <!-- AddThis Button END -->
    </p>
    	</div>
    
    	<div id="right_col" class="right_col">
    		<h3 class="auto-style2">Our Books</h3>
    		<p class="auto-style2">
    		<a href="http://www.amazon.com/gp/product/0967936004?ie=UTF8&amp;tag=aplaceforheali0e&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0967936004" target="_blank">
    		<img alt="A Clear Path to Healing" height="126" src="http://www.placeforhealing.com/Images/acpthcover2.jpg" width="81" class="auto-style21" ></a></p>
    		<p class="auto-style2">
    		<a href="http://www.amazon.com/gp/product/0967936004?ie=UTF8&amp;tag=aplaceforheali0e&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0967936004" target="_blank">
    		<span class="auto-style24">A Clear Path to Healing 
    		</span> 
    		</a>
    		<img src="http://www.assoc-amazon.com/e/ir?t=aplaceforheali0e&l=as2&o=1&a=0967936004" width="1" height="1" alt="A Place for Healing" style="border:none ; margin:0pxt;" class="auto-style24" >&nbsp;</p>
    		<p class="auto-style25">
    		<strong>Review</strong></p>
    		<p class="auto-style9">
    		<span class="auto-style24">...a book you will go back to a number of times, and on each visit, 
    		you will see something new... <br >
    		-<em>-</em><strong><em>Bob Proctor</em></strong>, contributer, The Secret</span> 
    		 
    		</p>
    		<p class="auto-style2">
    		<a href="http://www.amazon.com/gp/product/0967936020?ie=UTF8&amp;tag=aplaceforheali0e&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0967936020" target="_blank">
    		<img height="133" src="http://www.placeforhealing.com/Images/tfad72.jpg" width="81" alt="To Face a Dragon" class="auto-style21" ></a></p>
    		<p class="auto-style2">
    		<a href="http://www.amazon.com/gp/product/0967936020?ie=UTF8&amp;tag=aplaceforheali0e&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0967936020" target="_blank">
    		<span class="auto-style24">To Face a Dragon</span></a><img src="http://www.assoc-amazon.com/e/ir?t=aplaceforheali0e&l=as2&o=1&a=0967936020" width="1" height="1" alt="To Face a Dragon" class="auto-style24"><span class="auto-style24">
    &nbsp;&nbsp;</span></p>
    		<h3 class="auto-style25">Review</h3>
    		<div class="auto-style13" style="margin: 0 0 1em 0;">
    			<span class="auto-style10"><span class="auto-style24">&quot;A must read! A 
    			magical story that kept me entranced while sharing a profound 
    			message of abundance, healing and transformation.&quot;<br >
    &nbsp;-- </span>
    			<span class="auto-style12"><strong>Mark Victor Hansen</strong>, 
    			<br >
    			Co-creator #1 New 
    			York Times best-selling series Chicken Soup for the Soul and 
    			Co-author of The One Minute Millionaire</span></span> </div>
    		<p class="auto-style5"></p>
    		
    	</div>
    	
    	<div id="page_content" class="contenttextCopy">
    		
    		Hello,</greeting><br>I am happy and excited to announce our newly designed 
    		website <a href="http://www.placeforhealing.com">www.placeforhealing.com</a>.<br>
    		<br>On this website, you will have access to the latest, cutting edge health and 
    		wellness resources.<br><br>Learn about:<ul>
    			<li>Reorganizational Healing</li>
    			<li>Network Spinal Analysis</li>
    			<li>Somatorespiratory Integration (SRI)</li>
    			<li>The Cause of all Disease</li>
    		</ul>
    		<p><strong>Participate in our FREE online Reorganizational Healing 
    		Consultation and receive a free report!</strong></p>
    		<p><strong>Click on the links to the left and above to go right to the 
    		site!</strong></p>
    		<p>Coming Soon:</p>
    		<ul>
    			<li>
    			<p class="auto-style23">The latest Health and Wellness News and 
    			Articles</p>
    			</li>
    			<li>
    			<p class="auto-style23">Wellness Bookstore and online boutique</p>
    			</li>
    			<li>
    			<p class="auto-style23">Coming Events</p>
    			</li>
    		</ul>
    </div>
    
    </div>
    
    </body>
    
    </html>
    

     

    Friday, July 23, 2010 10:20 PM

Answers

All replies