Outlook 2003 disregards my CSS inline padding properties, How may I sovle this? Options

[bdotma]

Hi,

Once, again, I must disclose I'm a beginner in the HTML/CSS scene. I did a google search, but nothing seems to address this issue.

I'm sending HTML emails via Microsoft Outlook/Word 2003. Yes it's 2011, but I'm limited to Outlook 2003.

When ever I open Microsoft Script Editor in Word 2003(yes, I'am aware this is outdated too), I place my HTML with CSS Inline style tags in the script editor. MSWord displays the CSS Inline tags correctly. Then I send the HTML email via MSWord.

However, after receiving the HTML email in Outlook 2003, certain CSS Inline style tags are not displayed properly. I use CSS Inline style tags for the padding properties, but the padding does not show up.

Also, CSS Inline style tags for links do not show up either. The link is not padded and shows up blue, and not the designated color. What can I do? Here are snippets of codes.

*I have CSS Internal Sheets for other purposes; and the span tags work. ....but inline padding does not.

CODE

p.quoteline
    {
    margin:0in;
    margin-bottom:.0001pt;
    color:black;
    font-family:"Calibri";
    text-align:left;
    font-size:12.5pt;
    font-weight:bold;
    padding-left:20px;
    }

p.html
    {
    margin:0in;
    margin-bottom:.0001pt;
    color:black;
    font-family:'Calibri';
    font-size:12.0pt;
    text-decoration:underline;
    font-weight:bold;
    text-align:left;
    padding-left:40px;
    }

CODE

<br/><p class='quoteline' style='margin:0in; margin-bottom:.0001pt;color:black;font-family:'Calibri';font-size:12.5pt;font-weight:bold;text-align:left;padding-left:20px;'  ><span class='fontblue'>ABC </span> --- <span='coname'>ABC</span> 123( <span class='fontgreen'>0.59%</span> )]</p>

<br/><p class='html' style='color:black;padding-left:40px;' ><a  href="http://www.yahoo.com" target="_blank">►Yahoo</a></p>

Thanks for reading.

[Barthal]

Hi,

Once, again, I must disclose I'm a beginner in the HTML/CSS scene. I did a google search, but nothing seems to address this issue.

I'm sending HTML emails via Microsoft Outlook/Word 2003. Yes it's 2011, but I'm limited to Outlook 2003.

When ever I open Microsoft Script Editor in Word 2003(yes, I'am aware this is outdated too), I place my HTML with CSS Inline style tags in the script editor. MSWord displays the CSS Inline tags correctly. Then I send the HTML email via MSWord.

However, after receiving the HTML email in Outlook 2003, certain CSS Inline style tags are not displayed properly. I use CSS Inline style tags for the padding properties, but the padding does not show up.

Also, CSS Inline style tags for links do not show up either. The link is not padded and shows up blue, and not the designated color. What can I do? Here are snippets of codes.

*I have CSS Internal Sheets for other purposes; and the span tags work. ....but inline padding does not.

CODE

p.quoteline
    {
    margin:0in;
    margin-bottom:.0001pt;
    color:black;
    font-family:"Calibri";
    text-align:left;
    font-size:12.5pt;
    font-weight:bold;
    padding-left:20px;
    }

p.html
    {
    margin:0in;
    margin-bottom:.0001pt;
    color:black;
    font-family:'Calibri';
    font-size:12.0pt;
    text-decoration:underline;
    font-weight:bold;
    text-align:left;
    padding-left:40px;
    }

CODE

<br/><p class='quoteline' style='margin:0in; margin-bottom:.0001pt;color:black;font-family:'Calibri';font-size:12.5pt;font-weight:bold;text-align:left;padding-left:20px;'  ><span class='fontblue'>ABC </span> --- <span='coname'>ABC</span> 123( <span class='fontgreen'>0.59%</span> )]</p>

<br/><p class='html' style='color:black;padding-left:40px;' ><a  href="http://www.yahoo.com" target="_blank">►Yahoo</a></p>

Thanks for reading.

E-mail clients don't work well with padding and margins.
You have to create the space by working with tables (yes, I know ...)

CODE

<table cellpadding="0" cellspacing="0">
<tr>
   <td width="20"><img src="imagethats20width" border="0"></td>
   <td><a href="http://www.yahoo.com" target="_blank">►Yahoo</a></td>
</tr>
</table>

This post has been edited by Barthal: Jan 28 2011, 06:22 AM

[bdotma]

Thanks for all the views. I've found a dirty work-around for Microsoft email client related HTML emails.
It's 2011, but I'm limited to MS Outlook 2003 and MS Word 2003.

FWIW, I'll list my steps and how I stumbled upon the solution.

1)I compose an email with basic HTML/CSS with a simple word processor such as notepad.

2)To preview the email, I used Internet Explorer v.8+. HTML/CSS displayed properly.

3)Next, to send the email, I used Internet Explorer's "File>Send>Page By Email". And because Microsoft Outlook is my designated email client, the HTML/CSS will show up in a new Outlook message.

*This is where the HTML/CSS will not display properly.*

4)Therefore, I decided to look up HTML/CSS rendering for MS. I discovered that you could compose HTML/CSS in Microsoft Word 2003's Source Editor. When you first look at it, the editor will be prefilled with Microsoft HTML with many XML formatting information. The special thing about the editor is that if you save the .HTM file as unfiltered, the XML will be saved. However, if you saved it as filtered, the XML will not be there.

5)Since my HTML/CSS did not display properly, although written correctly, I hypothesized that my HTML/CSS needed Microsoft specific XML formatting. How do I incorporate Microsoft XML formatting into my HTML/CSS?

6)Solution: Using the original HTML/CSS, I simply copied and pasted the code into an unfiltered .HTM file in Microsoft Word 2003's Script Editor, and then I refreshed (this is a Microsoft function fyi) and saved the file.

7)Close and reopen the word document, open Script Editor, and my original HTML/CSS is automatically cluttered with Microsoft XML. The XML tags preserve your desired features and help Outlook to display HTML/CSS correctly!!!

8)Since Microsoft Word 2003's Script Editor is deprecated, I did not want to write HTML/CSS in Word, but given that I need Microsoft XML in my HTML/CSS, I copied and pasted the XML-beefed up HTML/CSS into notedpad. If repeated steps 1-3, everything turns out fine.

Background: I'm working on a project that requires me to send out daily HTML emails within my company. Since this project involves VBScript and an underlying HTML/CSS template, and given that I may transfer the project to a computer with more recent software, I do not want to use outdated tools. This work around is quick and simple if you're limited to Microsoft 2003 products.

I hope this helps, even though it may not be the most elegant solution. Thank you for reading.

Also, just another fyi that I came upon:
Webpages display fine with CSS Internal Style Sheets.
Microsoft Outlook 2003 also needs CSS Inline Style to display properly. (Yes, you basically have the same HTML repeated in two different formats.)

This post has been edited by bdotma: Feb 7 2011, 09:38 AM

[Barthal]

You can test your email here:
http://www.emailonacid.com/

You can make a free account, copy+paste the code and check outlook 2003 and gmail. if it works fine in gmail, it's gonna work almost everywhere.