Solved

Coldfusion - using CSS in CFMAIL - specifically float:left

Posted on 2014-01-15
3
765 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 16

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Autoprefixer and text editors 1 31
trying to resize an Image, using CFimage tag. 8 27
Help to align the buttons in a row 2 26
dashicon not showing on one website 13 18
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

785 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