HTML Email Issue

Printable View

Oct 19th, 2009, 02:33 PM
hmtech

HTML Email Issue

Hi,

I am trying to send an HTML email. The HTML uses unordered lists. When I view the html in the browser, the list appear horizontal, but when i embed the HTML in an email, the lists elements are displayed vertically. Does anyone know what could be causing this. Here is the HTML I am using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
OptimalBlue
</title>

<style type="text/css">
ul{
margin: 0 auto;
}
ul.horizontal_list li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 10px;
margin: 5px;
border: 1px solid #CCC;

}
ul.formBlock1THead{ background-color:#eeeeee; height:16px; margin:0; cursor:pointer;list-style:none; text-align: center; padding:0; }
ul.formBlock1THead li{font:11px Tahoma, Verdana, Arial, serif; color:#343434; float:left; width:56px;overflow:hidden; display:inline;}

ul.formBlock1TLine{ background: none; height:13px; margin:0 1px; cursor:pointer;list-style:none; text-align: center; padding:0;}
ul.formBlock1TLine li{font:11px Tahoma, Verdana, Arial, serif; color:#666666; float:left; width:54px; overflow:hidden; text-align:right;}
ul.formBlock1TLine li.float3{width:40px; padding-right:14px; text-align:right;}
ul.formBlock1TLine li.int0{width:34px; padding-right:20px; text-align:right;}
ul.formBlock1TLine li.currency2{width:52px; padding-right:2px; text-align:right;}
ul.formBlock1TLine li.pointer{ float:left; width:2px; height:13px; padding-right:0px;}

</style>

</head>

<body>
<form name="form1" method="post" action="TeaserTest.aspx" id="form1">

<ul class="formBlock1THead">
<li>Rate</li>
<li>Points</li>
<li>APR</li>
</ul>

<ul class="formBlock1TLine">
<li class="float3">6.342</li>
<li class="pointer" />
<li class="int0">87</li>
<li class="pointer" />
<li class="float3">7.934</li>
</ul>

</form>
</body>
</html>

Any help will be appreciated.

Thanks
Oct 20th, 2009, 02:21 AM
gep13

Re: HTML Email Issue

Hey,

Can you show a screen shot of what you are seeing in the email client?

Can you also show the code that you are using to send the email?

A number of things are turned off by default in most email clients, given the type of problems that can be caused by imbedded code in html emails.

Gary
Oct 20th, 2009, 09:51 AM
hmtech

Re: HTML Email Issue

This is how I am getting the HTML of the webpage:
Dim mht As New Chilkat.Mht()
mht.UnlockComponent("MhtUnlockCode")
Dim email As Chilkat.Email
email = mht.GetEmail("http://localhost/Test.htm")

This is how I am sending the email:

Mailer = New Chilkat.MailMan
Mailer.UnlockComponent("XYZ")
Mailer.SmtpHost = ds.Tables(0).Rows(i).Item("Address").ToString

eMail = New Chilkat.Email
eMail.SetHtmlBody(emailText)
Mailer.SendEmail(eMail)

I am trying to attach a screen shot but the dialog box to add the attachment is not loading. I will keep trying

Thanks
Oct 20th, 2009, 10:32 AM
gep13

Re: HTML Email Issue

Hey,

What is Chilkat? Is that a 3rd Party library that you are using?

Gary
Oct 20th, 2009, 10:34 AM
rjv_rnjn

Re: HTML Email Issue

Off topic: use code tags as it makes it easier for others to read your code. Click the Code button on toolbar or put your code in [ code ] tags {without spaces between [ and code}. Your post with proper tags look like:

Quote:

Originally Posted by hmtech

This is how I am getting the HTML of the webpage:

Code:

Dim mht As New Chilkat.Mht() mht.UnlockComponent("MhtUnlockCode") Dim email As Chilkat.Email email = mht.GetEmail("http://localhost/Test.htm")

This is how I am sending the email:

Code:

Mailer = New Chilkat.MailMan Mailer.UnlockComponent("XYZ") Mailer.SmtpHost = ds.Tables(0).Rows(i).Item("Address").ToString eMail = New Chilkat.Email eMail.SetHtmlBody(emailText) Mailer.SendEmail(eMail)

I am trying to attach a screen shot but the dialog box to add the attachment is not loading. I will keep trying

Thanks
Oct 20th, 2009, 10:39 AM
hmtech

Re: HTML Email Issue

@Gary - Yes
Oct 20th, 2009, 10:44 AM
hmtech

2 Attachment(s)

Re: HTML Email Issue

I have uploaded the images.

The first one is what it looks like in the email, the second is what it looks like in the browser.

Thanks
Oct 20th, 2009, 11:03 AM
gep13

Re: HTML Email Issue

Hey,

So, just to verify one thing, can you take off all the CSS that is being applied in the browser? Does it look the same as in the email?

Gary
Oct 20th, 2009, 11:19 AM
hmtech

Re: HTML Email Issue

If I remove all the styles, it does not look similar to the email. The email does take into effect some of the styles, only the listing of the list does not take into effect.

When I remove all the styles, the list is displayed vertically, and left aligned. But in the email, the list is displayed vertically, but the header row is alligned in the center and the next row is alligned to the right
Oct 20th, 2009, 02:50 PM
gep13

Re: HTML Email Issue

Hey,

I am really not sure how much more I can say on this.

I have never used the 3rd party library that you are using, I have only ever used the built in classes in .Net.

One thing that I would suggest would be to try sending it to different people with different email clients. That will let you isolate if it is a problem on the sending or the receiving end.

Gary
Oct 22nd, 2009, 06:38 AM
dnanetwork

Re: HTML Email Issue

i dont' like chilkat...
Oct 22nd, 2009, 07:38 AM
brin351

Re: HTML Email Issue

CSS is not good for layout or positioning elements in emails I still use tables to fix a layout in emails sad as it may sound. Id also remove that form tag and other browser specific tags. css for colour, font and basic stuff is ok. The golden rule is email clients love to distroy your html. You can "view source" of emails and it's amazing how much can be changed, try it for that html in outlook express - you will hardly recognise it.
Oct 22nd, 2009, 08:49 AM
hmtech

Re: HTML Email Issue

Thank you all for your replies.

But this is what I found:

Email clients change a lot of your html.
I tried using inline styles, but that did not help much. Finally I realised that using div for HTML in emails is a bad idea.

I changed my HMTL to use table tags and added inline stlyes, that worked well for me.
Some good reference sites are:
http://sxates.com/design/tips-and-be...ook-2007-2010/
http://css-tricks.com/using-css-in-h...he-real-story/
Oct 22nd, 2009, 08:50 AM
gep13

Re: HTML Email Issue

Hey,

Glad to hear that you got it working!! Remember to mark your thread as resolved.

Gary