List Item css not working?

FancyPrairie · Dec 28, 2009

I've created a list of items but am having trouble highlighting the selected item. In the example below I've simplified what I'm attempting to do. In this simplified version I can't even get the active to work correctly. Anyway, when the user selects an item, I want to highlight the item selected. What am I doing wrong?

Code:

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head>
    <title>Untitled Page</title>

<STYLE type=text/css >

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
top: 0px;
}

a
{
color: magenta
}

a:link, a:visited
{
color: purple
}

a:hover
{
color: green
}

a:active
{
color: red:
}
a:selected
{
color: blue
}

</STYLE>
</head>
<body>
        <ul id="navigation" ><li value="0"><a  href="#" >
                <span>Requester</span></a></li>
            <li  value="1" ><a href="#" >
                <span>Contact</span></a></li>
        </ul> 
</body>
</html>

vacunita · Dec 28, 2009

1. You can't just invent pseudo-classes.

There's no such thing a an "A: selected" type for links.

2. Your active definition ends in a colon ":". Which effectively kills the definition as the browser has no idea what color "red:" is.

Remove that. Also its good practice to end all style definitions with a semicolon. Though not necessary when there's only one definition or its the last one in the style it is still suggested.

However, basically by removing the colon it should then work.

Note though that a link is only active when you are clicking on it. That is when you hold the mouse button down. As soon as you let go of it, it is no longer active.

----------------------------------
Phil AKA Vacunita
----------------------------------
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.

BillyRayPreachersSon · Dec 28, 2009

In a nutshell: Make sure your HTML and CSS validate before trying to debug problems. Many coding mistakes will only compound issues you're trying to solve.

You can validate your HTML here:

http://validator.w3.org/

and your CSS here:

http://jigsaw.w3.org/css-validator/

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

FancyPrairie · Dec 30, 2009

vacunita,

I had noticed the colon shortly after posting. Also, I had seen a:selected while doing research and had tried it with and without.

Anyway, could not get the css to work like I wanted and abandoned it for a jquery tab tool.

Thanks for your time.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

List Item css not working?

FancyPrairie

Programmer

vacunita

Programmer

BillyRayPreachersSon

Programmer

FancyPrairie

Programmer

Similar threads

Part and Inventory Search

Sponsor