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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Problems with A:Link

Status
Not open for further replies.
Jimuniguy

Jimuniguy

Technical User
Mar 6, 2002
363
GB
Hi,

Ok i cant get this to work. I want to use the class style, but the only way the ID tag will change is via the # style

Why? (Yes i know I have both ID and Class in the same tag, its just to save space here)

James

P.S. Here is the code:

Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head>
<META http-equiv=Content-Type content=&quot;text/html; charset=windows-1252&quot;>
<style type=&quot;text/css&quot;>

.Backgroundtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	color:#000000;
	text-align: justify;
}


#Links :link{
Color:#99CCFF;

}

#Links :vistied{
Color:#99CCFF;

}
#Links :hover{
Color:#99CCFF;
}

#Links :active{
Color:#99CCFF;
}
 


A.Backgroundtext{
Color:#CC0033;
}

A.Backgroundtext:link{
Color:#CC0033;
}

A.Backgroundtext:vistied{
Color:#CC0033;
}
A.Backgroundtext:hover{
Color:#CC0033;
}
A.Backgroundtext:active{
Color:#CC0033;
}</style>	 
</head>
<body bgcolor=#FFFFFF>
<a href=&quot;piccy&quot;><img src=&quot;../Images/piccy.gif&quot; width=186 height=70 border=0 style=&quot;position: absolute; visibility: visible; left: 10px; top: 10px;&quot;></a> 
<div id=&quot;links&quot; class=&quot;backgroundtext&quot; style=&quot;position: absolute; height: auto; width: auto; top: 10px; right: 10px;&quot;> 
  Links:<br>
  <a href=&quot;[URL unfurl="true"]http://mylink.com&quot;>Centre</a><br>[/URL]
  <a href=&quot;mylink.com&quot;>Library</a><br>
  Support<br>
  Address </div>
 
Sort by date Sort by votes
Hi,

Cos each there are links all over the page which have different classes attached, and hence they must retain the class styles.

I know it can be done, but i just got to work out why it aint working.

Cheers

James
 
Upvote 0 Downvote
Keep it simple is always best, it will save you many headaches in the end!! :)

Why have you set two different colours for the same class?
Also you have assigned 3 styles to one div, is there need for this? Two of them the id= and class= have conflicting info! If I am reading it right.

If it was me I would specify the basic style for all links, then specify the individual styles of links I wanted to appear differently. Keep it simple!!



É

endamcg-logo1b.gif

 
Upvote 0 Downvote
Hi,

Ok here it goes.

The A.Backgroundtext:whatever and #Links both have different colours because i was trying to see which one was working.

In the code on my page, i have either coded, but only the #Links version works.

Its complicated like this because I am designing to acessabilitity, not simplicity.

I have text later on which is just plain text, which also does not work with the A:backgroundtext:whatever fails still to work but the #Links works.

Anyone else?

Cheers

James
 
Upvote 0 Downvote
Well, looks like I will have to go with iTST idea and use the class bit of the A tag.

Rats, i thought I could just plonk the class in the Div tag and forget about it.

If anyone comes up with a better idea, tell moi!

Cheers

James
 
Upvote 0 Downvote
Yes, you can use classes if you want! You just need to fix the way you've used them in your CSS.
Instead of using &quot;A.backgroundtext:(whatever)&quot;, use: &quot;.backgroundtext A:(whatever)&quot;
This ordering tells the browser that the A tags need to be within your div that has the 'backgroundtext' class. The way you have it now says that the A tags themselves need to have the 'backgroundtext' class (which they don't--classes aren't inherited).
Also, make sure you keep the capatalization the same in your CSS as in your HTML.

One little note extra... You don't really need &quot;height:auto; width:auto&quot; set on your div unless you've made a CSS rule somewhere else that tells it to do otherwise. &quot;auto&quot; is the default of these properties in all browsers.

Hope this makes things easier for you! -----------------------
&quot;To the small part of ignorance that we arrange and classify we give the name 'knowledge'&quot; -- Ambrose Bierce
 
Upvote 0 Downvote
Hi,

Yes, i did notice that thanks Julianne.

Blue mango got it sorted, but putting .classname.a:whatever

Cheers

James
 
Upvote 0 Downvote
Make sure that's a space between .classname and A:whatever.. (you have a period in your last post) -----------------------
&quot;To the small part of ignorance that we arrange and classify we give the name 'knowledge'&quot; -- Ambrose Bierce
 
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
660
spamjim
spamjim
scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
321
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
340
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
270
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
300
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top