Link effects question in CSS 3

[GiffordS]

Just when I thought I was beginning to understand this stuff....

I am having a problem getting link effects to work properly. Here is my CSS.....

#bar 
{
position: relative;
margin-top: 10px;
width: 800px;
height: 75px;
float: center;
background-color: #a3b2d9;
}

.bar a:link {text-decoration: none; color:#20449a;}
.bar a:visited {text-decoration: none; color:#000000;}
.bar a:active {text-decoration: none; fcolor:#fffa00;}
.bar a:hover {font-size: 12; text-decoration: underline overline; color: #fffaoo}

And here is the html

<div id="nbar"><table border="0" cols="4" width="100%" cellpadding="1" cellspacing="1">
<tr><td width="100%" colspan="4" align="center">
<marquee scrollAmount="9" scrollDelay="125" width="600" bgColor="#a3b2d9" height="18" style="color:#fffa00;">
Marquee text</marquee></td></tr>
<tr><td width="25%" align="center"><a href="link.htm">link text</a></td>
<td width="25%" align="center"><a href="link.htm">link text</a></td>
<td width="25%" align="center"><a href="link.htm">link text</a></td>
<td width="25%" align="center"><a href="link.htm">link text</a></td></tr>
<tr><td width="100%" colspan="4" height="3"></td></tr>
<tr><td width="25%" align="center"><a href="link.htm">link text</a></td>
<td width="25%" align="center"><a href=".php">Blank</a></td>
<td width="25%" align="center"><a href=".php">Blank</a></td>
<td width="25%" align="center"><a href="more.htm">More Searches</a></td></tr></table></div>

The only effect that seems to work is that the links are not underlined. Any help would be appreciated.

 

[Vragabond]

AFAIK, you cannot have two declarations within the text-decoration -- it needs to be either underlined or overlined, not both. Apart from that:

1. Your links apply to anchors within the element with a class of bar. There is no such element in your example html.
2. Your order of pseudo classes is wrong. It needs to be: :link, :visited, :focus, :hover, :active. Of course, the ones you do not care about, you can skip.
3. Your font-size has no units. 12 what is it on hover?
4. You don't need to repeat the declarations that do not change. They will be inherited.

 

[GiffordS]

Vrag....

I got the idea for the underline and overline in the same declaration from a tutorial...

http://www.echoecho.com/csslinks.htm.

It appears to work on that page at least.

I did make a mistake in the html code that I pasted and you were correct in pointing out that there was no "bar" division. I copied from the wrong source. The one I'm using does have a "bar" division, and the CSS still doesn't work, but it was a great catch on your part anyway.

I fixed the order to LoVeHAte, and added the size declaration for the font... both great catches on your part as well and I thank you for pointing them out. Unfortunately, it still doesn't work. I'll post the corrected CSS and HTML again in hopes that something else jumps out to either you or anyone else.

CSS

#bar 
{
position: relative;
margin-top: 10px;
width: 800px;
height: 75px;
float: center;
background-color: #a3b2d9;
font-family: verdana;
font-size: 10px;
}

.bar a:link {
text-decoration: none; 
color: #20449a;
}
.bar a:visited {
text-decoration: none; 
color: #000000;
}
.bar a:hover {
font-size: 12px; 
text-decoration: underline overline; 
color: #fffaoo;
}
.bar a:active {
text-decoration: none; 
color: #fffa00;
}

HTML

<div id="bar"><table border="0" cols="4" width="100%" cellpadding="1" cellspacing="1">
<tr><td width="100%" colspan="4" align="center">
<marquee scrollAmount="9" scrollDelay="125" width="600" bgColor="#a3b2d9" height="18" style="color:#fffa00;">
Marquee text</marquee></td></tr>
<tr><td width="25%" align="center"><a href="link.htm">link text</a></td>
<td width="25%" align="center"><a href="link.htm">link text</a></td>
<td width="25%" align="center"><a href="link.htm">link text</a></td>
<td width="25%" align="center"><a href="link.htm">link text</a></td></tr>
<tr><td width="100%" colspan="4" height="3"></td></tr>
<tr><td width="25%" align="center"><a href="link.htm">link text</a></td>
<td width="25%" align="center"><a href=".php">Blank</a></td>
<td width="25%" align="center"><a href=".php">Blank</a></td>
<td width="25%" align="center"><a href="more.htm">More Searches</a></td></tr></table></div>

 

[GiffordS]

I'm wondering if this has anything to do with the way I call the division.....

If I use <div class="bar"> then I get some of the link formatting but I lose all of the division formatting. When I use <div id="bar"> I get the division layout exactly according to the CSS but I lose all link formatting. Could this be part of the problem?

 

[GiffordS]

Ok, at the risk of feeling like I'm talking to myself here...

I changed the .bar on the link formatting to #bar re: my post a few minutes ago and that fixed almost everything. I get the underline and overline now, but the link colors don't change. So strictly from that link color standpoint.... any ideas?

 

[vacunita]

Thats probably because there is no such color as
#fffaoo I think you want fffa[red]00[/red]. They are supposed to be Zeroes no O's.



----------------------------------
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.

 

[traingamer]

your color is #fffaoo should be

#fffa00

- just chars instead of numbers

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[GiffordS]

Dead on guys... thanks for noticing that. Stars all around and thanks for your help.

 

[vacunita]

Glad to have helped

----------------------------------
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.