CSS not cooperating id selectors and links

programming web dev
1

I’m going nuts… I cannot figure out why my links are not showing up how I want them to. The navigation links show up like the CSS tells it to, but the “link 1” and “link 2” have a mind of their own. I do not understand why they are not listening to CSS. link 1 and link 2 should be red, then become underlined on hover. Also the Test link in the middle section displays differently in Firefox vs IE. Any help is greatly appreciated!!

www.texasriptide.org

www.texasriptide.org/css/default.css

here is the css for link1 and link2

#left div.profile{
	text-align:center;
}
#left div.profile a:link, a:visited {
	font-size: 90%;
	line-height: 140%;
	color:#CC0000;
	text-decoration: none;
}
#left div.profile a:hover {
	color:#CC0000;
	text-decoration: underline;
}
#left div.profile a:active {
	color:#CC0000;
	text-decoration: underline;
}
2

Why dont you simplify your css. Not sure why the left div stuff is there is you are only controlling a ahref tag.



A {
regular link stuff here (default links)
}

A.hover {
regular link stuff here (default links)
}

A.visited {
regular link stuff here (default links)
}

A:profile {
profile link stuff here
}

A.hover:profile {
profile link stuff here
}

A.visied:profile {
profile link stuff here
}
3

Thanks, that works, but why doesnt my way. The reason I have the

#left div.profile

is so I can just do

<div id="left">
<div class="profile">
<a href="x">Yadda</a>
<a href="x">Yadda</a>
<a href="x">Yadda</a>
</div>
</div>

instead of having to do


<a href="x" class="profile">Yadda</a>
<a href="x" class="profile">Yadda</a>
<a href="x" class="profile">Yadda</a>

They both should accomplish the same thing in the end. I would still like to know why my way doesnt work.

4

I dont think your first example will work in any case, since the ahref tag will break the cascade. You can accomplish what you are trying programmatically but not the way you are trying. Actually let me think on it. It is late and my brain is fried.

5

Actually it does work. The section above that with the links "Home, Lessons, Teams … " was done using the same technique. Here is the CSS

#left div.nav a:link, a:visited {
	display: block;
	font-size: 90%;
	font-weight:bold;
	line-height: 140%;
	color:#000066;
	text-decoration: none;
}
#left div.nav a:hover {
	color:#336699;
	background-color: #CCCCCC;
}

This is why it is frustrating me. This works but not the profile links. Thanks for your help DDD