?
Solved

Can't forward a html email which is built with css

Posted on 2006-05-15
26
Medium Priority
?
608 Views
Last Modified: 2012-06-27
I personally didn't create this html email but basically it just a copy of a web page which is built purely in css. I've been given the task of fixing it so here's hoping you can help me! Basically when you receive email and forward it on the format breaks up. I'm going to paste the html and see what think:

I have also pasted the same question in HTML and got no where. At the end of the day I probably need to build html emails with just tables and not use css as I've read up its not that great. I wondered if there's a quick fix? Any help or clear instructions as the people in HTML don't same to understand the problem. Thanks

<HTML lang=eng-gb xml:lang="eng-gb" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Womens Designer Fashion Clothing, Shoes and Accessories by my wardrobe.com</TITLE>
<STYLE type=text/css media=all>

/* =Universal Resets */

*{
     margin: 0;
     padding: 0;
}

html,body{
     margin: 0;
     padding: 0;
}

body{
     text-align: center;
}

/*=General layout divs*/
div#header{
     position: relative;
     height: 20px;
     text-align: right;
}

div#container{
     width: 780px;
     margin: 0 auto;
     text-align: left;
}

div#content{
     float: right;
     width: 575px;
     margin: 10px 5px 0 0;
}

div#leftcontent{
     float: left;
     margin: 0 0 0 16px;
     display: inline;
}

div#logo{
     margin: 0 0 0 3px
}

div#maincontent{
     margin: 10px 0 0 0;
}

div#designertitle{
     margin:0 0 5px 10px;
}

div#designerlist {
     margin: 0 10px;
     padding: 0 0 5px 0;
}

div#designerlist ul li,
div#designerlist ul{
     list-style: none;
     margin: 0;
     padding: 0;
}

div#signupleft{
     float: left;
     clear: left;
     margin: 0 0 0 16px;
     display: inline;
}

div#signupleft p{
     padding:5px;
}

div#navbtm{
     float: left;
     clear: left;
     margin: 0 0 20px 16px;
     display: inline;
}

div#smallnav{
     margin: 5px 0;
}

div#smallnav ul,
div#smallnav ul li,
div#middlefooter ul,
div#middlefooter ul li{
     display: inline;
     margin: 0;
     padding: 0;
}

div#searcharea{
     float: right;
     margin: 5px 5px 0 0;
}

input#gobut,
input#searchinput,
label.search{
     vertical-align: middle;
}

div#mouseovers ul,
div#mouseovers ul li{
     display: inline;
     margin:0;
     padding: 0 8px 0 0;
}

div#collection{
     float: right;
     margin: 10px 10px 0 0;
}

div#footer{
     clear: both;
     width: 100%;
}

#rightfooter{
     text-align: right;
}

#middlefooter{
     text-align: center;
}

ul#currencylister,
ul#currencylister li{
     display: inline;
     list-style: none;
}

ul#currencylister li{
          margin:0 5px 0 0;
}
/*Index Page*/

td#featureimg{
     vertical-align: top;
     padding: 0 10px 0 0;
}

td#featureimg img{
     border:1px solid #666666;
}

td#featuresquare{
     background-image: url(http://www.my-wardrobe.com/images/layout/e_feature_bg.gif);
     background-repeat: no-repeat;
     text-align: center;
     margin: 0;
}

td#featuresquare ul li{
     display: inline;
     list-style: none;
     padding: 0 20px 0 0;
}

ul#featuretoprow{
     margin:0 0 30px 0;
}
ul#featurebtmrow{
     margin:0 0 30px 0;
}

td#editorpick p{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:10px;
     padding: 0 10px 10px 10px;
}

td#featuredproduct{
     padding: 0px 0 0 0;
}

td#justin{
     padding: 0 0 0 10px;
}

td#justin ul li{
     list-style: none;
     margin: 0;
     padding: 2px 0 2px 0;
}

/*Index Page Ends*/

/*Info Page Start*/

div#presspage{
     width: 320px;
     text-align: center;
     margin: 0 auto;
}

div.presscontent{
     display: inline;
}

div.presscontent p{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:10px;
     text-align: left;
}

div#presspage br{
     clear: both;
     margin: 5px 0 0 5px;
}

div.presscontent h2{
     text-align: left;
}

img.infopageImageLeft{
     float:left;
     border: none;
     margin: 0 2px 0 2px;
}

img.infopageImageRight{
     float:right;
     border: none;
     margin: 0 2px 0 2px;
}

div#infobuttons{
     text-align: center;
     margin: 20px auto;
}


td#leftinfo,
td#rightinfo{
     vertical-align: top;
}

.infopageImageRight{
     float: right;
     clear: both;
     margin: 10px;
}

td#middleinfo{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:10px;
     padding: 5px;
}

div#infobuttons{
     text-align: center;
     margin: 0 auto;
}

p.infotext{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:11px;
     margin: 3px 0;
}

.designerinfo{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:11px;
}

*/

/*Info Page Ends*/

/*Sitemap Starts*/
ul.smap_depts a:link,
ul.smap_depts a:active,
ul.smap_depts a:visited{
     font-family: Georgia, "Times New Roman", Serif;
     font-size: 14px;
     font-weight: bold;
     color:#beb0af;
}

ul.smap_depts{
     list-style: none;
}


ul.smap_prods{
     margin: 5px 0 5px 15px;
     list-style: none;
}

ul.smap_prods a:link,
ul.smap_prods a:active,
ul.smap_prods a:visited{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:11px;
     font-weight: normal;
     color: #47252d;
}

/*Sitemap Ends*/

/*designers page start*/
td.designerslisting{
     vertical-align: top;
}

td.designerslisting p{
     margin: 5px 5px 5px 0;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:11px;
     color: #333333;
}

p.designerlistingtitle a:link,
p.designerlistingtitle a:active,
p.designerlistingtitle a:visited,
p.designerlistingtitle a:hover{
     font-family: Georgia, "Times New Roman", Serif;
     font-size: 14px;
     font-weight: bold;
     color:#beb0af;
}

/*designers page ending*/

/*product listing page starts*/
div#designerscurrency{
     float:right;
     display: inline;
     margin: 0;
}

div.listingOptions{
     margin: 20px 0 0 0;
}

div.listingview{
     float:left;
     margin: 6px 5px 0 0;
}

div.listingtitle a{
     font-weight:bold;
}

div.listingSubTitle{
     font-weight: normal;
}

div.listingtitle a,
div.listingSubTitle{
     font-size:10px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #000000;
}

div.comminggroup{
     margin:0px 30px 10px 30px;
     padding: 50px 0 0 0;
}

div.listinggroup{
     margin:0px 30px 10px 30px;
     padding: 50px 0 0 0;
}

div.listinggroupstart{
     margin:0px 30px 10px 30px;
}

div.listingimage{
     text-align: left;

}

.listingpriceright{
     text-align: left;
}

.listingWasPrice{
     text-decoration: line-through;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:11px;
     font-weight: bold;
}

.price{
     color: #47252d;
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 14px;
}

.productlister{
     margin: 0;
     padding: 0;
     width: 550px;
}

.listingborder{
     border-left:1px solid #cccacb;
}

table.recommendtable td{
     padding: 0 5px 0 5px;
}

/*product listing page ends*/

/*product description starts*/

#email{
     display: none;
}

div#recomendlist{
     border-bottom: 1px solid #efeced;
     border-top: 1px solid #efeced;
     height: 270px;
}

div#emailafriend,
div#sizechart{
     float:left;
     padding: 0;
     margin: 0;
}

div#emailafriend{
     padding: 10px 0;
}
div#sizechart{
     width:300px;
}

table#proddesccontents td{
     vertical-align: top;
}

div.recomendlink{
     float: left;
      margin:0;
      padding:0 5px 0 0;
      width:180px;
}

div#productmainimage{
     text-align: center;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:11px;
}

div#productmainimage a{
     color: #47252d;
}

td#productdescimages,
td#proddescemailfriend{
     text-align: right;
}

td#proddescemailfriend table{
     margin: 0 0 0 5px;
}

div#producttext,
div#productsizes select{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:10px;
     color: #47252d;
}

div#productsizes select{
     width: 150px;
}

div#productsizes{
     margin: 0 0 10px 240px;
}

td#proddescimages{
     vertical-align: top;
}

div#productwasprice{
     color:#5a5a5a;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:12px;
     text-decoration: line-through;
     margin: 5px 0 0 0;
}

div#productprice{
     color: #47252d;
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 14px;
}

.mailfield{
     text-align: right;
     vertical-align: top;
     color: #5a5a5a;
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:10px;
}

div.proddescfootertable input,
div.proddescfootertable textarea{
     color: #000000;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:10px;
     width:170px;
}

div.proddescfootertable input#send{
     width:128px;
}

#sizechartanchor,
.linktext a{
     color: #47252d;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:10px;
}

div#productSubmit,
div#proddescback{
     padding: 10px 0 10px 0;
     text-align: center;
}

.linkprice{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:10px;
     color: #47252d;
}

div#productoptionsarea{
     margin:0 0 0 200px;
}

div#proddescbuttons{
     margin:0 0 0 200px;
}

/*product description ends*/

/*Department Page Starts*/
div#departmentlisting{
     text-align: center;
     /*background-image: url(../images/layout/bg_gradient.gif);
     background-repeat: repeat;     */
     width: 100%;
}

div#departmentlisting table{
     margin: 0 auto;
}

table#departmentthumbnails{
     border-collapse: collapse;
     empty-cells: show;
}

/*Department Page Ends*/

/*trends pages start*/
div#trends{
     text-align: center;
}

table#trendsdescription{
     margin:0 auto;
     text-align: left;
}


.trendstexttop{
     width: 180px;
}

.trendstext,
.trendstexttop{
     margin: 0 auto;
     color: #5a5a5a;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:10px;
}

table#trendsinfo td{
     color: #5a5a5a;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:10px;
}

.trendstext{
     width: 280px;
}


/*trends pages ends*/
 /* =Universal Resets */

img{
     border: none;
}

/* =1: General typography */
a:link,
a:active,
a:visited{
     text-decoration: none;
}

a:hover{
     text-decoration: underline;
}

/*Choose By Designer Colours*/
.designerred{
     color: #beb0af;
}

.designergreen{
     color: #d0ebe2;
}

.footerlink{
     color: #9e858a;
}

.search{
     color: #47252d;
     font-weight: bold;
}

.greylink{
     color: #333333;
}

.signuptitle{
     color: #ffffff;
}

.pinklink{
     color:#cf046f;
}

.boldy{
     font-weight: bold;
}

#breadcrumb,
#breadcrumb a{
     color: #d2c4c9;
     font-size: 16px;
}

#title{
     color: #47252d;
     line-height: 50px;
}

h2{
     font-size: 14px;
     margin: 5px 0 5px 0;
     color: #47252d;
}

html,
body,
#breadcrumb,
#breadcrumb a,
#title,
h2,
div#leftcontent{
     font-family: Georgia, "Times New Roman", Serif;
}

div#header,
div#footer,
td#leftfooter,
td#middlefooter,
td#rightfooter,
div#smallnav{
     font-family: Verdana, Helvetica, sans-serif;
}

div#title,
div#infotitle p,
div#collection span,
#title{
     font-size:30px;
}

.designerred,
.designergreen,
.search,
div#container{
     font-size:11px;
}

/*=2: html and body
---------------------*/

html,
body{
     background-color: #efeced;
}

div#leftcontent{
     background-image: url(http://www.my-wardrobe.com/images/layout/leftNavBar.gif);
     background-repeat: repeat-y;
     width:175px;
}

div#signupleft{
     background-image: url(http://www.my-wardrobe.com/images/layout/leftNavBar.gif);
     background-repeat: repeat-y;
     width:175px;
     color: #ffffff;
}

div#header,
div#footer,
td#leftfooter,
td#middlefooter,
td#rightfooter{
     background-color: #efeced;
     color: #9e858a;
     font-size:10px;
}

div#header{
     background: url(http://www.my-wardrobe.com/images/layout/topheader.gif);
     background-repeat: repeat-y;
}

div#container{
     background-color:#ffffff;
}

div#smallnav{
     font-size:10px;
}

div#mouseovers{
     border-top: 1px solid #efeced;
     border-bottom: 1px solid #efeced;
     padding: 10px 0 10px 0;
}

div#titlebanner{
     background-repeat: repeat-x;
     background-image: url(http://www.my-wardrobe.com/images/layout/title_bg.gif);
     height:85px;
}

div#title{
     line-height: 30px;
     width:350px;
     margin: 5px 0;
}

div#title p{
     margin: 0 10px;
}

div#infotitle p{
     padding: 30px 0;
}

div#collection{
     font-size:20px;
     line-height: 20px;
     text-align: right;
}

div#collection span{
     line-height: 30px;
}

</STYLE>




<META content="MSHTML 6.00.2900.2873" name=GENERATOR>
</HEAD>
<BODY>
<DIV id=container>
<DIV id=header>
<DIV id=rightheader>
</DIV></DIV>
<DIV id=wrapper>
<DIV id=content>
<DIV id=welcome>
<P class=boldy>Welcome to my-wardrobe.com</P></DIV>
<DIV id=smallnav>
</DIV>
<DIV id=mouseovers>
<UL>
<LI><A title="Go To My-Wardrobe Index" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/"><IMG height=16 alt=Home src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/home.gif" width=43></A>
<LI><A title="The Latest Fashion" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/74377/new"><IMG height=16 alt=New src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/new.gif" width=52></A>
<LI><A title="Stylish Clothing For All Occasions" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/71935/clothing"><IMG height=16 alt=Clothing src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/clothing.gif" width=61></A>
<LI><A title="The Latest Style Of Shoes For Any Outfit" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/71936/shoes"><IMG height=16 alt=Shoes src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/shoes.gif" width=42></A>
<LI><A title="Accessories To Make That Look, Just You " href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/71939/accessories"><IMG height=16 alt=Accessories src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/accessories.gif" width=82></A>
<LI><A title=Bags href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/71940/bags"><IMG height=16 alt=Bags src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/bags.gif" width=34></A>
<LI><A title=Designers href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/71943/designers"><IMG height=16 alt=Designers src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/designers.gif" width=69></A>
<!--<li><a href="http://www.my-wardrobe.com/mall/infopageviewer.cfm/MyWardrobe/trends"
title="Trends">
<img src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/trends.gif"  alt="Trends"
width="50" height="16" /></a></li>--><!--<li><a href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/71940/gifts"  title="Gifts">
<img src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/gifts.gif"
alt="Gifts"
width="34" height="16" /></a></li>-->
<LI><A title="My-Wardrobe Sale Now On" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73593/sale"><IMG height=16 alt=Sale src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/e_sale.gif" width=28></A> </LI></UL></DIV><!--/opt_collapseloggedin-->
<DIV id=titlebanner><IMG height=76 alt="2006 Spring Collection" src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/e_index_banner.gif" width=575> </DIV>
<DIV id=maincontent>
<TABLE width="100%">
<TBODY>
<TR>
<TD id=featureimg rowSpan=2>


<DIV id=featureimgnoscript><A href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/79197/mid-season-sale"><IMG title="Mid Season Sale" height=393 alt="Featured Product Range" src="http://www.my-wardrobe.com/images/home-images/e_home_image_01.jpg" width=270></A></DIV></TD>
<TD id=editorpick>
<P><IMG height=16 alt="Editor´s Note" src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/editors_note.gif" width=168></P>
<P>For the next two weeks we are offering a mid season sale promotion with up to 20% discount off selected items from collections such as Ann Louise Roswald, Cacharel, Danielademarchi, La Petite Salope and Sass and Bide. </P>
<P>Promotion end 19th May, so dont miss out. <A class=pinklink title="MId Season Sale" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/79197/mid-season-sale">See more..</A></P></TD></TR>
<TR>
<TD id=featuresquare>
<UL id=featuretoprow>
<LI><A href="http://www.my-wardrobe.com/mall/productpage.cfm/MyWardrobe/cacmac/72400"><IMG height=118 alt="Purple Macintosh Coat by Cacharel" src="http://www.my-wardrobe.com/mall/MyWardrobe/images/home-images/new_product_01.jpg" width=120></A>
<LI><A href="http://www.my-wardrobe.com/mall/productpage.cfm/MyWardrobe/SASSZEBRASKIRT/73204"><IMG height=118 alt="New York Destiny Skirt by Sass and Bide" src="http://www.my-wardrobe.com/mall/MyWardrobe/images/home-images/new_product_02.jpg" width=120></A> </LI></UL>
<UL id=featurebtmrow>
<LI><A href="http://www.my-wardrobe.com/mall/productpage.cfm/MyWardrobe/alrchidrs/72403"><IMG height=118 alt="Minerva Dress by Ann-Louise Roswald" src="http://www.my-wardrobe.com/mall/MyWardrobe/images/home-images/new_product_03.jpg" width=120></A>
<LI><A href="http://www.my-wardrobe.com/mall/productpage.cfm/MyWardrobe/Lpsreddress/72390"><IMG height=118 alt="Berry Red Net Dress by La Petite Salope" src="http://www.my-wardrobe.com/mall/MyWardrobe/images/home-images/new_product_04.jpg" width=120></A> </LI></UL></TD></TR>
<TR>
<TD id=featuredproduct><A href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/77961/jbrand"><IMG alt="Featured Product" src="http://www.my-wardrobe.com/mall/MyWardrobe/images/home-images/home_feature.gif"></A></TD>
<TD id=justin>
<P><IMG height=16 alt="Fashion Update" src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/fashion-update.gif" width=108></P>
<UL>
<LI><A class=greylink href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72263/tsubi">Tsubi Lean Beans back in stock!!</A>
<LI><A class=greylink href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/71939/accessories">Fabulous new accessories just arrived</A>
<LI><A class=greylink href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/78688/best-sellers">Best sellers from last week</A> </LI></UL></TD></TR></TBODY></TABLE></DIV></DIV></DIV>
<DIV id=leftcontent>
<DIV id=logo><A title=My-Wardrobe.com href="/http://www.my-wardrobe.commall/departmentpage.cfm/MyWardrobe/"><IMG src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/logo.gif" alt="My Wardrobe.com" width=145 height=89 border="0"></A></DIV>
<DIV id=designertitle><IMG height=43 alt="Shop By Designer" src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/designertitle.gif" width=85></DIV>
<DIV id=designerlist>
<UL>
<LI><A class=designerred title="Ann Louise Roswald" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72403/ann-louise-roswald">Ann Louise Roswald</A>
<LI><A class=designergreen title="Antonia de Vetta" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73194/antonia-de-vetta">Antonia de Vetta</A>
<LI><A class=designerred title=Bash href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73195/bash">Bash</A>
<LI><A class=designergreen title="C and C California" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72401/c-c-california">C and C California</A>
<LI><A class=designerred title=Cacharel href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72400/cacharel">Cacharel</A>
<LI><A class=designergreen title=Danielademarchi href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/76653/Danielademarchi">Danielademarchi</A>
<LI><A class=designerred title="Day Birger et Mikkelsen" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72399/day-birger-et-mikkelsen">Day Birger et Mikkelsen</A>
<LI><A class=designergreen title="Earnest Sewn" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72396/earnest-sewn">Earnest Sewn</A>
<LI><A class=designerred title="Ella Moss" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72397/ella-moss">Ella Moss</A>
<LI><A class=designergreen title=Frostfrench href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72395/frost-french">Frostfrench</A>
<LI><A class=designerred title="Gharani Strok" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72394/gharani-strok">Gharani Strok</A>
<LI><A class=designergreen title="Heart Made" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73197/heart-made">Heart Made</A>
<LI><A class=designerred title="J Brand" href="/mall/departmentpage.cfm/MyWardrobe/77961/jbrand">J Brand</A>
<LI><A class=designergreen title="J & M Davidson" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72392/j-m-davidson">J and M Davidson</A>
<LI><A class=designerred title="La Petite Salope" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72390/la-petite-salope">La Petite Salope</A>
<LI><A class=designergreen title="Little Gem" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72389/little-gem">Little Gem</A>
<LI><A class=designerred title="Love From Australia" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/78063/LoveFromAustralia">Love From Australia</A>
<LI><A class=designergreen title=Mawi href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72388/Mawi">Mawi</A>
<LI><A class=designerred title="Missoni Accessories" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73201/missoniaccessories">Missoni Accessories</A>
<LI><A class=designergreen title="Nicola Finetti" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73202/nicola-finetti">Nicola Finetti</A>
<LI><A class=designerred title="Paul and Joe" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72387/paul-and-joe">Paul and Joe</A>
<LI><A class=designergreen title="Radcliffe Denim" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/77074/radcliffe-denim">Radcliffe Denim</A>
<LI><A class=designerred title="Rogan NYC" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72386/rogan-nyc">Rogan NYC</A>
<LI><A class=designergreen title="Sabatini White" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73203/sabatini-white">Sabatini White</A>
<LI><A class=designerred title="Sara Berman" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72385/sara-berman">Sara Berman</A>
<LI><A class=designergreen title="Sass and Bide" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73204/sass-and-bide">Sass and Bide</A>
<LI><A class=designerred title="Scorah Pattullo" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73205/scorah-pattullo">Scorah Pattullo</A>
<LI><A class=designergreen title="See by Chloe" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72384/see-by-chloe">See by Chloe</A>
<LI><A class=designerred title="Sitting Pretty" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72265/sitting-pretty">Sitting Pretty</A>
<LI><A class=designergreen title=Splendid href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72264/splendid">Splendid</A>
<LI><A class=designerred title="Seven For All Mankind" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73213/seven-for-all-mankind">Seven For All Mankind</A>
<LI><A class=designergreen title=Tocca href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73209/tocca">Tocca</A>
<LI><A class=designerred title="True Religion" href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/78910/true-religion">True Religion</A>
<LI><A class=designergreen title=Tsubi href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/72263/tsubi">Tsubi</A>
<LI><A class=designerred title=Wolfwhistle href="http://www.my-wardrobe.com/mall/departmentpage.cfm/MyWardrobe/73210/wolf-whistle/">Wolfwhistle</A> </LI></UL></DIV></DIV>
<DIV id=signupleft>
<DIV class=leftdivider><IMG height=3 alt="" src="http://www.my-wardrobe.com/mall/MyWardrobe/images/layout/nav/border-divider.gif" width=161></DIV>
</DIV>
<DIV id=footer>
<TABLE width="100%">
<TBODY>
<TR>
<TD id=leftfooter>© Copyright My–Wardrobe 2006</TD>
<TD id=middlefooter><A class=footerlink title="Unsubscribe here" href=mailto:unsubscribe@my-wardrobe.com subject: click send to unsubscribe>Unsubscribe here</A> : <A class=footerlink title="Terms and Conditions" href="http://www.my-wardrobe.com/mall/infopageviewer.cfm/MyWardrobe/TermsandConditions">Terms and Conditions</A> : <A class=footerlink title=Sitemap href="http://www.my-wardrobe.com/mall/MyWardrobe/sitemap.htm">Sitemap</A></TD>
<TD id=rightfooter><A class=footerlink title="Go To Shopcreator" href="http://www.shopcreator.com">Powered By Shopcreator</A></TD></TR></TBODY></TABLE></DIV></DIV><!-- Post processed content end {ts '2006-05-04 10:21:14'} --><!-- SRV:ecom1 //--><!-- CacheHit:Y //--><!-- CDB:46 //--><!-- ACC:47 //--><!-- CLK:47 //--><!-- SGT:140 //--><!-- ProductsIncluded: //--></BODY></HTML>
0
Comment
Question by:sa_designer
  • 11
  • 11
  • 3
  • +1
26 Comments
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16681150
Your e-mail client is probably responsible for this when you do an "inline" forward.
Try "forward as attachment" (Thunderbird supports that menu "Message->Forward as->Attachment")
Also try a forward in a webmail client...
0
 

Author Comment

by:sa_designer
ID: 16681304
I think the problem is that my company are sending this html email to their customers and they want their customers to be able to forward it on to their friends and so forth. My boss has seen other examples of html emails do this and therefore he wonts ours to do the same. He is using Out Look Express to generate the html email and to send them out. Now I have noticed that our competition use tables to build there html emails and not all in css so this could be the problem maybe. Any advise would be great as no one sames to know the answer.
0
 
LVL 20

Expert Comment

by:REA_ANDREW
ID: 16681344
I agree with you. I think the problem will lie in the way the email client recognises CSS positioning.  Have you thought about using a custom made email program?  An online version, this is so you can test the output.  Here wait there for 5 mins and I will make a quick email application where you can paste your current HTML and style into and test the output.

5 mins
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:sa_designer
ID: 16681358
Thanks Rea
0
 
LVL 20

Expert Comment

by:REA_ANDREW
ID: 16681482
http://www.nwonline.co.uk/lab/

try that. Might take a minute for the email to come through as the server is very busy.
0
 
LVL 20

Expert Comment

by:REA_ANDREW
ID: 16681534
lol,

sa_designer

Your code does work, I finally got the email through I posted myself with my little email app.  FYI, very nice design I must say!!!

All your page came through on the email, and was set out perfectly.

but anyway, there is were your problem lies, Outlook must compile the CSS differently. But any ways, it does work with a custom email script.

Have you considered going down this route before.  If you make your own, it really will perform inline with your company's requirements.

Andrew
0
 

Author Comment

by:sa_designer
ID: 16681622
Not sure whether I've made myself very clear. By boss can send it out fine its when you recieve it and forward it onto someone else this is when the format goes wrong. I sent a test through as well and then I was going to forward it to my gmail account to see what happened. Sorry if I've been unclear but its the forwarding part thats going wrong. I don't have Out Look Express I work on Mac with a program called First Class which doesn't deal with html emails! So being able to just generate it has been great! Many thanks! Not sure whether I can make my own! lol but I could be encouraged to buy a piece of software. My boss is based in France and I'm in the UK.
0
 
LVL 20

Expert Comment

by:REA_ANDREW
ID: 16681645
sa_designer , np

ok well I emailed myself your design and received it no problem.

I then forwarded it to myself and again, it kept its structure.

The only addition it will make a the top, after forwarding is that speal about Original Message

i.e.

-----Original Message-----
From: Andrew Rea
Sent: 15 May 2006 12:28
To: Andrew Rea
Subject: Table Layout Test

Then your original email is here after forwarding, with its structure and evrything just the smae. All intact.
0
 

Author Comment

by:sa_designer
ID: 16681709
Not the case for me I received your email from your email program fine all intact BUT then when I forward it to my gmail account it loses the css and therefore is unformated. Its strange it works for u! You could send me the html eamil and I could forward it to you and maybe then you would see the same thing? Or if you have another account yourself you could try forwarding it to? I'll try doing the email program to my gmail account to see if gmail is the problem? My yahoo account is sa_designer@yahoo.co.uk.
0
 
LVL 20

Expert Comment

by:REA_ANDREW
ID: 16681735
Does Gmail Accept HTML Emails?
0
 

Author Comment

by:sa_designer
ID: 16681767
Not sure but my boss has Gmail so maybe this could of been the problem all along! Gmail. So if your not using Gmail you believe this html email works fine? If so then its not all bad I suppose.
0
 
LVL 20

Expert Comment

by:REA_ANDREW
ID: 16681801
ok to confirm, when you receive this in Gmail and you say the CSS is not applied, I would imagine you can see all of the HTML code, or Do you just see the text of the site?

I would imagine if it is not rendering the CSS, all you see is the HTML Code. I will be confused if you see the text, without the HTML code because that means that GMAIL parses the HTML Structure and extracts the content.
0
 

Author Comment

by:sa_designer
ID: 16681855
Correct you see the html so basically you see the page but with the CSS turned off. So Gmail is removing the css. I haven't yet got the email from your email program so yet to see whether its the forwarding or the orginally html email that has the problem. I have read somewhere that Gmail doesn't like CSS so maybe its true and thats why people use tables!
0
 
LVL 20

Expert Comment

by:REA_ANDREW
ID: 16681875
"Correct you see the html "

no no, what this means is that GMAIL does not accept HTML emails. It will render it as text. so the content would be the code and not the code rendered.

Sorry about the email not coming through yet, the server is on its belly cause of the traffic going through lol. I will come though, probably of no help when it does. haha.

I have googled this and found some Key Points

http://www.campaignmonitor.com/blog/archives/2005/11/html_email_desi.html

http://blogs.feedburner.com/mt/mt-comments.cgi?entry_id=1761
0
 

Author Comment

by:sa_designer
ID: 16681942
I believe it does see the html ie text, but it removes css. When I forwarded other peoples html emails they lose their images? Is it just gmail or are there email clients which are the same?

0
 

Author Comment

by:sa_designer
ID: 16682006
http://www.campaignmonitor.com/blog/archives/2005/11/html_email_desi.html

in this link they don't even discuss html vers CSS only at the bottom so it may not be a CSS problem.
0
 
LVL 20

Expert Comment

by:REA_ANDREW
ID: 16682027
Hotmail allows it I know that because I use it lol, and I think Yahoo mail is ok too.  Gmail though TUT, be a dream to have one standard when designing haha
0
 

Author Comment

by:sa_designer
ID: 16682108
Before I close this topic can you advise me on any html email software I can get as I'm not a programmer so I can't build one myself! Many thanks for your help :)
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16682910
All webmail should beware of CSS because it can be used as a tracking system.
Lots of webmail simply disable all CSS, i guess because they don't want to bother filtering the mail for dangerous parts.
Most webmail also disable external images for the same reason.
0
 
LVL 20

Expert Comment

by:REA_ANDREW
ID: 16682984
Sorry for the long reply, at work.......

couple of things


1. What are your requirements for the Custom Email Sender
2. What is your budget?

Andrew
0
 

Author Comment

by:sa_designer
ID: 16683788
umm its for mac and I don't wont to pay over £50?
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16684728
Why don't you use Mozilla Thunderbird or Netscape?  It's free.
http://email.about.com/cs/mozillatips/qt/et112202.htm
0
 
LVL 15

Expert Comment

by:Eric AKA Netminder
ID: 16687738
Just a note: most of the web-based email systems monkey around with style sheets; the EE newsletter gets screwed up with almost every one of them, and I have insider info to the extent that I know it's run through CSS compliance software before it's sent out.

I did as REA_ANDREW did; I copied your code to OE and sent myself the email, and it rendered very nicely. I then forwarded it, and it was just as nice. So the issue is with the various email clients. Since there's significant differences in the way that browsers render CSS "standards", it's not unreasonable that there would be problems with email cllients as well -- and the web-based ones will just drive you to drink.

Personally, I would go for the lowest common denominators -- OE and Thunderbird -- and I wouldn't worry too much about the web-based programs.

To see the difference:
https://filedb.experts-exchange.com/incoming/ee-stuff/92-21850429A.gif - Using OE
https://filedb.experts-exchange.com/incoming/ee-stuff/93-21850429B.gif - Using GMail
0
 

Author Comment

by:sa_designer
ID: 16689231
Hi Ericpete,

Thanks for the attachments. With the google one its sames to be striped of css. Therefore would you build html emails using tables only and css for text?
0
 
LVL 20

Accepted Solution

by:
REA_ANDREW earned 500 total points
ID: 16689274
From looking at the output, then yes I would use tables for the layout and also CSS for the text.  I only avoid table layouts in browsers due to the fact that XHTML is going that way and also aids Search Engine Rankings.  Since this is used for emailing clients, thus no search engine crawling, I can not see a detrimental effect to using table layouts for the structure.

Also it may be the fact that due to GMail width in the GUI, where it displays the email, the width might be to narrow to display all of your page elements correctly, As I can see that CSS is being applied.

So yes I would use Tables

Andrew

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses
Course of the Month14 days, 16 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question