HTML Email Issue

**hmtech** · Oct 19th, 2009, 02:33 PM

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

ointer;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

ointer;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

**gep13** · Oct 20th, 2009, 02:21 AM

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

**hmtech** · Oct 20th, 2009, 09:51 AM

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

**gep13** · Oct 20th, 2009, 10:32 AM

Hey,

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

Gary

**rjv_rnjn** · Oct 20th, 2009, 10:34 AM

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:

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

**hmtech** · Oct 20th, 2009, 10:39 AM

@Gary - Yes

**hmtech** · Oct 20th, 2009, 10:44 AM

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

**gep13** · Oct 20th, 2009, 11:03 AM

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

**hmtech** · Oct 20th, 2009, 11:19 AM

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

**gep13** · Oct 20th, 2009, 02:50 PM

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

**dnanetwork** · Oct 22nd, 2009, 06:38 AM

i dont' like chilkat...

**brin351** · Oct 22nd, 2009, 07:38 AM

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.

**hmtech** · Oct 22nd, 2009, 08:49 AM

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/

**gep13** · Oct 22nd, 2009, 08:50 AM

Hey,

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

Gary

Thread: HTML Email Issue

Thread Tools

Display

HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Re: HTML Email Issue

Posting Permissions