[Zope] Cascading Style Sheets in Netscape6

Casey Duncan cduncan@kaivo.com
Fri, 06 Apr 2001 08:19:43 -0600


Craig Stoddart wrote:
> 
> >I don't see any <style> element in what you have sent.  Does the page as
> >seen by the browser have a <style> element?  If not, it is needed.  What
> >would be good is to send the source ***as seen by NS6***.
> 
> I added in the <style> tags to the beginning and end of my CSS but it didn't
> have any effect. I don't know if this is related but I've also noticed that
> none of my Javascript works in Netscape 6 that works perfectly well in Netscape
> 4.75. I've checked the preferences of the Browser and the Javascript Options
> are selected.
> 
> I viewed the source of the style sheet in Netscape 6 and it appeared exactly as
> below except the <dtml-call> and <dtml-if> sections weren't there. I then
> tested it with those parts removed and it still didn't work!
> 
> So my CSS now looks like this:
> 
> <style type="text/css">
> <dtml-call "RESPONSE.setHeader('Content-Type','text/css')">
> <dtml-call "REQUEST.set( 'sniffer', UserSniffer() )">
> <dtml-call "REQUEST.set('site_fonts', 'arial, helvetica, sans-serif')">
> 
> <dtml-if expr="sniffer['platform'] == 'Win32' and sniffer['browser'] == 'IE'">
>    <dtml-comment>  ie needs smaller fonts than anyone else </dtml-comment>
>    <dtml-call "REQUEST.set('font_size', 'x-small')">
>    <dtml-call "REQUEST.set('font_smaller', 'xx-small')">
>    <dtml-call "REQUEST.set('font_smallest', '7pt')">
> <dtml-elif expr="sniffer['platform'] == 'Win32'">
>    <dtml-comment> Netscape or others on WIntel </dtml-comment>
>          <dtml-call "REQUEST.set('font_size', 'small')">
>    <dtml-call "REQUEST.set('font_smaller', 'x-small')">
>    <dtml-call "REQUEST.set('font_smallest', 'x-small')">
> <dtml-elif expr="sniffer['platform'] == 'Mac'">
>   <dtml-comment> Mac users need bigger fonts</dtml-comment>
>   <dtml-call "REQUEST.set('font_size', 'medium')">
>    <dtml-call "REQUEST.set('font_smaller', 'small')">
>    <dtml-call "REQUEST.set('font_smallest', 'x-small')">
> <dtml-else>
>    <dtml-comment> Linux and all other users</dtml-comment>
>    <dtml-call "REQUEST.set('font_size', 'small')">
>    <dtml-call "REQUEST.set('font_smaller', 'x-small')">
>    <dtml-call "REQUEST.set('font_smallest', 'x-small')">
> </dtml-if>
> 
>    BODY , TH, TD, OL, UL, LI { font-family: arial, helvetica, sans-serif;
> font-size: <dtml-var font_size>; }
>     P { font-family: <dtml-var site_fonts>; font-size: <dtml-var font_size>;
> color: black;}
>     H1 { font-size: 175%; font-family: <dtml-var site_fonts>; }
>     H2 { font-size: 150%; font-family: <dtml-var site_fonts>; }
>     H3 { font-size: 125%; font-family: <dtml-var site_fonts>; }
>     H4 { font-size: 100%; font-family: <dtml-var site_fonts>; }
>     H5 { font-size: 75%; font-family: <dtml-var site_fonts>; }
>     H6 { font-size: 50%; font-family: <dtml-var site_fonts>; }
>     PRE, TT, CODE { font-family: courier, sans-serif; font-size: <dtml-var
> font_size>; }
>     A:visited { color: purple; font-family : <dtml-var site_fonts>; }
>     A: { color: blue; text-decoration: underline; font-family : <dtml-var
> site_fonts>; font-size : <dtml-var font_size>; )
>     A.menus { color: #FF6666; text-decoration: none; font-size: <dtml-var
> font_smallest>; }
>     A.menus:visited { color: #FF6666; text-decoration: none; font-size:
> <dtml-var font_smaller>; }
>     A.menus:hover { text-decoration: none; color: #FF6666; background: #ffa;
> font-size: <dtml-var font_smaller>; }
>     A.menussel { color: #FF6666; text-decoration: none; background: #ffa;
> font-size: <dtml-var font_smaller>; }
>     A.menussel:visited { color: #FF6666; text-decoration: none; background:
> #ffa; font-size: <dtml-var font_smaller>; }
>     A.menussel:hover { text-decoration: none; color: #FF6666; background: #ffa;
> font-size: <dtml-var font_smaller>; }
>     A.menusxxs { color: #FF6666; text-decoration: none; font-size: <dtml-var
> font_smallest>; }
>     A.menusxxs:visited { color: #FF6666; text-decoration: none; font-size:
> <dtml-var font_smallest>; }
>     A.menusxxs:hover { text-decoration: none; color: #FF6666; background: #ffa;
> font-size: <dtml-var font_smallest>; }
> 
> PRE {
>   font-family : "Courier New", Courier, monospace;
>   font-size : small;
>   font-style : normal;
>   font-variant : normal;
>   font-weight : normal;
>   color : Black}
> 
> .DCCIntra { background-color: #FFFFFF; font-size: 26pt;
>   font-weight: bold; color: black;
>   font-family: Arial, Helvetica, sans-serif;
>         font-style: italic}
> 
> .match {  background-color: "#FFFF00"; font-weight: bold; color: #0000CC}
> 
> .newshead {font-family: Arial, Helvetica, sans-serif;
>        font-weight: bold; color: black;
>        background-color: #FFFFCC;
>        font-size: 14pt;
>        font-style: italic}
> 
> .newsitem {font-family: Arial, Helvetica, sans-serif;
>        font-size: x-small;
>        color: Black;
>        font-style: normal}
> 
> .breadcrumbs { background-color: #FFFF33; font-size: <dtml-var font_size>;
>   font-weight: bold; color: blue;
>   font-family: Arial, Helvetica, sans-serif;
>         font-style: italic}
> 
> <dtml-comment> Outdoor Activities Styles</dtml-comment>
> 
> .OAA { background-color: green; font-size: 20pt;
>   font-weight: bold; color: gold;
>   font-family: Arial, Helvetica, sans-serif;
>         font-style: italic}
> 
> .OAAmenuhead { background-color: #8E6B23; font-size: 11pt;
>   font-weight: bold; color: gold;
>   font-family: Arial, Helvetica, sans-serif;
>         font-style: italic}
> 
> .menus { font-size: <dtml-var font_smaller>}
> </style>
> 

Now wait a minute. You're linking to this CSS file not inlining it? Then
you need to omit the <style></style> tags. They are HTML tags. They do
not belong in a CSS file.

-- 
| Casey Duncan
| Kaivo, Inc.
| cduncan@kaivo.com
`------------------>