471,603 Members | 1,625 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,603 software developers and data experts.

styles and email readers - consistency

I am using phpmailer to output emails.

The CSS features work great in OE but a few of the features break down
in Yahoo, and Hotmail.

Specifically I can't get the underline feature to work on
a:hover in yahoo, and the text color for links and the a:hover
fails completely in Hotmail readers.

A very short list of my link code for all the news readers.
OE, Yahoo, Hotmail, haven't tried Yahoo yet.

<style type="text/css">
a:visited {
color: #FFFFFF;
}
a:link {
color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
text-decoration: underline;
background-color: #092F5E;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
font-weight: 700;
color: #FFFFB7;
text-decoration: none;
}
</style>

I have considered doing inline styles, but that seems very complicated for a
lot of links.
Ideas would be most welcome.

Thank You
Kevin
Aug 15 '07 #1
9 2484
Kevin Raleigh wrote:
I am using phpmailer to output emails.

The CSS features work great in OE but a few of the features break down
in Yahoo, and Hotmail.
Don't waste too much energy trying to get fancy CSS working in email,
especially web mail. Email systems are way behind browsers in this area,
and don't expect it to get much better any time soon.
Specifically I can't get the underline feature to work on
a:hover in yahoo
Surprisingly, web mail systems seem worse off than regular mail clients
where it comes to CSS. I've seen some painful things spew forth from
comcast web mail.
I have considered doing inline styles, but that seems very complicated for a
lot of links.
You'll get the most consistent results with inline styles. Some mail
systems strip out code in the <headso will drop any embedded
stylesheet you put there.
Ideas would be most welcome.
Keep it simple is especially appropriate for HTML email.

--
Berg
Aug 15 '07 #2
I have considered doing inline styles, but that seems very complicated
for a
lot of links.

You'll get the most consistent results with inline styles. Some mail
systems strip out code in the <headso will drop any embedded
stylesheet you put there.
Can you give me an example of an inline style that encompasses all that I
need? I looked over my book from Eric Meyer but he is pretty thin on
inline links.

What I would like to do is drop in a CSS style on a <spantag that
encompasses
my right hand navigation using these styles.
<style type="text/css">
a:visited {
color: #FFFFFF;
}
a:link {
color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
text-decoration: underline;
background-color: #092F5E;
}
a {
font-family: Verdana;
font-size: .8em;
font-weight: 700;
color: #FFFFB7;
text-decoration: none;
}

Is this possible?
Or am I asking way to much of html mail programs?

Kevin
Aug 15 '07 #3
On 15 Aug, 03:37, "Kevin Raleigh" <krale...@sbcglobal.netwrote:
The CSS features work great in OE but a few of the features break down
in Yahoo, and Hotmail.
Fancy CSS rules generally work OK in email, but fancy CSS selectors
don't. If you inline your CSS into style attributes on elements rather
than placing it in a stylesheet (even an internal stylesheet), it's
more likely to survive. The downside is that you lose the ability to
use pseudo-element selectors like :hover.

There are also limits on how you can style <body>. Generally wrapping
everything in one large <div class="content" and styling on that is
more robust.

You _may_ find (for some email readers) that a non-valid inline
stylesheet <stylein the <bodyof the message survives better than a
valid one inside <head(and also allows :hover). As duplicated CSS
isn't a problem, you can just supply two copies of the same
stylesheet.

There are websites out there listing known variations for Yahoo,
Gmail, Hotmail etc. Desktop and mobile email clients are a bit less
well described.

Aug 15 '07 #4
In article <eo******************************@giganews.com>,
"Kevin Raleigh" <kr******@sbcglobal.netwrote:
I have considered doing inline styles, but that seems very complicated
for a
lot of links.
You'll get the most consistent results with inline styles. Some mail
systems strip out code in the <headso will drop any embedded
stylesheet you put there.
Can you give me an example of an inline style that encompasses all that I
need? I looked over my book from Eric Meyer but he is pretty thin on
inline links.

What I would like to do is drop in a CSS style on a <spantag that
encompasses
my right hand navigation using these styles.
Let me see if I understand this correctly: you are sending out
html e-mails, which include a navigation bar/pane? In other words,
you are e-mailing web pages to people?

Wouldn't it be a lot simpler to send out a simple, plain text
e-mail with a brief text and a link to a web site page? That
way, you wouldn't have to worry about web mail systems mangling
your styles at all.

Plus, if your e-mails happened to end up with someone like me,
who quite deliberately turns OFF html rendering in their mail
client (and hardly ever uses web mail), your e-mail would still
be readable...

[snip]
a {
font-family: Verdana;
font-size: .8em;
On my computer, in my browser, this would be almost too small
to be clearly legible.
Aug 15 '07 #5
Kevin Raleigh wrote:
>
What I would like to do is drop in a CSS style on a <spantag that
encompasses
a:visited
a:link
a:hover
You can't do pseudo classes or pseudo elements with inline styles.
Or am I asking way to much of html mail programs?
I think you are. The simpler you make it, the less likely it will be
mangled by a deficient mail reader. And there are plenty of those about.

--
Berg
Aug 15 '07 #6
You can't do pseudo classes or pseudo elements with inline styles.
Or am I asking way to much of html mail programs?

I think you are. The simpler you make it, the less likely it will be
mangled by a deficient mail reader. And there are plenty of those about.
I appreciate all the insight and the feedback.
Will simplfy it...
Kevin
Aug 16 '07 #7
There are also limits on how you can style <body>. Generally wrapping
everything in one large <div class="content" and styling on that is
more robust.
Will give that a try
There are websites out there listing known variations for Yahoo,
Gmail, Hotmail etc. Desktop and mobile email clients are a bit less
well described.

How would I search on this??
I would be interested in seeing how far I can push the envelope.
But right now, I will simplfy my code until I can do some testing.

Kevin ;-)
Aug 16 '07 #8
On 16 Aug, 06:02, "Kevin Raleigh" <krale...@sbcglobal.netwrote:
How would I search on this??
http://alistapart.com/articles/cssemail

http://groups.google.co.uk/group/alt...f0bffed853df5e

Aug 16 '07 #9

"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11*********************@57g2000hsv.googlegrou ps.com...
On 16 Aug, 06:02, "Kevin Raleigh" <krale...@sbcglobal.netwrote:
How would I search on this??

http://alistapart.com/articles/cssemail

http://groups.google.co.uk/group/alt...f0bffed853df5e
>
Thank You
Will review it
Kevin
Aug 20 '07 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

11 posts views Thread by Markus Breuer | last post: by
12 posts views Thread by dan.vendel | last post: by
9 posts views Thread by Terry Olsen | last post: by
2 posts views Thread by Jeremy Clulow | last post: by
1 post views Thread by appleboy | last post: by
4 posts views Thread by splounx | last post: by
5 posts views Thread by fleemo17 | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by MichaelMortimer | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.