18 replies [Last post]
fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 45 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

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

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 50 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

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.

larmyia
Offline
Elder
London
Last seen: 11 years 36 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 45 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

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 Laughing out loud

[edit] an learn to spell better than i did in this post[/edit]

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 20 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 45 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

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

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 20 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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 Smile

Quiet months, know what there like , only to well actually, I'd do it like a shot if it put food on the table Smile but of course my principles would remain pure and I'd moan much whilst doing it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 45 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

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!

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 45 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

HELP unable to use CSS!!!!

Hugo wrote:
clear that check first

No No No ...Cash only for those nasty things!

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 20 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

HELP unable to use CSS!!!!

Quote:
No No No ...Cash only for those nasty things!


Smile and in advance! but you will need to do penance for straying from the path of honour and principle

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 45 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

HELP unable to use CSS!!!!

OK Hugo ...fair enough ...

I'll let the second beer go warm before i drink it!
Laughing out loud

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 20 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 50 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

HELP unable to use CSS!!!!

fatfreddy wrote:
OK Hugo ...fair enough ...

I'll let the second beer go warm before i drink it!
Laughing out loud

HTML Emails are indeed the devils work - that that's a harsh punishment surely!. Father Hugo truly is a fervent believer it seems! Wink

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 45 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

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? Wink

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 20 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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? Wink

There is no sin great enough to warrant the spoiling of innocent beer in an Australian summer Shock

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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 Shock

No danger of that happening. Wink

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference