CSS Link color problems 1

[ecobb]

Hi, I'm fairly new to css and I'm having problems trying to get a navigation menu built for my site. I've been following this example:

http://www.alistapart.com/articles/horizdropdowns/

(Thanks to ChrisHunt for the link)
and I have everything working right for my menu, but I'm having a problem with my link colors. I want the links in my menu to be a different color than the links in the text of my pages, but for some reason the links in my menu are the same color as the links in my pages.

Here's the code for my menu:

ul {
	color: #FFF8DC;
	display: block;
	background-color=Maroon;
	font-size : 14px;
	text-decoration: none;
	font-family : Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
}
	
ul li {
	position: relative;
	}

ul li a {
	display: block;
	text-decoration: none;
	color: #FFF8DC;
	background:maroon;
	padding: 0px 0px 0px 2px;
	border: 1px solid #8B8B7A;
	border-bottom: 0;
}
	
ul li a:hover {
	color: Maroon;
	background-color=#C1C19C;
	text-decoration: none;
	}
	
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}
	
li:hover ul, li.over ul { 
	display: block; }

And here's the code for my "text" links:

a:link {
	color: blue;
	text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
	color: red;
}

Both of these are in the same style sheet. It seems that the color for my links always display blue until you visit the link. (the background colors are always right, just not the text of the link) After that, it displays correctly.

Can someone please tell my why I can't get the text color in my "ul li a" style to display correctly?

Thanks!



Hope This Helps!

Ecobb

"My work is a game, a very serious game." - M.C. Escher

 

[LTeeple]

define a class for your menu links link you did for ul and li:

in the code for your list menu links (that you want different)

<ul>
<li class="menulink">menu link</li>
<li class="menulink">menu link2</li>
</ul>



Cheers!
Laura

 

[Vragabond]

Defining a pseudo class link, :visited, etc. overrides your initial color for link). Just do one of the possible changes:

Solution 1:

ul li a[b][COLOR=blue]:link,
ul li a:visited[/color][/b] {
    display: block;
    text-decoration: none;
    color: #FFF8DC;
    background:maroon;
    padding: 0px 0px 0px 2px;
    border: 1px solid #8B8B7A;
    border-bottom: 0;
}

Solution 2:

a[s][COLOR=red]:link[/color][/s] {
    color: blue;
    text-decoration: none;
}

Hope it helps.

 

[ecobb]

Thanks Vragabond, that worked! I figured it would be something simple like that. And thanks to both of you for pointing out the pseudo class...I think I'm starting to get the hang of this stuff.




Hope This Helps!

Ecobb

&quot;My work is a game, a very serious game.&quot; - M.C. Escher

 

[ChrisHunt]

A refinement of Laura's suggestion would be to do this:

<ul class="menu">
  <li>menu link</li>
  <li>menu Link2</li>
</ul>

And define your rules as

ul.menu li {
   /* CSS rules here!
}

That way you don't have to put the class into every <li>. In fact you'd be sensible to put a class (or id) on your menu <ul> anyway, to ensure that the dropdown menu rules only apply to it. You never know, you might want to include a <ul> in the body of your page somewhere, and you don't want it picking up all those menu rules.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[LTeeple]

To clarify Chris' suggestion, as well as my own:

The reason I added the class into every LI tag is because Netscape 4.0x (yuk, I know) oddly enough does NOT treat cascading style sheets as cascading! So while you specify the class on the UL, if you want the styles to visible on a Netscape 4.0x browser, you will need to apply them that way.

If Netscape 4.0x is not a browser choice of your end user, then of course, Chris' method is appropriate.


Cheers!
Laura

 

[ChrisHunt]

Good point Laura, I'm generally pretty cavalier about NS4 these days. My thinking is that it's so irretrievably messed up about CSS, and used by so few people, that you're better off ignoring it altogether.

Of course, if you're in an environment where it is being used - an intranet in a particularly luddite organisation perhaps - then you have to worry about such things.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk