Jump to content

Outlook 2003 disregards my CSS inline padding properties

Recommended Posts

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.

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

<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.

Link to post
Share on other sites

There's no email client that will display modern HTML and CSS properly (except web-based ones, since they use the browser's rendering engine). Padding, margins, floats and background images on divs (or tables) are just some of the things that Outlook can't render.You're going to have to get in your time machine, go back to the nineties, and use tables. Sorry.

Edited by Charamei
Link to post
Share on other sites

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.)

Edited by bdotma
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...