CSS - How To Work With A:link

Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css.

I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link.

but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions.

PHP code:
Code:

<?php

$block = ( is_front_page() ? 'h1' : 'div' );

// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable

?>

<?php echo "<$block class='blog-title'>"; ?>
	<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>

<p class="description"><?php bloginfo('description'); ?>


<ul id="menu">
   <li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
		 <li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
         <li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
         <li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>

CSS code:
Code:

#menu {
     list-style: none;
     padding: 0;
     margin: -105px 25px;
     width: 332px;
     height: 30px;
     background: url('images/menu.gif');
     position: relative;
}

	ul#menu li { width: 80px;
	            height: 30px;
				padding: 0 4px 0 0;
				text-indent: -900px;
				float: left;
				}

	ul#menu li.last { padding: 0; }

		ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }

			ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }	

			ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }

			ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }

			ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }

				ul#menu li#home a:hover { background-position: 0 -30px; }

				ul#menu li#archives a:hover { background-position: -84px -30px; }

				ul#menu li#news a:hover { background-position: -168px -30px; }

				ul#menu li#contact a:hover { background-position: -252px -30px; }

			.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }

			.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }

			.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }

			.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }

i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem.

thank you for any single suggestions and comments.

Hi,

I need some links to have a specific color.

a.ClassName:link works in FF but not in IE.

Is there are work-around?

PHP Code:
.chatlistmale, .chatlistfemale, .chatlistcouple {
    display: block;
    border: solid;
    border-width: 1px;
    width: 200px;
}

a.chatlistmale:link { background: #006699; }
a.chatlistmale:active { background: #006699; }
a.chatlistmale:visited { background: #006699; }
a.chatlistmale:hover { font-weight: bold; }

a.chatlistfemale:link { background: #FF0033; }
a.chatlistfemale:active { background: #FF0033; }
a.chatlistfemale:visited { background: #FF0033; }
a.chatlistfemale:hover { font-weight: bold; }

a.chatlistcouple:link { background: #00FF00; }
a.chatlistcouple:active { background: #00FF00; }
a.chatlistcouple:visited { background: #00FF00; }
a.chatlistcouple:hover { font-weight: bold; } 

Hey guys, When i apply a stylesheet to this page. http://jessup.oraclestudio.com.au/i...p?page=coporate the link on the left hand side 'Forensic Accounting' doesnt appear to work in IE but work fine with no style sheet. By not work i mean it gets styled but doesnt function as a link. any ideas ???

Code:

a:link {
	color: #333333;
	font-size: 11px;
}
a:hover {
	color: #333333;
	font-size: 11px;
}
a:visited {
	color: #333333;
	font-size: 11px;
}

Hey all,

So i have two files my html file:
Code:

 
<html>
<head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<a href="#">this is a test</a>

</body>
</html>

And my css file:
Code:

a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}

except that the styles don't work on the links. If i put the styles in <style> tags in the html head it works, but in a seperate file they don't, can someone help me?

thanks!
- legit


Edit, whoops sorry, I had the wrong name for my css file

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}