[RESOLVED] Link effects question

[mwmwnmw]

Ok, I'm so not a design person. This one is driving me crazy as I can't figure out why it doesn't work. My HTML is sub par and my CSS is even worse. I'm basically a "make it work" guy stuck doing "make it pretty" stuff. Anyway, the effects that I'm looking for should be obvious from the css but the only effect it has on the look of the site is that it no longer underlines the links. Can someone explain this one to me?

The CSS:

.nbar {font-family: verdana; font-size: 10;}
.nbar A:link {text-decoration: none; color:#20449a;}
.nbar A:visited {text-decoration: none; color:#000000;}
.nbar A:active {text-decoration: none; fcolor:#fffa00;}
.nbar A:hover {font-size: 12; text-decoration: underline overline,color: #fffaoo}


and the html

<span class="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></span>


Is it the span? I don't know if I can use a table inside of a span, but when I tried putting the span inside individual table cells absolutely nothing happened. The links were actually underlined at that point. Mayday!!!

[toicontien]

Could very well be. If you want to encapsulate inline HTML tags, use a SPAN tag. In your case, use the block level DIV tag.

[WebJoel]

.nbar A:hover {font-size: 12; text-decoration: underline overline,color: #fffaoo}
huh? I do not recognize this. Does this do anything?

[mwmwnmw]

toi,

I actually have this span inside of a division name bar.

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


I didn't know that I could set font / link at the division level. If I change the .nbar to .bar will it then pick up those settings for the links and text as well?

[mwmwnmw]

fwiw....

I tried changing the class on the link stuff from .nbar to .bar. It picked up the font change but not the link change. I'm very confused.

[toicontien]

WebJoel picked out a CSS syntax error, the text-decoration: underline overline, ... The comma should be a semi colon. underline followed by overline should work, even if it's not valid ;) I used to do that myself. But the comman instead of a semi colon could be what's fouling things up in your original code.

[mwmwnmw]

Yes, that was an error. But unfortunately that was not the problem. It still picks up no link stuff at all. Links come in link blue and are underlined. I'm really up against a deadline here and completely lost. Any other thoughts?

[toicontien]

Did you try changing <span class="nbar"> to a DIV tag? That should be your next step. SPANs are inline. Inline elements can only contain inline elements, thus the block level DIV tag is what you want.

[mwmwnmw]

actually yes I did change the span to a div. I thought I said that. Anyway, it didn't work.

[Reli4nt]

I always thought active needed to follow hover. Could that be the problem or is that simply not true.

[toicontien]

Took another look at your code and have added a few things, aside from formatting to make it easier to read:

.nbar {
font-family: verdana, arial, helvetica, sans-serif; /* Added alternate fonts and generic font family */
font-size: 10px; /* Added missing 'px' unit of measure */
}

.nbar A:link {
text-decoration: none;
color: #20449a;
}

.nbar A:visited {
text-decoration: none;
color:#000000;
}

.nbar A:active {
text-decoration: none;
color:#fffa00; /* Removed an 'f' from in front of color */
}

.nbar A:hover {
font-size: 12px; /* Added missing 'px' unit of measure */
text-decoration: underline overline; /* Replaced errant ',' with ';' */
color: #fffaoo
}

Try this CSS to see if it changes anything.

[WebJoel]

.... It still picks up no link stuff at all. Links come in link blue and are underlined. ....

Yes. Maybe:
.nbar {font-family: verdana; font-size: 10;}
.nbar A:link {text-decoration: none; color:#20449a;}
.nbar A:visited {text-decoration: none; color:#000000;}
.nbar A:active {text-decoration: none; fcolor:#fffa00;}
.nbar A:hover {font-size: 12; text-decoration: underline overline,color: #fffaoo}

The correct order of pseudo-class is LVHA, not LVAH. Think "LoVe HAte". It has to do with whether or not you get the 'colors' in the correct order so that you are not getting, say "visited" color before you actually "visited", etc. I can't really explain more what this does, but I trust sources when I read that. Anyone?

Also, check your "active" color... "fcolor"??
(edit: opps. -I see toicontien found & posted before I did re: fcolor)

[mwmwnmw]

posting the current, and still non-functional 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;
}


and the 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>


Appreciate everyone's efforts so far, but there is something I'm just missing. Any ideas?

[toicontien]

ah, ya know what. I never noticed it before, but the DIV tag has id="bar" and your CSS for the links has .bar, which applies styles to a class called 'bar' not an Id called 'bar'. Change all those .bar's to #bar.

If that still doesn't work then you've got other CSS style declarations that are taking precedence over the ones for the menu.

[mwmwnmw]

toi....

You are almost THE MAN! Dead right on that and it fixed everything. Well, almost everything. The rest of the link stuff works but the colors don't change. Any ideas?

[mwmwnmw]

Forest? There's no forest here, I'll I see is a bunch of trees. Thanks for everyone's help... the final piece of the riddle was that I was using fffaoo as a color instead of fffa00. Thanks again for all of the input!

[toicontien]

Forest!!!? Wait... trees? Man. And all this time I wondered where those leaves came from :p