Wed, 2006-01-18 08:01
I am in the process of making a XHTML email for a customer.
I originally had the style in the head element until i looked at it in Gmail and it doesn't use the styles.
So i have transferred most of the styles to inline (never ever used inline styles before!)
The two problems i'm having are
setting a fixed width for the BODY so the background colour of the HTML shows behind it
and
Floating three elements next to each other.
PLEASE don't tell me i have to use tables - i have never used them before and don't want to start now -DON'T MAKE ME DO IT PLEASE!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/html1-strict.dtd"> <html lang="en" style="font-size:76%"> <head> <title>Untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="webechodesigns.com" /> </head> <body font style="font-family: 'Trebuchet MS', Arial,Helvetica,sans-serif;" bgcolor="#fff" width="740px" margin=" auto" padding="10px" /> <div id="title"> <img style="float:left;width:350px;margin:10px 0 0;" class="logo" src="http://www.webechodesigns.com/wacontractors/assets/wacontractorslogo.jpg" width="326" height="111" alt="WA Contractors - logo image" /> <blockquote style="float:right;width:300px;padding:0;margin:40px 10px 0;"><span class="bqstart" style="float: left;margin-top: -20px;padding-bottom: 10px;margin-bottom: 0px;font-size: 400%;color: #019fc4;">“</span><span class="quote" style="font-size:2em;color:#000;">Same great service ...brand new name</span><span class="bqend" style="float: right;margin:0;margin-top:-20px;padding-top:0px;font-size: 400%;color: #019fc4;">”</span></blockquote> </div> <div id="main" style="clear:both;padding:0 20px;border-top:1px solid #019fc4;"> <div class="content"> <h4 style="font-size:1.5em;text-align:center;margin:10px ;padding:0;">For all your <span class="h2" style="font-size:1.5em;color:red;margin:10px ;padding:0;">Grape Harvesting requirements</span> contact</h4> <h3 style="font-size:1.7em;text-align:center;margin:10px ;padding:0;">Brian, Geoff or Wayne</h3> <p class="email" style="text-align:center;font-size:1.3em;color:019fc4;"><a style="color:#019fc4;font-weight:bold;text-decoration:none;" href="mailto:[email protected]">[email protected]</a></p> <h5 style="font-size:1.6em;text-align:center;"><span class="red" style="color:red;">WA's most experienced Grape Harvesting Contractors</span> use only 120 SW Self Propelled Gregoire Harvesters</h5> <div class="center" style="text-align:center;"> <img src="http://www.webechodesigns.com/wacontractors/assets/11.jpg" width="150" height="120" alt="picture of grape harvester 11" /> <img src="http://www.webechodesigns.com/wacontractors/assets/12.jpg" width="150" height="120" alt="picture of grape harvester 12 " /> <img src="http://www.webechodesigns.com/wacontractors/assets/13.jpg" width="150" height="120" alt="picture of grape harvester 13 " /> <img src="http://www.webechodesigns.com/wacontractors/assets/14.jpg" width="150" height="120" alt="picture of grape harvester 14 " /> </div> <p class="contactus" style="color:red;font-size:1.3em;font-weight:bold;text-align:center;">*** contact us today ***</p> </div> </div> <div class="pre" style="border-top:1px solid #019fc4;margin:0 auto;width:700px;padding-left:40px;"> <div class="contact" style="font-size:1.3em"; width="33%";float="left";> <p class="area" style="margin:0;padding:0;">Southern Districts</p> <p class="person" style="font-weight:bold;font-size:1.1em;margin:0;padding:0;">Brian Williamson</p> <p class="mobile" style="font-size:1.1em;color:#019fc4;margin:0;padding:0;">Mobile:<span class="number" style="font-size:1em;color:#000;font-weight:bold;margin:0;padding:0;"> 0428 961 300</span></p> </div> <div class="contact" style="font-size:1.3em"; width="33%";float="left";> <p class="area" style="margin:0;padding:0;">Northern Districts</p> <p class="person" style="font-weight:bold;font-size:1.1em;margin:0;padding:0;">Geoff Slater</p> <p class="mobile" style="font-size:1.1em;color:#019fc4;margin:0;padding:0;">Mobile:<span class="number" style="font-size:1em;color:#000;font-weight:bold;margin:0;padding:0;"> 0407 997 581</span></p> </div> <div class="contact" style="font-size:1.3em"; width="33%";float="left";> <p class="area" style="margin:0;padding:0;">Northern Districts</p> <p class="person" style="font-weight:bold;font-size:1.1em;margin:0;padding:0;">Wayne Matthews</p> <p class="mobile" style="font-size:1.1em;color:#019fc4;margin:0;padding:0;">Mobile:<span class="number" style="font-size:1em;color:#000;font-weight:bold;margin:0;padding:0;"> 0427 754 050</span></p> </div> </div> <div id="footer" style="clear:both;"> </div> </body> </html>
He called me today in a panic to get this email out and i really want to get it off today for him - he's desperate
hope somebody can help
Freddy
Wed, 2006-01-18 09:07
#1
HELP unable to use CSS!!!!
Don't have any experience of email based HTML but have you read this?
http://www.alistapart.com/articles/cssemail/
No idea if it'll help but it's probably handy never the less.
Wed, 2006-01-18 17:53
#2
HELP unable to use CSS!!!!
ff, afaik you do have to use tables for html emails. the last job I was on that's what I had to do...
larmyia
Wed, 2006-01-18 22:00
#3
HELP unable to use CSS!!!!
I just posted this link in the other thread Chris started:
http://www.campaignmonitor.com/blog/archives/2005/08/optimizing_css_1.html
Wed, 2006-01-18 23:42
#4
HELP unable to use CSS!!!!
Thanks for the tips guys
Iended up getting it looking correct with embedded style sheets then having to cut and paste all the embedded code to inline styles.
It still has embedded styles for that work in Outlook and Thunderbird etc for the 'shinier' looking page but degrades reasonably in Gmail Yahoo etc which only pay attention to the inline styles.
The main concern here was thattthe client called me at 1pm and wanted it sent yesterday (actually happened at about midnight after emailing myself 120 versions to Gmail Outlook, Outlook Express etc) - he had already been waiting two weeks for another local designer to do it for him and finally recieved a word doc done by someone's 6 year old kid!
To be honest it's not a 'work' i am proud of at all but it will do the job. All in all the client was happy (enough)with the screenshots of the different results on diferenet systems (after explaining to him why it happened - he can barely use email so that took quite a while).
He will want an email sent out four or five times a year so I'll need to get a better template togethr for the future ones
Summary:
Use inline style for font size weight color and basic positioning
Keep embedded styles for floating divs and more interesting effects
If the email client can't read the embedded at least they get the inline styles which make it a little more interesting
It's not a feature i'd would reccomend learning on a deadline!
Thanks again for the quick replies to the *PANIC* post
Tip: learn now - then breesze through it later 
[edit] an learn to spell better than i did in this post[/edit]
Freddy
Thu, 2006-01-19 00:06
#5
HELP unable to use CSS!!!!
Whats with all these sudden html email questions , spawn of evil them be, is the internet being taken over by complete philistines, you should be wagging your finger at your clients and giving them a jolly good lecture.
Hugo.
Thu, 2006-01-19 01:05
#6
HELP unable to use CSS!!!!
Not until after they have paid!
One thing that's mentioned in that link of Tyssen's. Don't put styles on the <body>. Its possible it will be stripped or changed in the webmail client, use a wrapping div and put the styles on them.
Thu, 2006-01-19 07:51
#7
HELP unable to use CSS!!!!
Yeah Chris..S that's what i eneded up doing. It was not a nice bit of coding shal we say.
Hugo ...sorry mate! He just looked so desperate, new business competitors doing loads of things ... Blah Blah Blah (plus it's been a quiet month :oops: )
Thu, 2006-01-19 10:08
#8
HELP unable to use CSS!!!!
Quote:
Not until after they have paid!
Goes without saying, clear that check first then round on your clients and berate them for their wickedness
Quiet months, know what there like , only to well actually, I'd do it like a shot if it put food on the table
but of course my principles would remain pure and I'd moan much whilst doing it.
Thu, 2006-01-19 10:25
#9
HELP unable to use CSS!!!!
Oh .. i did try and do it all nice and shiny and polite like ... but it didn't work so i had to bodge it!
That said, I am enjoying a rather nice (but expensive ) beer at their expense at the moment so ...to hell with principles!
Only kidding! I am being beaten as we speak
ouch!
Thu, 2006-01-19 10:28
#10
HELP unable to use CSS!!!!
Hugo wrote:
clear that check first
No No No ...Cash only for those nasty things!
Thu, 2006-01-19 14:12
#11
HELP unable to use CSS!!!!
Quote:
No No No ...Cash only for those nasty things!
and in advance! but you will need to do penance for straying from the path of honour and principle
Thu, 2006-01-19 14:42
#12
HELP unable to use CSS!!!!
OK Hugo ...fair enough ...
I'll let the second beer go warm before i drink it!
Thu, 2006-01-19 15:55
#13
HELP unable to use CSS!!!!
Quote:
I'll let the second beer go warm before i drink it!
That will do, I'll absolve you of your sins, your penance is duly carried out, and you don't have to join the order of Flagellants, otherwise you'll be doing penance for heresy :roll:
Thu, 2006-01-19 16:40
#14
HELP unable to use CSS!!!!
fatfreddy wrote:
OK Hugo ...fair enough ...
I'll let the second beer go warm before i drink it!
HTML Emails are indeed the devils work - that that's a harsh punishment surely!. Father Hugo truly is a fervent believer it seems! 
Thu, 2006-01-19 22:35
#15
HELP unable to use CSS!!!!
Hugo wrote:
Quote:I'll let the second beer go warm before i drink it!
That will do, I'll absolve you of your sins, your penance is duly carried out, and you don't have to join the order of Flagellants, otherwise you'll be doing penance for heresy :roll:
Thank you father Hugo
So anyway - how do i get my Divs to float nicely in non-CSS reading HTML email programs then?
Fri, 2006-01-20 00:14
#16
HELP unable to use CSS!!!!
You will have to ask your co-conspirator Chris in this heresy that is html weaved into the pure benign stateless protocol that is email.
He too is running with the devil at the moment.
Sorry that's not very helpful but actually I haven't a clue so will but out
Fri, 2006-01-20 01:49
#17
HELP unable to use CSS!!!!
fatfreddy wrote:
Hugo wrote:Quote:I'll let the second beer go warm before i drink it!
That will do, I'll absolve you of your sins, your penance is duly carried out, and you don't have to join the order of Flagellants, otherwise you'll be doing penance for heresy :roll:
Thank you father Hugo
So anyway - how do i get my Divs to float nicely in non-CSS reading HTML email programs then?
There is no sin great enough to warrant the spoiling of innocent beer in an Australian summer 
About floating elements. I'd go with making a normal page and placing all the styles in line. All the webmail systems run in your browser, so they can handle floating. Most of the email clients are outlook or outlook express. I reckon they can handle the odd float. That just leaves minorities who either know enough about things to view their email in text (so couldn't care less about your floating), have a capable client that can display floats, or are stuck in the dark ages and get their email in plain text!
My take would be - always ensure your email is readable without styles and in plain text. Its probably even more important than for a web page as I suspect you are far more likely to come into contact with people not using a visual web browser and you can't use accessibility tricks to skip menus and the like. That would make source order particularly crucial.
Fri, 2006-01-20 02:02
#18
HELP unable to use CSS!!!!
Chris..S wrote:
There is no sin great enough to warrant the spoiling of innocent beer in an Australian summer
No danger of that happening.