CSS not working

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I am trying to help a client with FrontPage 2003 who is using style sheets.
He has one set up and when I look at the page in design view it looks fine
with the right font. But through IE or using the preview button in FP the
font changes. Any ideas where to look for errors. It worked fine a few days
ago supposedly and nothing has changed.

Thanks,
Carla
 
That's tough. Is there anywhere you can upload it and its associated CSS?

I suppose you could paste it into a reply here.
 
I don't have a place to post it, but here it is. Hope this works. Thank you!

*****Style Sheet*****
<style>
..date {
FONT-SIZE: 9px; COLOR: #ffff00; LINE-HEIGHT: 2em; FONT-FAMILY: arial
}

body{scrollbar-face-color: #A8F0A8; scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color:
#000000;scrollbar-track-color: #FFFFFF;}

SPAN.searchword {
background-color: yellow;
}

..buttonOn {
color:{color:#000000; background:#A8F0A8
}

TD {
FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none
}

..hnfirstline {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none
}

..hnheadline {
FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial
}

..hnsource {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #6f6f6f; FONT-FAMILY: arial
}

A:link {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: none
}

A:visited {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: none
}

A:active {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: none
}

A:hover {
FONT-SIZE: 12px; COLOR: #429E63; FONT-FAMILY: arial; TEXT-DECORATION:
underline
}

A.main:link {
FONT-SIZE: 12px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main:visited {
FONT-SIZE: 12px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main:active {
FONT-SIZE: 12px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main:hover {
FONT-SIZE: 12px; COLOR: #ff0000; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: underline
}

A.main2:link {
FONT-SIZE: 11px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main2:visited {
FONT-SIZE: 11px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main2:active {
FONT-SIZE: 11px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main2:hover {
FONT-SIZE: 11px; COLOR: #ff0000; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: underline
}

A.header:link {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.header:visited {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.header:active {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.header:hover {
FONT-SIZE: 11px; COLOR: #429E63; FONT-FAMILY: arial; TEXT-DECORATION: bold,
underline
}

A.sidebar:link {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.sidebar:visited {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.sidebar:active {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.sidebar:hover {
FONT-SIZE: 12px; COLOR: #429E63; FONT-FAMILY: arial; TEXT-DECORATION: bold,
underline
}

..mainhead {
FONT-SIZE: 16px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

..mainmid {
FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none
}

..mainbody {
FONT-SIZE: 15px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

..mainbodynormal {
FONT-SIZE: 15px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: none
}

..mainbody1 {
FONT-SIZE: 15px; COLOR: #663399; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

..footnote {
FONT-SIZE: 11px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: none
}

A.mainitem:link {
FONT-SIZE: 14px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.mainitem:visited {
FONT-SIZE: 14px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.mainitem:active {
FONT-SIZE: 14px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.mainitem:hover {
FONT-SIZE: 14px; COLOR: #429E63; FONT-FAMILY: arial; TEXT-DECORATION: bold,
underline
}

..mainitemnolink {
FONT-SIZE: 14px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}
</style>

*****WEB PAGE*****

<HTML><HEAD><TITLE>power of one - home</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="css/default.css">
<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico">
<META content="Microsoft FrontPage 6.0" name=GENERATOR>
</HEAD>
<BODY bgColor=#FFFFFF leftMargin=0 topMargin=0>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="100%">
<tr>
<td width="25%" rowspan="2" valign="bottom">
<img border="0" src="images/logoleft.gif" alt="power of one - the power
of everyone" width="300" height="66"></td>
<td width="25%" rowspan="2"> </td>
<td width="25%" rowspan="2">
<img border="0" src="images/logomiddle.gif" alt="LG&E Energy & IBEW Local
2100" width="245" height="66"></td>
<td width="25%" bgcolor="#CECFCE" height="21">
<DIV align=center>
<font size=2>

<a class=header target=_top
href="http://intranet1.lgeenergy.com/powerofone/">
Home</a>
<a class=header target=frmMain
href="http://intranet1.lgeenergy.com/powerofone/search.htm">Search</a>
<A class=header target=_top
href="http://lgeintranet.lgeenergy.com/home/">net<B><I>work</I></B>Home</A>
</font>
</DIV>

</td>
</tr>
<tr>
<td width="25%" valign="bottom">
<img border="0" src="images/logoright.gif" width="285" height="45"></td>
</tr>
</table>
<TABLE cellSpacing=0 cellPadding=0 width=100% border=0>
<TBODY>
<TR>
<TD vAlign=top align=left width="314">
<SCRIPT language=JavaScript1.2 src="script/coolmenus3.js">
/*****************************************************************************
Copyright (c) 2001 Thomas Brattli (www.bratta.com)

eXperience DHTML coolMenus - Get it at www.bratta.com
Version 3.02
This script can be used freely as long as all copyright messages are
intact.
******************************************************************************/
</SCRIPT>

<SCRIPT>

function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion; this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 ||
this.opera5 || this.dom)
return this
}
var bw=new lib_bwcheck()

var mDebugging=2

oCMenu=new makeCoolMenu("oCMenu")
oCMenu.useframes=1
oCMenu.frame="frmMain"
oCMenu.useclick=0
oCMenu.useNS4links=1
oCMenu.NS4padding=2
oCMenu.checkselect=0
oCMenu.offlineUrl="file:///C|/corporate_site/"
oCMenu.onlineUrl="http://intranet1.lgeenergy.com/finadmin"
oCMenu.pagecheck=1
oCMenu.checkscroll=1
oCMenu.resizecheck=1
oCMenu.wait=200
oCMenu.usebar=0
oCMenu.barcolor="#999999"
oCMenu.barwidth="100%"
oCMenu.barheight="100%"
oCMenu.barx=0
oCMenu.bary=0
oCMenu.barinheritborder=0
oCMenu.rows=1
oCMenu.fromleft=0
oCMenu.fromtop=66
oCMenu.pxbetween=0
oCMenu.menuplacement="left"
//TOP LEVEL PROPERTIES - ALL OF THESE MUST BE SPESIFIED FOR LEVEL[0]
oCMenu.level[0]=new Array()
oCMenu.level[0].width=110
oCMenu.level[0].height=25
oCMenu.level[0].bgcoloroff="FFFFFF"
oCMenu.level[0].bgcoloron="#A8F0A8"
oCMenu.level[0].textcolor="#429E63"
oCMenu.level[0].hovercolor="#000000"
oCMenu.level[0].style="padding:4px; font-family:arial; font-size:12px;
font-weight:bold"
oCMenu.level[0].border=1
oCMenu.level[0].bordercolor="A8F0A8"
oCMenu.level[0].offsetX=0
oCMenu.level[0].offsetY=0
oCMenu.level[0].NS4font="arial"
oCMenu.level[0].NS4fontSize="2"
oCMenu.level[0].clip=0
oCMenu.level[0].clippx=0
oCMenu.level[0].cliptim=0
oCMenu.level[0].filter=0
oCMenu.level[0].align="bottom"
//EXAMPLE SUB LEVEL[1] PROPERTIES - You have to spesify the properties you
want different from LEVEL[0] - If you want all items to look the same just
remove this
oCMenu.level[1]=new Array() //Add this for each new level (adding one to the
number)
oCMenu.level[1].width=oCMenu.level[0].width-2
oCMenu.level[1].height=25
oCMenu.level[1].bgcoloroff="#FFFFFF"
oCMenu.level[1].bgcoloron="#FDF01C"
oCMenu.level[1].style="padding:3px; font-family:arial; font-size:12px;
font-weight:bold"
oCMenu.level[1].align="bottom"
oCMenu.level[1].offsetX=-5
oCMenu.level[1].offsetY=0
oCMenu.level[1].border=1
oCMenu.level[1].bordercolor="#A8F0A8"
//EXAMPLE SUB LEVEL[2] PROPERTIES - You have to spesify the properties you
want different from LEVEL[1] OR LEVEL[0] - If you want all items to look the
same just remove this
oCMenu.level[2]=new Array() //Add this for each new level (adding one to the
number)
oCMenu.level[2].width=150
oCMenu.level[2].height=25
oCMenu.level[2].bgcoloroff="#FFFFFF"
oCMenu.level[2].bgcoloron="#CCCCCC"
oCMenu.level[2].style="padding:3px; font-family:arial; font-size:12px;
font-weight:bold"
oCMenu.level[2].align="bottom"
oCMenu.level[2].offsetX=0
oCMenu.level[2].offsetY=0
oCMenu.level[2].border=1
oCMenu.level[2].bordercolor="#A8F0A8"
oCMenu.level[2].NS4font="arial"
oCMenu.level[2].NS4fontSize="1"



oCMenu.makeMenu('top1','','<center>news
bulletins</center>','newsBulletins.htm','frmMain','90',0)

oCMenu.makeMenu('top2','','<center>f a q</center>','faq.htm','frmMain','90',0)

oCMenu.makeMenu('top3','','<center>locale</center>','locale.htm','frmMain','90',0)
oCMenu.makeMenu('sub30','top3',' KU','localeKU.htm','frmMain',100,0)
oCMenu.makeMenu('sub31','top3',' LG&E','localeLGE.htm','frmMain',100,0)
oCMenu.makeMenu('sub32','top3',' WKE','localeWKE.htm','frmMain',100,0)

oCMenu.makeMenu('top4','','<center>calendar</center>','calendar/default.asp','frmMain','90',0)

oCMenu.makeMenu('top5','','<center>forms</center>','forms.htm','frmMain','90',0)

oCMenu.makeMenu('top6','','<center>gallery</center>','gallery.htm','frmMain','90',0)

oCMenu.makeMenu('top7','','<center>committee</center>','committee.htm','frmMain','90',0)

oCMenu.makeMenu('top8','','<center>volunteer</center>','volunteer.htm','frmMain','90',0)

oCMenu.makeMenu('top9','','<center>contact
us</center>','contactUs.htm','frmMain','90',0)

//Leave these two lines! Making the styles and then constructing the menu
oCMenu.makeStyle(); oCMenu.construct()
</SCRIPT>

<script language="JavaScript">window.defaultStatus = "power of one";</script>

</TD></TR></TBODY>

</TABLE>
</BODY>
</HTML>
 
Here's your error - the stylesheet cannot have HTML in it. Remove the
<style> and </style> tags, and it'll work. In addition, I have placed other
comments inline below -

<style>
..date {
FONT-SIZE: 9px; COLOR: #ffff00; LINE-HEIGHT: 2em; FONT-FAMILY: arial
}

/* it's best to use more than one font in a font-family style. That way the
browser has some default choices */

body{scrollbar-face-color: #A8F0A8; scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color:
#000000;scrollbar-track-color: #FFFFFF;}

/* depending on your page's doctype, this style may fail, since the
scrollbar belongs to the html tag, not the body tag in standards mode */

SPAN.searchword {
background-color: yellow;
}

..buttonOn {
color:{color:#000000; background:#A8F0A8
}

/* there's an extra brace in there after the word color:! */

TD {
FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none
}

..hnfirstline {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none
}

..hnheadline {
FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial
}

..hnsource {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #6f6f6f; FONT-FAMILY: arial
}

A:link {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: none
}

A:visited {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: none
}

A:active {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: none
}

A:hover {
FONT-SIZE: 12px; COLOR: #429E63; FONT-FAMILY: arial; TEXT-DECORATION:
underline
}

A.main:link {
FONT-SIZE: 12px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main:visited {
FONT-SIZE: 12px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main:active {
FONT-SIZE: 12px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main:hover {
FONT-SIZE: 12px; COLOR: #ff0000; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: underline
}

/* while this works, a much better method is to use ".main a" to hit them
all, and then ".main a:hover" for the hover pseudo-class specificially. In
this case, you would only need to style the container for these links, e.g.,

<table class="main"...

rather than each individual link */

A.main2:link {
FONT-SIZE: 11px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main2:visited {
FONT-SIZE: 11px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main2:active {
FONT-SIZE: 11px; COLOR: #0000ff; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: none
}

A.main2:hover {
FONT-SIZE: 11px; COLOR: #ff0000; LINE-HEIGHT: 1.6em; FONT-FAMILY: arial;
TEXT-DECORATION: underline
}

A.header:link {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.header:visited {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.header:active {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.header:hover {
FONT-SIZE: 11px; COLOR: #429E63; FONT-FAMILY: arial; TEXT-DECORATION: bold,
underline
}

A.sidebar:link {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.sidebar:visited {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.sidebar:active {
FONT-SIZE: 12px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.sidebar:hover {
FONT-SIZE: 12px; COLOR: #429E63; FONT-FAMILY: arial; TEXT-DECORATION: bold,
underline
}

/* see my comments above */

..mainhead {
FONT-SIZE: 16px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

..mainmid {
FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none
}

..mainbody {
FONT-SIZE: 15px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

..mainbodynormal {
FONT-SIZE: 15px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: none
}

..mainbody1 {
FONT-SIZE: 15px; COLOR: #663399; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

..footnote {
FONT-SIZE: 11px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: none
}

A.mainitem:link {
FONT-SIZE: 14px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.mainitem:visited {
FONT-SIZE: 14px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.mainitem:active {
FONT-SIZE: 14px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}

A.mainitem:hover {
FONT-SIZE: 14px; COLOR: #429E63; FONT-FAMILY: arial; TEXT-DECORATION: bold,
underline
}

..mainitemnolink {
FONT-SIZE: 14px; COLOR: #5E5B5B; FONT-FAMILY: arial; TEXT-DECORATION: bold
}
</style>
 
This was his reply. Sorry for all the trouble and big thanks for all the help.

I am confused. I don't think I put any <style> tags in my css, but for some
reason the system must have added it. I removed it, and it still wont' work.
What about the double dots in front of a style (e.g.: ..date). Should I put
... in front of every style?
 
Definitely no double dots. I had missed that in your earlier stylesheet.

You probably cut this stylesheet out of an existing HTML page, and
inadvertantly cut the style tags (yeah, that's the ticket!).
 
Thanks Murray. I found an oddity. This thing works fine if you preview in an
older version of frontpage and this same document worked fine on Monday. Do
you think it could be server related?
 
Back
Top