styles and email readers - consistency

Kevin Raleigh

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

Subscribe Post Reply

2550

Bergamot

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

Kevin Raleigh

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

Andy Dingley

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

David Stone

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

Bergamot

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

Kevin Raleigh

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

Kevin Raleigh

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

Andy Dingley

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

Kevin Raleigh

"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

Similar topics

Question about commit

by: Markus Breuer | last post by:

I have a question about oracle commit and transactions. Following scenario: Process A performs a single sql-INSERT into a table and commits the transaction. Then he informs process B (ipc) to...

Oracle Database

Changing CSS styles with javascript

by: dan.vendel | last post by:

Hi, I know nothing about javascript, but quite a lot about regulat html and CSS. Have bumped into a problem that people in this fine congregation perhaps can help me with. I'm making a...

Javascript

XP Styles in vb.net 2003?

by: Terry Olsen | last post by:

Is there a way to turn on XP Styles in 2003? Or is the manifest file still the way to go?

Visual Basic .NET

Want Print CSS to simply disable all styles

by: Jeremy Clulow | last post by:

Hi, I've designed a site at http://www.welsh-kitchens.com When all styles are disabled it looks like this http://www.welsh-kitchens.com/index-nocss.shtml I've tried creating a printing...

HTML / CSS

send an email with picture/rich text format in the body

by: anya | last post by:

Hey, I have a certain problem and till now I didnt find an answer on the web. I want to send an email message with picture in it. I dont want to put it as attachment but make it in the body of...

Python

Inline media styles

by: appleboy | last post by:

Hello to all, and sorry about my poor english :) I am trying to assign inline styles thru javascript or directly into the element parameters. E.j: <span style="font-size:5em;"> I would like...

HTML / CSS

Link styles not displaying properly in IE6, 7

by: hestres | last post by:

Hello, I'm working on some link styles for this page: http://www.house.gov/velazquez/lh0205tres/reports.html I want all the links to always display in red (#CC0000), but in IE6 and 7 they...

HTML / CSS

Displaying CSS Styles on Element Mouse Over

by: splounx | last post by:

Hi there, I am a relative CSS & JavaScript novice and I have a particular problem that is beyond my level of knowledge so I thought I'd tap the collective wisdom of this group. I would like...

HTML / CSS

Removing Unnecessary Styles

by: fleemo17 | last post by:

Over the course of building a very large site, I've wound up with an enormous style sheet containing plenty of superfluous styles. Is there a tool that can recognize which styles are not being used...

HTML / CSS

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice