Hotmail render bad XHTML from [Chrome, firefox, safari, opera, etc] via SMTP email

This is a bug I found in Hotmail render a newsletter build it from my application. I know that maybe the title can be a little misunderstand... but here is what I did. My application build a part of a xhtml document with javascript in the browser, so I have a template did it by hand with just xhtml and css inline... so you can modify some text with a input and whit the innerHTML method of javascript you update the content... so finally when you are happy with you newsletter simply click the button send and behind scenes I copy a div named for example and I copy to a textarea, while in the server side I received pure xhtml in that textarea and attach in the email body of smtp method ... I'm developing in c#...

I don't know if someone of you have copy a content with innerHTML method in a textarea you can see that the browser rewrite what you did in Capitalize letter and add some style. So, the problem began if I create this newsletter using firefox, chrome etc... when I send it to all my list the background COLORS no images of the div's appear to be remove it in the hotmail application content, so do not display background color... while in the other hand if I send the newsletter using IExplorer the xhtml create work perfectly in all major browsers.. so I not really a problem because is a internal tool And I chose what browser can I use. But does any really really geek of XHTML know why this can happend???

Firefox create:

<div style="width: 640px; margin-left: auto; margin-right: auto; font-family: Trebuchet MS;">    <!-- header -->    <div style="width: 640px; height: 27px; background: none repeat scroll 0% 0% rgb(153, 204, 0); text-align: center; color: rgb(255, 255, 255); line-height: 2.1; font-size: 12px;">¡! <span style="font-size: 20px; line-height: 1;">;)</span> <span id="TituloEmail">Invita Exposición Pictórica</span> -  <a href="#%7BurlVersionOnline%7D" style="font-weight: 800; color: rgb(255, 255, 255);">¿Problemas para ver el email?</a>.</div>    <!-- subHeader -->    <div style="width: 640px; height: 62px; background: none repeat scroll 0% 0% rgb(51, 51, 51); text-align: center; color: rgb(255, 255, 255); line-height: 2.1; font-size: 12px;">        <div style="float: left; text-align: left; font-family: Georgia; line-height: 4.9; text-indent: 10px; width: 110px; color: rgb(255, 255, 255);" id="lbl_fecha">07/Sep/2010</div>        <div style="float: left; text-align: left; font-size: 23px; font-family: Palatino Linotype; font-style: italic; line-height: 2.3; color: rgb(255, 255, 255); width: 530px;" id="lbl_titulo"></div>    </div>    <div style="width: 638px; border: 1px solid rgb(204, 204, 204); background: none repeat scroll 0% 0% rgb(255, 255, 255); font-size: 11px; font-family: Trebuchet MS; line-height: 1.8;">        <div style="width: 100%;">            <div id="ibp_img_container"></div>            <div id="ibp_txt_container" style="padding: 10px;"></div>        </div>        <div class="clearBoth"></div>    </div>    <div style="width: 630px; padding: 5px; height: 60px; background: none repeat scroll 0% 0% rgb(51, 51, 51); text-align: center; color: rgb(255, 255, 255); line-height: 2.1; font-size: 12px;">        <div style="float: left; text-align: left; font: 10px/1.4 Arial; text-indent: 10px; width: 415px; color: rgb(255, 255, 255);">            <div style="font-size: 10px; color: rgb(255, 255, 255); line-height: 1.2;">(+52) 951-5152088 | (+52) 951-1324344 | (+52) 951-5135766</div>            <div style="color: rgb(255, 255, 255);"><a href="" style="color: rgb(255, 255, 255); font-size: 11px;" target="_blank"></a> || <a href="http://ibp.mx" style="color: rgb(255, 255, 255); font-size: 11px;" target="_blank">ibp.mx</a></div>            <div>                <a href=""><img src="" alt="" style="border: 0px none; width: 24px; height: 24px;" title="Go "></a>                 <a href=""><img src="" alt="" style="border: 0px none; width: 24px; height: 24px;" title=""></a>                <a href=""><img src="" alt="" style="border: 0px none; width: 24px; height: 24px;" title="Go flickr.com/"></a>                                                                            </div>        </div>        <div style="float: left; text-align: right; width: 215px; line-height: 1.8;">            <div><a href="http://" style="color: rgb(0, 255, 255); font-size: 11px; text-decoration: none;">¿ Quieres preguntarnos algo?</a></div>            <div><a href="http://" style="color: rgb(255, 255, 255); font-size: 10px; line-height: 1.7; text-decoration: none;">No recibir más estos correos</a></div>        </div>    </div>    </div>

IE create:

<DIV style="WIDTH: 640px; FONT-FAMILY: Trebuchet MS; MARGIN-LEFT: auto; MARGIN-RIGHT: auto">
<DIV style="TEXT-ALIGN: center; LINE-HEIGHT: 2.1; WIDTH: 640px; BACKGROUND: #99cc00; HEIGHT: 27px; COLOR: #ffffff; FONT-SIZE: 12px">¡! <SPAN style="LINE-HEIGHT: 1; FONT-SIZE: 20px">;)</SPAN> <SPAN id=TituloEmail>Have a drink... with me</SPAN>- <A style="COLOR: #ffffff; FONT-WEIGHT: 800" href="#{urlVersionOnline}">¿Problemas para ver el email?</A>.</DIV><!-- subHeader -->
<DIV style="TEXT-ALIGN: center; LINE-HEIGHT: 2.1; WIDTH: 640px; BACKGROUND: #333333; HEIGHT: 62px; COLOR: #ffffff; FONT-SIZE: 12px">
<DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 4.9; TEXT-INDENT: 10px; WIDTH: 110px; FONT-FAMILY: Georgia; FLOAT: left; COLOR: #ffffff" id=lbl_fecha>07/Sep/2010</DIV>
<DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 2.3; FONT-STYLE: italic; WIDTH: 530px; FONT-FAMILY: Palatino Linotype; FLOAT: left; COLOR: #ffffff; FONT-SIZE: 23px" id=lbl_titulo>Have a drink... with me</DIV></DIV>
<DIV style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; LINE-HEIGHT: 1.8; WIDTH: 638px; FONT-FAMILY: Trebuchet MS; BACKGROUND: #ffffff; FONT-SIZE: 11px; BORDER-TOP: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid">
<DIV style="WIDTH: 100%">
<DIV id=ibp_img_container><IMG style="WIDTH: 640px" src=""></DIV>
<DIV style="PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px" id=ibp_txt_container>&nbsp;</DIV></DIV>
<DIV class=clearBoth></DIV></DIV>
<DIV style="TEXT-ALIGN: center; PADDING-BOTTOM: 5px; LINE-HEIGHT: 2.1; PADDING-LEFT: 5px; WIDTH: 630px; PADDING-RIGHT: 5px; BACKGROUND: #333333; HEIGHT: 60px; COLOR: #ffffff; FONT-SIZE: 12px; PADDING-TOP: 5px">
<DIV style="TEXT-ALIGN: left; TEXT-INDENT: 10px; WIDTH: 415px; FONT: 10px/1.4 Arial; FLOAT: left; COLOR: #ffffff">
<DIV style="LINE-HEIGHT: 1.2; COLOR: #ffffff; FONT-SIZE: 10px">(+52) 951-5152088 | (+52) 951-1324344 | (+52) 951-5135766</DIV>
<DIV style="COLOR: #ffffff"><A style="COLOR: #ffffff; FONT-SIZE: 11px" href="http://" target=_blank></A> || <A style="COLOR: #ffffff; FONT-SIZE: 11px" href="http://ibp.mx" target=_blank>ibp.mx</A></DIV>
<DIV><A href=""><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDTH: 24px; HEIGHT: 24px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="Go facebook.com" alt= src=""></A> <A href="http://twitter.com/"&gt;&lt;IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDTH: 24px; HEIGHT: 24px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="Go twitter.com/" alt=twitter.com/ src=""></A> <A href="http://flickr.com/"&gt;&lt;IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDTH: 24px; HEIGHT: 24px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="Go flickr.com/" alt=flickr.com/src=""></A> </DIV></DIV>
<DIV style="TEXT-ALIGN: right; LINE-HEIGHT: 1.8; WIDTH: 215px; FLOAT: left">
<DIV><A style="COLOR: #00ffff; FONT-SIZE: 11px; TEXT-DECORATION: none" href="">¿ Quieres preguntarnos algo?</A></DIV>
<DIV><A style="LINE-HEIGHT: 1.7; COLOR: #ffffff; FONT-SIZE: 10px; TEXT-DECORATION: none" href="">No recibir más estos correos</A></DIV></DIV></DIV></DIV>

ansaurus

tags:

views:

answers:

Hotmail render bad XHTML from [Chrome, firefox, safari, opera, etc] via SMTP email

related questions