CSS is inconsistent with my links?

[Mateo1041]

Hi everyone,

I recently put up a website and am stumped as to why CSS appears to be working with some links, yet not with others. All are defined as the same link class. Additionally, I can view the page just fine on some other computers.

When I say inconsistent, I mean that half the links are white and bold in their non-hover state whereas the other half aren't bolded and should be. Hovering works for all links.

The links I am talking about reside on the bottom of the page. The website is:

http://www.ClearlyCaring.com.

If I change the destination link on a non-working link to be the same destination as a working link, the CSS seems to then work.

The results are similar, although not the same in both Internet Explorer and FireFox.

Would this be a problem with my browser? I am using the latest versions of both IE and FireFox. Any help would be greatly appreciated. I've scoured the web and have found nothing. I'm pulling my hair out here.

Thanks,
- Matt.

 

[TheConeHead]

link does not work...

http://www.clearlycaring.com

 

[cLFlaVA]

Make sure you're following this exact order, as defined by the W3 standards:

[tt]a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */[/tt]

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

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

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[Mateo1041]

Sorry if the link is not working. It is a newly propogated domain name and it is also now being moved to a new server as well. I will post when it is back up again which should be in a few hours.

I will fix the link order as soon as our website is moved to the new server today. I've read about that, but have never had a problem before with switching around "hover" and "active" elements.

It is strange that it works just fine on some browsers, yet not on my own computer here. It is equally strange that only some links show the correct CSS, whereas others don't.

Thanks,
- Matt.

 

[ChrisHunt]

If I change the destination link on a non-working link to be the same destination as a working link, the CSS seems to then work.

Sounds to me like there's an unexpected [tt]a:visited[/tt] style being applied to one or other of the links then. It would also explain why other PCs (which have visited different pages) get a different look.

Try downloading the awsomely useful Web Developers' Toolbar for Firefox - it includes a function to tell you what styles are being applied to any element you click on. It's very useful for this sort of troubleshooting.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Mateo1041]

The

http://www.ClearlyCaring.com

website is back up at a permanent server location. I've tried downloading the FireFox utility, but everything looked just fine. I also tried making sure the link CSS code was in the correct order, but to no avail.

Here is what I'm seeing at the bottom:

http://www.clearlycaring.com/images/links.gif

Thanks for all your help so far. Sorry the website was down earlier.

- Matt.

 

[cLFlaVA]

You might think this is an odd request, but the first thing you should do is change them all to lowercase.

Here, I've done it for you:

Notice I also changed the a.menubar:visited style. Not sure what you want it to look like, but it was doing what it was supposed to, which was changing to the way you told it to.

body {
	font-size: 12px;
	font-family: arial
}

p {
	font-size: 12px;
	font-family: arial
}

p.header {
	font-weight: bold;
	font-size: 16px;
	font-family: verdana
}

td {
	font-size: 12px;
	font-family: arial
}

a:link {
	color: #0000ff; 
	text-decoration: underline
}

a:visited {
	color: #0000ff; 
	text-decoration: underline
}

a:hover {
	color: #6666ff; 
	text-decoration: underline
}
a:active {
	color: #0000ff; 
	text-decoration: underline
}

a.menubar:link {
	font-weight: bold; 
	font-size: 11px; 
	color: #ffffff; 
	text-decoration: none
}
a.menubar:visited {
	font-weight: bold; 
	font-size: 11px; 
	color: #ffcc33; 
	text-decoration: underline
}
a.menubar:hover {
	font-weight: bold; 
	font-size: 11px; 
	color: #ffcc33; 
	text-decoration: underline
}
a.menubar:active {
	font-weight: bold; 
	font-size: 11px; 
	color: #ffffff; 
	text-decoration: none
}

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[Vragabond]

Got one thing:

A.menubar:visited {
    font-size: 11[b][COLOR=red];[/color][/b]
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
}

There was a missing closing semi-colon after font size. That will usually render all css beyond this point as useless. Hope it will fix your problem.

 

[cLFlaVA]

Vragabond-

Additionally, CSS will not validate unless there is a unit of measurement:

font-size: 11[red]px[/red];


*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[Mateo1041]

That is exactly it, Vragabond. I hate bugs like that! Funny thing is that I stumbled upon the solution right before checking this post again. Sorry to bug you all. It now works.

Thanks everyone! This was getting very irritating.

- Matt.

 

[Vragabond]

cLFlaVA, of course. I have never used any sizes in CSS without proper units (though I prefer em for fonts) but I was just so thrilled to have found the error in that missing sem-colon, I didn't check the rest of the code.

 

[Mateo1041]

I must say too, you folks have been incredible. Within a few minutes of my initial post, I already had a couple responses. Thanks again! It is definitely appreciated.

- Matt.