simple text rollover question

[Catlikemeow]

Hi there. Long time lurker, new poster.

I'm getting to know CSS decently, but the following isn't behaving like ( I think) it should, and I'm having a hell of a time figuring out why.

The page is http://www.3fortygrill.com/indexold.php , and the problem comes when the menu bar links are visited. They're supposed to go to white background/dark red text, but the text isn't changing. Here's the CSS involved, and I can't tell what's going on. Any help would be much appreciated.

Here's the html for that section

<td height=15 class="menu" align=right>
<a href="menu.php">menu</a> . 
<a href="contact.php">contact</a> . 
<a href="restaurant.php">location</a> . 
<a href="aboutus.php">about us</a> . 
<a href="lounge.php">lounge</a> .

</td>

and here's the CSS

 .menu {font-size:0.8em; color:#ffffff; background-color:#990000;}
.menu a:link{color:#ffffcc;  font-weight: bold; text-decoration:none;}
.menu a:hover{color:#990000; font-weight: bold; text-decoration:none; background-color:#ffffff}
.menu a:visited{color:#ffffcc;  font-weight: bold; text-decoration:none;}
.menu a:active{color:#ffffcc;  font-weight: bold; text-decoration:none;}
A:link{color:#990000;  font-weight: bold; text-decoration:underline}
A:visited{color:#990000; font-weight: bold; text-decoration:underline}
A:active{color:#990000; font-weight: bold; text-decoration:underline}
A:hover{color:white; font-weight: bold; text-decoration:none; background-color:#990000}

Thanks a bunch.

And if you're interested/live near Hoboken, NJ, the place holder page is at http://www.3fortygrill.com . Raw bar, martini lounge, great seafood. Whoo hoo.

[ComputerBob]

I think this will solve your problem:

Take "class="menu" out of the td and put it inside each link, like this:

<a href="menu.php" class="menu">menu</a>
<a href="contact.php" class="menu">contact</a>

etc.

Then change your CSS like this:

a.menu:link {blah, blah}
a.menu:hover {blah, blah}
a.menu:visited {blah, blah}
a.menu:hover {blah, blah}

[Catlikemeow]

Hmm. I'll try that, but I want to figure out why some of the changes work for the menu links, and some don't. Regular a hover has maroon background and white text, but menu text is always going to be on a dark background, so I want the hover to be of white (or another light color) background, and maroon text, which is, I think, what the css is saying. But it doesn't seem to be cooperating. I'd usually just keep reconstructing it from scratch till something worked, but I'd like to figure out why it's doing this. And I'm trying to get a demo of the site up by friday.

All I'm trying to do is something like this page, where the links on lighter backgrounds are blue->orange and on the darker are white->orange

[blufive]

The menu class is fine where it is, I think. It's less typing like that, and the selectors in the existing style sheet ought to pick it up just fine.

Next, sort the link pseudo classes into the order link, visited, hover, active, like this:

.menu a:link{...}
.menu a:visited{...}
.menu a:hover{...}
.menu a:active{...}

If the order is different, strange things can happen - as you're seeing. If they're in the order you've given above (link, hover, visited, active) the "visited" style will override the "hover" style if both apply - which they probably will in your case, since you're the web author, and you've probably visited all pages in the site recently...

Once all that's done, your links should be turning red-on-white when you mouse over them. I'm not sure if that's what you want, but it looks like that's what you're trying to code.

[Catlikemeow]

Oh my god, thank you so much. That's one of those ridiculous little things that would have taken me hours to stumble upon. I really appreciate it.

[blufive]

No problem