Apply link style to a specific css font 2

[fauntleroy]

Hello there,

I tried adding my css link styles directly to a template page of a site, but I found that the Spry menu inherited the link style of the pages in IE6 (and only IE6). I then removed the link styles from the page and placed it on the external css style sheet, but it kept happening. I believe I need to give the specific font the link attributes, but I'm uncertain how to assemble the code correctly.

I'm trying to figure it out from web tutorials but I'm struggling. Is it possible someone could tell me how to make the snippets I have below come together to achieve this?

Thanks very much.

I WOULD LIKE TO APPLY THESE ATTRIBUTES ...

a:link {
color: #330066;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #330066;
}
a:hover {
text-decoration: none;
color: #336699;
}
a:active {
text-decoration: none;
color: #330066;
}


TO THIS FONT ...

.BottomMenuText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999999;

}


ON THIS STYLE SHEET ...

@charset "ISO-8859-1";
.bodytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
list-style-image: url(images/curser1.gif);
line-height: 19px;
margin-left: 10px;
margin-right: 10px;
}
.bluelinktext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #330099;
}
.image_right {
clear: right;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
.blueheadtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 400;
color: #333399;
font-style: italic;
}
.bodyRed {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CB190D;
}
.bodytextblue {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #312563;
}
.BottomMenuText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999999;
}
#Table_01 {
background-image: url(images/parchment1.jpg);
height: 750px;
width: 757px;
position: center;
}
.RedHeaderText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FF6600;
margin-left: 12px;
margin-top: 222px;
font-weight: 400;
}
.greenheads {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #43AE42;
text-transform: uppercase;
padding-bottom: 8px;
padding-left: 12px;
}
.CreditTextSmall {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FBE9D1;
}
.image_right {
margin-top: 99px;
margin-bottom: 10px;
margin-left: 10px;
float: right;
clear: right;
padding: 77px;
}

 

[vacunita]

The correct syntax will depend on whether you links are located inside an element with the class of BottomMenuText, or if they themselves have the BottomMenuClass Applied to them.

In other words:
do they look like:

...
<a href="somepage.html" class="BottomMenuText">This is a Link</a>
...

or like:

<div class="BottomMenuText">
...
<a href="somepage.html">This is another link</a>
...
<div>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[fauntleroy]

Thanks Vacunita,

I guess the top example applies, although that row of text is wrapped inside a div tag I named "footer"? (the "l" in the code is used to divide each menu item).

<div id="footer">
<p align="center"><span class="BottomMenuText"><a href="../index.html">Home</a> l <a href="../who.html">Who We Are </a>l <a href="../how.html">How We Work</a> l <a href="../results.html">Results</a> l <a href="../services.html">Services</a> l<a href="../media.html"> Media &amp; Events</a> l<a href="../resources.html"> Resources</a> l <a href="../contact.html">Contact</a><br />
Green Edge&reg; is a registered trademark • Green Edge, LLC &copy;2008</span></p>
<!-- end #footer --></div>

The site is here

http://www.zavsays.com/GreenEdgewebsite9a/index.html

 

[vacunita]

I just used a div as an example, but any element applies such as the span surrounding your links.

So what you want to do is have the class name first, and then the link definitions.

[red].BottomMenuText[/red] a:link {
    color: #330066;
    text-decoration: none;
}
[red].BottomMenuText[/red] a:visited {
    text-decoration: none;
    color: #330066;
}
[red].BottomMenuText[/red] a:hover {
    text-decoration: none;
    color: #336699;
}
[red].BottomMenuText[/red] a:active {
    text-decoration: none;
    color: #330066;
}

Which reads: a Link inside an element with a class of BottomMenuText will get the following styles.

Links that are not inside an element with that class, will not be modified.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[fauntleroy]

I'm sorry to be so helpless with this and I'm very grateful for your help ... but are you saying that the code you've shown goes inside the span tags on the page itself? Does that mean it would go like this?...

<span class="BottomMenuText"><a href="../index.html">Home</a> l <a href="../who.html">Who We Are </a>l <a href="../how.html">How We Work</a> l <a href="../results.html">Results</a> l <a href="../services.html">Services</a> l<a href="../media.html"> Media &amp; Events</a> l<a href="../resources.html"> Resources</a> l <a href="../contact.html">Contact</a><br />
.BottomMenuText a:link {
color: #330066;
text-decoration: none;
}
.BottomMenuText a:visited {
text-decoration: none;
color: #330066;
}
.BottomMenuText a:hover {
text-decoration: none;
color: #336699;
}
.BottomMenuText a:active {
text-decoration: none;
color: #330066;
}</span>

--------------

Ideally, I was hoping to put that code on the external style sheet. There will be other link behaviors I'll like to apply throughout the body text of the site as well so I'd like to avoid coding each page for links if possible. But if this gets me through the menu text hurdle, I'll take it.

 

[traingamer]

No - he definitely meaant in an external style sheet (you can have more than one).

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[vacunita]

traingamer is right, just add it to your existing style sheet. Nothing more.





----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[johnwm]

It is probably worth your time to have a look at

http://www.w3schools.com/css/default.asp

and

http://alistapart.com/topics/code

The first will get you familiar with the basics and you will get more detailed stuff from A List Apart

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[fauntleroy]

SUCCESS! Thanks so much guys. All the folks with IE6 on XP said the spry menu bar works now and so do the text links on the bottom of the site

http://www.zavsays.com/GreenEdgewebsite9b/index.html

To recap .... I removed the link behaviors from the Dreamweaver template. Then created a separate style sheet for the bottom menu text to reside. The only thing on that sheet is this...

@charset "ISO-8859-1";
.BottomMenuText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999999;
}.BottomMenuText a:link {
color: #330066;
text-decoration: none;
}
.BottomMenuText a:visited {
text-decoration: none;
color: #330066;
}
.BottomMenuText a:hover {
text-decoration: none;
color: #336699;
}
.BottomMenuText a:active {
text-decoration: none;
color: #330066;
}

And it's working. Perhaps I could have combined it all on one sheet, but that wasn't working in my case. Anyway, I'll take this solution and Run With It.

Thanks a bunch!