raj_ms
asked on
CSS doesnt work only in lotus notes email
When i send an HTML emails, CSS is not working in lotus notes email, where as in hotmail, yahoo its working perfectly. why is it?
ASKER
http://www.templatekit.com/lotusnotes1.php
this article explains, but its not addressing my problem.
<tr><td bgcolor="beige" valign="top"><p class="style3" valign="top" align="justify">
<%
'response.write "<tr><td bgcolor='beige' valign='top'><p class='style3' valign='top' align='justify'><img
src='/images/" & br(index) & "pb.jpg' name='" & br(index) & "'alt='" & br(index) & "p/pm'
border='0' align='left'> "
response.write "<img src='/images/" & br(index) & "pb.jpg' name='" & br(index) & "'
alt='" & br(index) & "p/pm' border='0' align='left'> "
images are coming the font sizes are not adjusted.
<STYLE type="text/css">
<!--
p.h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16pt;
color: #A81616;
}
p.style1 {
color: #333333;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p.style2 {
color: #FFFFFF;
font-size: 11pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.mainsection {
background-image: url("/images/mainbg.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
p.style3 {
color:#333332;
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p.style4 {
color:#333333;
font-size: 12pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-color:blue;
}
p.style5 {
color:#333350;
font-size: 9pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
-->
</STYLE>
this is my style sheet. its coming in the form of tables.only font sizes are not adjusting
this article explains, but its not addressing my problem.
<tr><td bgcolor="beige" valign="top"><p class="style3" valign="top" align="justify">
<%
'response.write "<tr><td bgcolor='beige' valign='top'><p class='style3' valign='top' align='justify'><img
src='/images/" & br(index) & "pb.jpg' name='" & br(index) & "'alt='" & br(index) & "p/pm'
border='0' align='left'> "
response.write "<img src='/images/" & br(index) & "pb.jpg' name='" & br(index) & "'
alt='" & br(index) & "p/pm' border='0' align='left'> "
images are coming the font sizes are not adjusted.
<STYLE type="text/css">
<!--
p.h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16pt;
color: #A81616;
}
p.style1 {
color: #333333;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p.style2 {
color: #FFFFFF;
font-size: 11pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.mainsection {
background-image: url("/images/mainbg.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
p.style3 {
color:#333332;
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p.style4 {
color:#333333;
font-size: 12pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-color:blue;
}
p.style5 {
color:#333350;
font-size: 9pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
-->
</STYLE>
this is my style sheet. its coming in the form of tables.only font sizes are not adjusting
ASKER
if add a statement like this, its not working
<p class="style3"><i>Step 2</i><br>testing<br><br></ p>
where as
<p class="style1">this statement output is correct</p>
this statement is working
<p class="style3"><i>Step 2</i><br>testing<br><br></
where as
<p class="style1">this statement output is correct</p>
this statement is working
Based on the article, have you tried commenting out every line of the style sheet? You would end up with:
<STYLE type="text/css">
<!--p.h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16pt;
color: #A81616;
}-->
<!--p.style1 {
color: #333333;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}-->
<!--p.style2 {
color: #FFFFFF;
font-size: 11pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}-->
<!--.mainsection {
background-image: url("/images/mainbg.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}-->
<!--p.style3 {
color:#333332;
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}-->
<!--p.style4 {
color:#333333;
font-size: 12pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-color:blue;
}-->
<!--p.style5 {
color:#333350;
font-size: 9pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}-->
</STYLE>
<STYLE type="text/css">
<!--p.h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16pt;
color: #A81616;
}-->
<!--p.style1 {
color: #333333;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}-->
<!--p.style2 {
color: #FFFFFF;
font-size: 11pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}-->
<!--.mainsection {
background-image: url("/images/mainbg.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}-->
<!--p.style3 {
color:#333332;
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}-->
<!--p.style4 {
color:#333333;
font-size: 12pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-color:blue;
}-->
<!--p.style5 {
color:#333350;
font-size: 9pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}-->
</STYLE>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I believe my last comment was the answer to the poster's question. There seems to be an issue with the way Notes reads CSS so each line in between the <style></style> tags needs to be commented.
Brian Wilkins
Brian Wilkins
by Rod for article http://www.notestips.com/80256B3A007F2692/1/NAMO-5NC24F
********BEGIN QUOTE*****************
Just in case this point hasn't been made already, the Notes 6 client does have some support for CSS. Of course it's not as complete as the CSS support found in current browsers, but it's only the first crack at it inside of Notes. From that standpoint it's a good start.
There's even a TopStyle definition file for the Notes client available on the LDD Sandbox (OK, buried in the Sandbox...it's there though ;-):
http://www-10.lotus.com/ldd/sandbox.nsf/ConferencePresentationsViewNJ/432396bc10e07f3c85256cd1004ef1fd?OpenDocument
Unfortunately not all the elements support all the same rules (e.g. a [div] in the client can't have a border, while paragraphs can)...so the definition file is certainly not foolproof. Nonetheless, it does help.
Two main differences between browsers and Notes implementations of CSS:
1. In Notes 6, a CSS rule wins over local style info. In a browser, whatever is more local to the element takes precedence. Most obvious example is rich text. As we all know, browsers place a higher precedence on font tags than on CSS rules. In the Notes client however, the CSS rule would win.
2. Each and every line of text rendered in the Notes client is bounded by a paragraph tag. In other words, if you could "view source" on a Notes document, there would be [p] tags everywhere. That's not to say you need to include the [p] tag on every CSS rule. Just be aware of it's presence.
Combine those two, and you can see it is very easy to reset the font-family for an entire document viewed in the Notes client (rich text included):
p{font-family: whatever, alternate, etc}
However, the following wouldn't be very helpful (I learned the hard way):
p{color: black}
As the above 'exceptions' highlight, Notes would then generate all text on the document in the colour black. The only way around that would be to have special rules to override black:
span.header p {colour: blue}
May as well skip the p{color: black} rule in the first place.
Anyway, that's enough rambling (I can get going ;-)
Notes 6 has CSS support, and hopefully that's just the starting point (improvements in future versions would be most welcome--be it increased support for CSS2, and/or auto-CSS generation for Domino).
*************END QUOTE*****************
Hope this helps!
Brian