CSS Link styles - need help! 2

[GregTheGeek]

I am wondering if I can make links behave differently on the same page. I have different classes for links that appear along the left of the screen and for those in the main body. I want the links on the left to never show any text decoration and the ones in the main body to show the decoration I have already specified (strike-through on visited links, etc.)

Here's the page in question:

http://tranquilitybase.homeip.net/glbpublic.asp

Any help would be appreciated! I have included my CSS below

	A
	{
		text-decoration: none;
	}
	A:hover
	{
		text-decoration: underline;
	}
	A:visited
	{
		text-decoration: line-through;
		color: blue;
	}
	
	
	table, TD, TH, P
	{
		border-collapse: collapse;
		border-color: dimgray;
		color: LightGrey;
		font-size: x-small;
		
	}
	DIV.main
	{
		left: 350px;
		position: absolute;
		
	}
	DIV.left
	{	
		left: 200px;
		width: 150px;
		position: absolute;
		
		height: 100%;
		background-color: black;
	}

	DIV.ltentry
	{
		font-size: smaller;
		padding-bottom: 4pt;
		margin: 3px 3px 3px 10px;
		color: black;
		padding-top: 4pt;
		font-family: Verdana, Arial;
		text-decoration: none;
	}

	DIV.lttitle
	{
		font-size: larger;
		color: gainsboro;
		border-bottom: thin solid;
		font-family: Verdana;
		letter-spacing: 7px;
	}

Hope this helps!

GTG

 

[Vragabond]

First, pseudo classes (hover, visited, active, etc.) have to be specified in correct order to work properly. This order is:
link
visited
(focus)
hover
active
Focus is a new pseudo class and is not widely supported. Second, if you want links with special class behave differently, just add that declaration to your css:

    a.ltentry
    {
        text-decoration: none;
    }
    a.ltentry:visited
    {
        text-decoration: line-through;
        color: blue;
    }
    a.ltentry:hover
    {
        text-decoration: underline;
    }

This will apply the rules only to links with a class of "ltentry". Based on your page structure, another option is available to you, assigning to descendant elements:

    div.left a
    {
        text-decoration: none;
    }
    div.left a:visited
    {
        text-decoration: line-through;
        color: blue;
    }
    div.left a:hover
    {
        text-decoration: underline;
    }

This will affect all links within a div with a class called "left". Hope it sheds some light.

 

[BillyRayPreachersSon]

Add this to your CSS:

	DIV.ltentry A, DIV.ltentry A:visited
	{
		text-decoration: none;
	}

You can probably remove the "text-decoration: none;" from the "DIV.ltentry" CSS.

Incidentally, you might want to consider adding a valid DOCTYPE and validating your page - there are many errors on it.

Hope this helps,
Dan