Solved

Coldfusion - using CSS in CFMAIL - specifically float:left

Posted on 2014-01-15
3
739 Views
Last Modified: 2014-01-20
Coldfusion 9
MS Outlook 2007

I know that using CSS within Cfmail tags work best if used inline as opposed to a linked style sheet, therefore I have all my CSS inline.  I have tried both:

- type = "html" - in the cfmail tag
- <cfmailpart type="html">
- within 'body' and without these tags <html><head></head><body></body></html>

On my smart phone, all formatting seems to look fine.  When I open the email on Outlook 2007 it all looks good, except 'float:left' seems to be ignored.  

EXAMPLE:
<div style="color:##CC0000;float:left;">Company Name</div>
<div style="float:left;">#CompanyName#</div>
<div style="clear:left;"> </div>

DISPLAYS AS (In Outlook):
Company Name: (in red)
ABC Company

INSTEAD OF (My Blackberry):
Company Name: (in red) ABC Company

Am I missing something, or do I need to use a <table> in the Cfmail.

6Gun
0
Comment
Question by:MaxwellTurner
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39784129
When it comes to email forget what you've been told about how bad tables are and use them and pretend div/span etc don't exist. Kinda IE1 web development (especially for Outlook which still uses Word for rendering)

https://litmus.com/blog/why-do-email-clients-render-emails-differently?utm_campaign=industry&utm_source=litmusblog&utm_medium=blog
0
 
LVL 15

Expert Comment

by:Gurpreet Singh Randhawa
ID: 39784976
please use tables for your emails, you will get whatever results you need, you can even specify a condition to detect if the email client is going to be outlook, use the tables else DIV

so my opinion use tables
0
 
LVL 1

Author Closing Comment

by:MaxwellTurner
ID: 39795102
Grrrrrr .... lol thanks for confirming this.  Guess I am re-designing the email.

Max
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Change navigation font color on mobile sizes 8 35
Setting Up a Responsive Form 24 42
Flexbox in CSS3 2 27
modify h2 4 20
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now