Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS issue with links

Status
Not open for further replies.
Guest_imported

Guest_imported

New member
Jan 1, 1970
0
Hi,

I am trying to apply style sheets to a link, like this

<a href=&quot; target=&quot;content&quot; class=&quot;MyClassFoo&quot;>Yahoo!!</a>

and the style sheet class is defined as

.MyClassFoo
{
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
TEXT-TRANSFORM: uppercase;
COLOR: #fdfdfd;
FONT-FAMILY: Arial, helvetica, sans-serif;
TEXT-DECORATION: none
}

However in reality the class is never invoked if the href attribute is included.

If I do this

<a target=&quot;content&quot; class=&quot;MyClassFoo&quot;>Yahoo!!</a>

then the class's style is applied.

Can anyone help? Thanks in advance.
 
Sort by date Sort by votes
What's probably happening is that the A:link rule is overriding the A.MyClassFoo rule. try changing your style declaration to this:
Code: 
A.MyClassFoo, A:link.MyClassFoo
{
   font-weight: bold;
   font-size: x-small;
   text-transform: uppercase;
   color: #fdfdfd;
   font-family: Arial, helvetica, sans-serif;
   text-decoration: none;
}
 
Upvote 0 Downvote
Thank you pcorreia. However that did not work. Neither did

A.MyClassFoo:link
{
font-weight: bold;
font-size: x-small;
text-transform: uppercase;
color: #fdfdfd;
font-family: Arial, helvetica, sans-serif;
text-decoration: none;
}

 
Upvote 0 Downvote
This works for me:

<html>
<head>
<title>Untitled</title>

<style>
.MyClassFoo
{
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
TEXT-TRANSFORM: uppercase;
COLOR: #fdfdfd;
FONT-FAMILY: Arial, helvetica, sans-serif;
TEXT-DECORATION: none
}
</style>

</head>
<body>
<a href=&quot; target=&quot;content&quot; class=&quot;MyClassFoo&quot;>Yahoo!!</a>
</body>
</html>

If the problem is due to an external/linked CSS, try using a.MyClassFoo
{
}
 
Upvote 0 Downvote
sweevo Thank you.

I got it working, however what i had to do was to remove the class from the <a> tag and move it up to teh <td> class and then it started working. I have no idea why.

Here's what worked for me.
<body>
<td class=&quot;MyClassFoo&quot;>
<a href=&quot; target=&quot;content&quot; Yahoo!!</a>
</td>
</body>
</html>

I was already using this inside a td so I just went up and added it.

Thanks everyone for looking at this, hopefully this will help someone else.
 
Upvote 0 Downvote
try this plz

.MyClassFoo:link
{
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
TEXT-TRANSFORM: uppercase;
COLOR: #fdfdfd;
FONT-FAMILY: Arial, helvetica, sans-serif;
TEXT-DECORATION: none
}
.MyClassFoo:hover
{
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
TEXT-TRANSFORM: uppercase;
COLOR: #fdfdfd;
FONT-FAMILY: Arial, helvetica, sans-serif;
TEXT-DECORATION: none
}
.MyClassFoo:visited
{
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
TEXT-TRANSFORM: uppercase;
COLOR: #fdfdfd;
FONT-FAMILY: Arial, helvetica, sans-serif;
TEXT-DECORATION: none
}
<a target=&quot;content&quot; class=&quot;MyClassFoo&quot;>Yahoo!!</a> ....:::::.... xxLargeWASP ....:::::....
 
Upvote 0 Downvote
This is just a guess: remove the semi-colon after the href declaration:

<a href=&quot; target=&quot;content&quot; class=&quot;MyClassFoo&quot;>Yahoo!!</a>

That may be confusing the browser. There seems to be nothing else wrong with your code.
 
Upvote 0 Downvote
This thing now does not work in Netscape and I need it done there too. It applies the size and does the &quot;All Caps&quot;, if I turn it off I can see the effect. But it does not change the color. I have it for all types of <a> tags.

Any ideas? :-(
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
994
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
920
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
756
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
871
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top