Quick CSS Question

[amerar]

Hi All,

I have this CSS that I use in one of my emails. When I view the email
in Netscape, the style sheet looks fine and the page comes out
fine.......

However, when I view the email using Yahoo, or Hotmail, or any of the
web based emails, it gets totally screwed. Anyone know why this is?


I've included a copy of this LONG style sheet below:

<style type="text/css">
BODY {
background-color: white;
color:black;
}
DIV, TR, TABLE, UL, A, BODY, P, LI, TD {
font: 12pt Arial, Helvetica, sans-serif;
}
A {
text-decoration: none;
}
a:link { color: #CC3300; background-color: transparent }
A:visited {
color: #CC3300;
background-color: transparent;
}
a:hover { color: #0066FF; background-color: transparent }

#idDivBack {
position: absolute;
top: 168px;
left: 150px;
height: 40px;
width: 100%;
background-color: #D0A375; /*#9999CC;*/
border-style: none;
border-width: medium;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 100%;
font-size: 27pt;
font-family: Times, serif;
color: #CC9B6A; /*#8888DD;*/
padding: 5px;
text-align: right;
}
#idDivTitle1a {
position: absolute;
top: 143px;
left: 165px;
height: 100px;
font-style: italic;
font-variant: normal;
font-weight: bold;
line-height: 100%;
font-size: 38pt;
font-family: Verdana, sans-serif;
color: #D0A375; /*#00CC99;*/
background-color: transparent;
filter: shadow(color=#000000, direction=135);
}
#idDivTitle1b {
position: absolute;
top: 140px;
left: 162px;
height: 100px;
font-style: italic;
font-variant: normal;
font-weight: bold;
line-height: 100%;
font-size: 38pt;
font-family: Verdana, sans-serif;
color: #663300; /*blue;*/
background-color: transparent;
}
#idDivTitle2a {
position: absolute;
left: 180px;
top: 193px;
height: 40px;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 100%;
font-size: 24pt;
font-family: Verdana, sans-serif;
color: silver; /*silver;*/
background-color: transparent;
}
#idDivTitle2b {
position: absolute;
left: 190px;
top: 200px;
height: 40px;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 100%;
font-size: 24pt;
font-family: Verdana, sans-serif;
color: #990000; /*navy;*/
background-color: transparent;
}
.BodyArea {
position: absolute;
background-color: #E0E0E0; /*#AAFFEE;*/
color: black;
top: 265px;
width: 680px;
left: 150px;
padding: 5px;
border: medium solid silver; /*#00CC99;*/
margin-bottom: 1cm;
}
.TailArea {
position: absolute;
background-color: #FFFFFF
color: black;
top: 865px;
width: 680px;
left: 150px;
padding: 10px;
}
.WorkSpace {
position: absolute;
top: 265px;
left: 230px;
margin-bottom: 1cm;
background-color: transparent;
}

@media print {

#idDivBack { visibility: hidden; }
#idDivTitle1a { visibility: hidden; }
#idDivTitle1b { visibility: hidden; }
#idDivTitle2a { visibility: hidden; }
.BodyArea { visibility: hidden; }

#idDivTitle2b {
position: absolute;
left: 150px;
top: 140px;
height: 30px;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 100%;
font-size: 24pt;
font-family: Verdana, sans-serif;
color: #990000; /*navy;*/
background-color: transparent;
}

.WorkSpace {
position: absolute;
top: 180px;
left: 150px;
margin-bottom: 1cm;
background-color: transparent;
}

}
</STYLE>

 

[Chris Beall]

Hi All,

I have this CSS that I use in one of my emails. When I view the email
in Netscape, the style sheet looks fine and the page comes out
fine.......

However, when I view the email using Yahoo, or Hotmail, or any of the
web based emails, it gets totally screwed. Anyone know why this is?

(snip CSS)

Most likely the problem is that Yahoo and Hotmail are displaying your
e-mail within a context that they have set up, i.e. it's imbedded within
their own banners, divs, etc. Something in your e-mail isn't compatible
with that context. Determining the exact cause could require analysis
of their page structure, and there's no guarantee they won't change it,
nor that there aren't other web-based e-mail clients that do something
different.

You could also fix the following errors reported by the validator at
http://jigsaw.w3.org/css-validator/:

* Line: 50 Context : #idDivTitle1a

Parse Error - color=#000000, direction=135)
* Line: 108 Context : .TailArea

Invalid number : background-color attempt to find a semi-colon
before the property name. add it

The easiest solution is to use plain text in your e-mail and leave HTML
for web pages, where you have greater control of the environment. If
your message just can't be expressed in words alone, the e-mail could
contain a link that takes the recipient to a corresponding web page.

Cheers,
Chris Beall