CSS, Hyperlinks in FP2002

  • Thread starter Thread starter djgammel
  • Start date Start date
D

djgammel

We are using an external css which has specific attributes
for hyperlink text. The attributes for size, bold, font
type all work, however the color attribute is ignored. If
you set the hyperlink, select the css font, and then go
back into hyperlink view and select the Style tab, and
proceed to pick the color, that will make the hyperlink
text display the css color. However, that actually
inserts the Hex Equivalent into the code which defeats the
purpose of the css. There does not appear to be anything
wrong with the css--non hyperlink text picks up the font
color. I'm thinking there is some global setting that
needs to be modified?
Thanks for any help. Denise
 
By setting an in-line style in hyperlink properties, you are over riding your style sheet.



--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer
 
Here is the css code. Try
span.hyperlinksanseriftinieremerald and you'll see that
the attributes work, except for the color.

span.hyperlinksanserif {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #3333FF;
text-decoration: underline;
list-style-position: outside;
list-style-type: square;

}
span.normalsanserif {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none ;
list-style-position: outside;
list-style-type: square
}
span.hyperlinksanseriftiny {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #3333FF;
text-decoration: underline;
list-style-position: outside;
list-style-type: square;

}
span.normalsanseriftiny {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
list-style-position: outside;
list-style-type: square;

}
span.normalsanseriftitle {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 16pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
list-style : square outside;
}
span.normalserifoblique {
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
font-style: italic;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none
}
span.default
{
text-align:left;
font-family: Geneva, Arial, Helvetica, san-serif;
font-weight:normal;
font-style:normal;
text-decoration:none;
color:black;
font-size: 12pt;
line-height: normal;
font-variant: normal;
text-transform: none;
list-style-position: outside;
list-style-type: square;

}
span.notebullet {
color: #FFFFFF;
list-style-position: outside;
list-style-type: square;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none
}
span.notebulletblack {
color: #000000;
list-style-position: outside;
list-style-type: square;
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none
}
span.normalsanserifbold {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none ;
list-style-position: outside;
list-style-type: square
}
span.normalsanserifwhiteredback {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: none;
background-color: #FF0033
}

span.hyperlinksanserifwhitetiny {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: underline ;
list-style-position: outside;
list-style-type: disc
}

span.normalsanseriftitleblue {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 16pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #666699; text-decoration: none;
list-style : square outside;
}
span.normalsanserifsubtitleblue {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 14pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #666699;
text-decoration: none;
list-style : square outside;
}
span.normalsanserifsubtitlecoral {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 14pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #993333;
text-decoration: none;
list-style : square outside;
}

span.normalsanseriftinycoralbold {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #993333;
text-decoration: none
}
span.normalsanserifbluebold {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #666699;
text-decoration: none;
list-style : square outside;
}
span.normalsanserifteenzy {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 9px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none
}
span.normalsanserifobliquebold {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12pt;
font-style: italic;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none
}

span.normalsanserifnumbered {

font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none ;
list-style-position: outside;
list-style-type: decimal
}
span.normalsanserifsubtitle {

font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 14pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none ;
list-style-position: outside;
list-style-type: square
}
span.normalsanseriflettered {

font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none ;
list-style-position: outside;
list-style-type: lower-alpha
}
span.normalsanserifboldlettered {

font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none ;
list-style-position: outside;
list-style-type: lower-alpha
}
span.normalsanserifboldnumbered {

font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none ;
list-style-position: outside;
list-style-type: decimal
}

span.normalsanseriftinier {

font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000; text-decoration: none
}
span.hyperlinksanseriftinier {

font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #3300FF;
text-decoration: underline
}

span.hyperlinksanseriftinycobaltbold {

font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 9pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #3300CC;
text-decoration: underline;
list-style-position: outside;
list-style-type: square;
}

span.normalseriftitle {
font-family: "Times New Roman", Times, serif;
font-size: 18pt; f
ont-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none
}

span.normalsanserifobliqueunderscore {

font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12pt;
font-style: italic;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: underline
}

span.hyperlinksanseriftinieremerald {


font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #006600;
text-decoration: underline
}

span.hyperlinksanserifbold {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #3333FF;
text-decoration: underline;
list-style-position: outside;
list-style-type: square;
}

span..normalsanserifwhiteredback {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: none;
background-color: #FF0033
}

span.normalsanserifblueyellowback {
font-family: Geneva, Arial, Helvetica,
san-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #3333FF;
text-decoration: none;
background-color: #FFFF33
}
span.hyperlinkserifoblique {
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
font-style: italic;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #3300FF;
text-decoration: underline
}
span.normalsanseriftinybold {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal; line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none
}

span.hyperlinksanserifwhitetinybold {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: underline ;
list-style-position: outside;
list-style-type: square}
 
NOw you need to show me the HTML! 8) Can you give me a URI to the page?

By the way - is this a typo?

span..normalsanserifwhiteredback
-------^^^

Also, is that the ONLY CSS on the page?
 
Thanks for looking into this.
The "span..normalsanserifwhiteredback" is a typo! I fixed
it.

I can't give you the URI to the page because it is on our
staging web protected by a firewall. Here's code to a
test page. The normalsanserif style works fine. The text
hyperlink does pick up all attributes for the
hyperlinksanseriftinieremerald style, except the color.
However, as I was preparing this for you, the second time
I tried to put style on the text link, I actually do get
the green That's the first time ever. I tried several
times after that, but do not get green. I am really
confused now. I'm in "normal" view when I set the
hyperlink and apply the style font. Denise

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>hyperlink text problem</title>
<link rel="stylesheet" type="text/css"
href="Stylesheets/condensed.css">
</head>

<body>

<p><span class="normalsanserif"><span lang="en-us">The
</span>
<span class="hyperlinksanseriftinieremerald"><a
href="xstylesheetguide.htm">
hyperlink text</a></span> doesn't show up as green.&nbsp;
Why not?</span></p>
<p><span class="normalsanserif"><span lang="en-us">Try
again and it works</span></span><span
lang="en-us"><span class="normalsanserif"> </span><a
href="Xstatsindex.html">
<span class="hyperlinksanseriftinieremerald">text
hyperlink</span></a></span></p>
<p><span class="normalsanserif">Why<span lang="en-us">
</span></span>
<span lang="en-us"><span
class="hyperlinksanseriftinieremerald">
<a href="xtestdg.htm">did</a></span><span
class="normalsanserif"> that work, and
not now?</span></span><span
class="normalsanserif">&nbsp;<span lang="en-us">&nbsp; I
can see the difference in the code view, but the steps I
took were the same 2
steps, in the same order.&nbsp; Step one, in Insert
Hyperlink.&nbsp; Step 2,
select the style font.</span></span></p>
<p><span lang="en-us"><span class="normalsanserif">Try
again, </span>
<span class="hyperlinksanseriftinieremerald"><a
href="Xstatsindex.html">link</a></span><span
class="normalsanserif"> to different file.&nbsp; Can't get
the </span>
<span class="hyperlinksanseriftinieremerald"><a
href="xtestdg.htm">green</a></span><span
class="normalsanserif">!</span></span></p>

</body>
 
You have to apply the class to the hyperlink, not to the surrounding text.
Example:
<a href="somepage.htm" class="mystyle">link text</a>
or
<a href="somepage.htm"><span class="mystyle">link text</span></a>

Ron
 
I understand what you did, and it does work. Thank you.
However, I am trying to link and then apply css to the
linked text in Normal View, not HTML View. I'm writing
instructions for content providers who are not technicians
and don't want to go into the html. It seems FP puts the
code in the wrong place necessitating you to go into html
view and cut/paste the code correctly...do you know if
this is true? Denise
 
Change the CSS sheet to (example)

..myclass, .myclass a {
text-decoration: underline;
/*other attributes*/
}

The link should then inherit the attributes from the surrounding <span>
I use this technique with <td class="srt"><a href="page.htm>foo</a></td>,
but have never tried with a <span>.

Ron
 
Back
Top