css table presentation :: correct method? | settings get dropped when pasting into html email?

jason

unread,

Mar 12, 2003, 10:16:08 AM3/12/03

to

I hope someone on this forum can help me with a very small CSS challenge:

I am trying to use limited CSS for presentation purposes to remove
unnecessary <font> tags

and streamline my code especially with regards to <table> data content.

I am not concerned at present with positioning and do not wish to undertake
"hacks" to get a universal

browser result (eg: @import etc).

I just wish the css to be optimized for NS4+ and IE4+ and some graceful

degradation in other browsers (opera) and OS(Macintosh).

The test table with css can be viewed at: www.imagineyachting.com/test.htm

While the results are acceptable in my tested browsers (IE 5.5, NS4+,
Mozilla),

I note that the some style assignements get dropped when you attempt to copy

the html into a standard HTML email - most notably the {family} and {size}

You can view the results at:
www.imagineyachting.com/images/table_css_email.jpg

I would like to know:

1. Can anyone tell me why this is so. The style is contained in the HEAD
section

and should be global to the page.

2. Further, it seems logical for me to use this convention to simplify table

layout. Am I correct or there inherent problems with this method or a better
way

of organising table content.

3. Any other advice to produce clean, consistent table presentations

Thanks in advance

Jason Stevens

Kiran Math

unread,

Mar 13, 2003, 10:51:31 AM3/13/03

to

Jason,
You need to include the stylesheet with the email.

You can do two things:

1> Do not use external css . Use <style> ..... </style> for all html
documents you need to email.

2> If you like to still use external css then attach the external css to the
email.

I think the first approach is more useful as the user may want to send a
email using the browser "send mail" utility.

If you hit upon some other way out , Pl do let me know .

Hope that helps

Kiran Math

jason

unread,

Mar 13, 2003, 11:29:47 AM3/13/03

to

Hi Kiran,

Unfortuanately I am already using <style></style> inside the HEAD section
and I still get no joy.

Can you confirm you have actually successfully used css inside a outlook
email. It appears the a.hover css will work but any other presentation
styles relating to the table eg TD {font-family: verdana} etc gets ignored.

You can see exactly what I mean. View Source to see my code and the css.
What is your opinion on this:

The test table with css can be viewed at: www.imagineyachting.com/test.htm

You can see what the table looks like in OUTLOOK at:
www.imagineyachting.com/images/table_css_email.jpg

"Kiran Math" <kira...@hotmail.com> wrote in message
news:u6hDshX6...@TK2MSFTNGP11.phx.gbl...

Cosme

unread,

Mar 13, 2003, 12:45:05 PM3/13/03

to

Jason, your css style page works well,
I saved it to my HD and using that as stationery (removing the Base tag of
the source), works in the mail as well as in the web page.

Regards
Cosme

"jason" <ja...@catamaranco.com> wrote in message
news:ONu1z4X6...@TK2MSFTNGP09.phx.gbl...

Kiran Math

unread,

Mar 13, 2003, 12:48:13 PM3/13/03

to

Try this code: -

----------------- Start Of Code --------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS :: testing css table data presentation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Language" content="en">

<meta name="description" content="css, tables">
<meta name="keywords" content="css, tables">
<meta name="robots" content="index,follow">
<link rel="author" href="mailto:in...@imagineyachting.com">
<link rel="shortcut icon" href="imagineyachting.com">

<STYLE TYPE="text/css">
<!--
.mmx {FONT-SIZE: 10pt;FONT-FAMILY: Verdana, Geneva, Arial,
Helvetica, sans-serif}

a {
text-decoration : underline;
font-weight : bold;
color : blue;
font-family : Verdana;
font-size : 11px;
}

a.makeLine {
text-decoration : underline;
font-family : Verdana;
font-weight : bold;
}

a:hover {
color : red;
font-family : Verdana;
font-weight : bold;
}
-->
</STYLE>
</HEAD>
<BODY>

<table border=1 cellspacing=3 cellpadding=3>
<tr>
<td class=mmx><a href="http://www.crewedcats.com/?cat=crazyhorse"
target="_blank">crazyhorse</a></td> <td class=mmx>1 dive per day
included</td>
</tr>
<tr>
<td class=mmx><a href="http://www.crewedcats.com/?cat=doublefeature"
target="_blank">doublefeature</a></td> <td class=mmx>2 dives per day
included</td>
</tr><tr>
<td class=mmx><a href="http://www.crewedcats.com/?cat=dreamcatcherI"
target="_blank">dreamcatcherI</a></td><td class=mmx>2 dives per day
included, gear included</td>
</tr><tr>
<td class=mmx><a href="http://www.crewedcats.com/?cat=dreamcatcherII"
target="_blank">dreamcatcherII</a></td> <td class=mmx>4 dives for $150</td>
</tr>
</table>

</BODY>
</HTML>

----------------------------------- end of
Code ------------------------------------------

Hope that works with emails.
Kiran Math

jason

unread,

Mar 13, 2003, 1:13:15 PM3/13/03

to

Cosme, this sounds like a new route - I have never used the "stationery"
angle. I have the file on my HD - but how do I assign it as stationery
inside the html.

And, as an aside, is the usual way to do it - before attempting CSS I just
used to copy and paste - I appreciate all your help on this...
"Cosme" <co...@tico.com> wrote in message
news:eoswZhY6...@TK2MSFTNGP12.phx.gbl...

jason

unread,

Mar 13, 2003, 1:14:36 PM3/13/03

to

Hi Kiran - I am attempting Cosme's solution first (stationary) then I will
go with yours.

The only thing that concerns me about your method is that I have assign a
"class" to each cell which is more work. I would prefer my style attributes
for the TD to be global as in my declarations. Maybe you could comment on
this....

"Kiran Math" <kira...@hotmail.com> wrote in message

news:#Jhk5iY6...@TK2MSFTNGP11.phx.gbl...

jason

unread,

Mar 13, 2003, 1:24:26 PM3/13/03

to

Hi Cosme,

You were right embed as Stationery solved the problem. BUT, I am not sure
what you mean by remove Base of the source - how do you do this once it is
already in your outlook html email????

Many thanks
Jason

"Cosme" <co...@tico.com> wrote in message
news:eoswZhY6...@TK2MSFTNGP12.phx.gbl...

Cosme

unread,

Mar 13, 2003, 1:38:10 PM3/13/03

to

You have to do nothing to your file!
Go to Outlook express
Click the create message botton
Select Stationary
Browse to your HTML file

Before send it you must remove the Base tag that Outlook put in your message
and that is all.
Something like this: <BASE href=file://C:\AWEB\Atb\>

If you can't see de source code, select the source edit option of the view
tab.

Regards
Cosme

"jason" <ja...@catamaranco.com> wrote in message

news:O7aW5wY6...@TK2MSFTNGP11.phx.gbl...

jason

unread,

Mar 13, 2003, 1:56:19 PM3/13/03

to

Okay, Csome - I viewed the source of my stationary html email contained my
file and cannot see anything resembling

Futher, and quite importantly, even if it was there and I did view the
source inside NOTEPAD if I cannot seem to make any changes stick. How do you
actually save SOURCE changes.

Here is what my stationery code looks like - no baseline anywhere - can you
comment:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>CSS :: testing css table data presentation</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META http-equiv=Content-Style-Type content=text/css>
<META http-equiv=Content-Language content=en><!--<meta

http-equiv="pics-label" content='(pics-1.1
"http://www.icra.org/ratingsv02.html" l gen true for
"http://www.alanwood.net/" r (cz 1 lz 1 nz 1 oz 1 vz 1)
"http://www.rsac.org/ratingsv01.html" l gen true for
"http://www.alanwood.net/" r (n 0 s 0 v 0 l 0))'>-->

<META content="css, tables" name=description>
<META content="css, tables" name=keywords>
<META content=index,follow name=robots><LINK
href="mailto:in...@imagineyachting.com" rel=author><LINK
href="imagineyachting.com" rel="shortcut icon"><LINK
href="http://www.imagineyachting.com/test/test.css" type=text/css
rel=stylesheet>
<META content="MSHTML 5.50.4134.600" name=GENERATOR></HEAD>
<BODY style="BACKGROUND-COLOR: #ffffff" bgColor=#ffffff background="">
<TABLE cellSpacing=3 cellPadding=3 border=1>
<TBODY>
<TR>
<TD><A target=_blank
href="http://www.crewedcats.com/?cat=crazyhorse">crazyhorse</A></TD>
<TD>1 dive per day included</TD></TR>
<TR>
<TD><A target=_blank

href="http://www.crewedcats.com/?cat=doublefeature">doublefeature</A></TD>
<TD>2 dives per day included</TD></TR>
<TR>
<TD><A target=_blank

href="http://www.crewedcats.com/?cat=dreamcatcherI">dreamcatcherI</A></TD>
<TD>2 dives per day included, gear included</TD></TR>
<TR>
<TD><A target=_blank

href="http://www.crewedcats.com/?cat=dreamcatcherII">dreamcatcherII</A></TD>
<TD>4 dives for $150</TD></TR></TBODY></TABLE></BODY></HTML>

"Cosme" <co...@tico.com> wrote in message

news:uI$O$#Y6CH...@TK2MSFTNGP11.phx.gbl...

Cosme

unread,

Mar 13, 2003, 2:22:22 PM3/13/03

to

This tag is not in your file, but when OE create the message using the stationery route, it put this tag in yor file.

Here is the entire code of your example and which I used before, the mentioned tag is in red.

This is important mainly for files referencing images or music.

Cosme

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>CSS :: testing css table data presentation</TITLE><BASE
href=file://C:\MyWebs\>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">

<STYLE type=text/css>TABLE TD {

FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
}

A {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: blue; FONT-FAMILY: Verdana; TEXT-DECORATION: underline
}
A.makeLine {
FONT-WEIGHT: bold; FONT-FAMILY: Verdana; TEXT-DECORATION: underline
}
A:hover {
FONT-WEIGHT: bold; COLOR: red; FONT-FAMILY: Verdana
}
</STYLE>

<TD><A href="http://www.crewedcats.com/?cat=crazyhorse"
target=_blank>crazyhorse</A></TD>

<TD>1 dive per day included</TD></TR>
<TR>

<TD><A href="http://www.crewedcats.com/?cat=doublefeature"
target=_blank>doublefeature</A></TD>

<TD>2 dives per day included</TD></TR>
<TR>

<TD><A href="http://www.crewedcats.com/?cat=dreamcatcherI"
target=_blank>dreamcatcherI</A></TD>

<TD>2 dives per day included, gear included</TD></TR>
<TR>

<TD><A href="http://www.crewedcats.com/?cat=dreamcatcherII"
target=_blank>dreamcatcherII</A></TD>

<TD>4 dives for $150</TD></TR></TBODY></TABLE></BODY></HTML>

"jason" <ja...@catamaranco.com> wrote in message news:#gfM9IZ6...@TK2MSFTNGP10.phx.gbl...

jason

unread,

Mar 13, 2003, 2:40:17 PM3/13/03

to

Cosme, I still don't understand. I checked the source code of:

(1) Underlying file
(2) Html stationary email containing my table

..and nowhere do I see the reference to <BASE
href=file://C:\MyWebs\> tag you are referring to.

I even tried SENDING the email to myself and checking the source code but
NADA, nothing.

Either I am misunderstanding you or I have missed a step.

"Cosme" <co...@tico.com> wrote in message

news:OPALqXZ6...@TK2MSFTNGP10.phx.gbl...

Cosme

unread,

Mar 13, 2003, 2:56:43 PM3/13/03

to

y NADA?
Hablas español?
If you already sent the message using the stationery, you already saw the
results
What's up?

Cosme

"jason" <ja...@catamaranco.com> wrote in message

news:uHAvhhZ6...@TK2MSFTNGP11.phx.gbl...

jason

unread,

Mar 13, 2003, 3:10:32 PM3/13/03

to

Si - poquita perro mi epspanol is muy malo!

No, it gets sent fine and is working fine but I thought you were saying
that problematic tag gets embedded somewhere but I cannot see it any stage
of selecting my file for the stationary options.....

Should I just not worry about it....psst maybe you comment on another
un-related post above called:

"Difference between "." and eg....."

You've been a great help!!

Jason

"Cosme" <co...@tico.com> wrote in message

news:euO23qZ6...@TK2MSFTNGP10.phx.gbl...

Cosme

unread,

Mar 13, 2003, 3:29:35 PM3/13/03

to

Jason, the Base tag appears only in the compose window of Outlook Express,
when you are editing the message, not in other moment. But it is important
only for referencing files, for this excesice you can use your HTML file as
it is.

Excuse me please for my very poor English.

Cosme

"jason" <ja...@catamaranco.com> wrote in message

news:OULybyZ6...@TK2MSFTNGP10.phx.gbl...