CSS - A:link Color Problems

How do I get rid of the blue text and underline ??

Here is my style sheet

#page_content {
margin-left: 200px;
}

#container {
position: relative;
width: 100%;
}
#background
{
width: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background-color: #000000;
}
#testbox{
width: 100%;
height:100%;
position: relative;
}


#menu li{
display: inline;
text-transform: uppercase;
font-size: 1.1em;
line-height: 1.0em;
font-weight: bold;
padding: 0 10px 0 10px;
color: #FFFFFF;
text-decoration: none;

}
#data{
width: 190px;
height: 200px;
margin: 20px;
position: absolute;
bottom: 150px;
color: #FFFFFF;
font-size:1.3em;
}

Hi i am using to different styles to preview my links but i want when a link is being visited to return to his starting point.For example it is black and when is being visited i want it again when the second time the user come's to the page to see it black again.I tried a lot of methods but when i put the visited pseudo class it blocks and the the hover pseudo class is not working.Plz help

****the class that i have the problem is "boxes"

Code:

A:link {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:active {
	COLOR: #2094E1; TEXT-DECORATION: none
	}
A:visited {
	COLOR: #2094E1; TEXT-DECORATION: none
	}
A:hover {
	COLOR: #ffffff; TEXT-DECORATION: none
	}

TD {
	FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
		}
hr{
	color: #96A097;
	height: 0px;
	width: 150px;
}
#title{
	FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
	COLOR: #000000;
}
.mainbox{
	FONT-SIZE: 10px; COLOR: #727C8E;
	padding-top:5px;
	padding-bottom:3px;
	}
.boxes {
	FONT-SIZE: 10px; COLOR: #000000;
	padding-top:3px;
   padding-left:3px;
	padding-right:3px;
	padding-bottom:3px;	
	 }
.boxes a:link {
	FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:active {
	FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:hover {
	FONT-SIZE: 10px; COLOR: #FFFFFF;
}
.boxes a:visited {
	FONT-SIZE: 10px; COLOR: #000000;

Hi

I have a css file stating the following:
A:link { color: #71828A }
A:visited { color: #71828A }
A:active { color: #71828A }

... of course this is applied to the whole page.
I would like to set different link colors inside table data:

#BottomTable TD
A:link { color: #CCCCCC }

... but this doesnt work! Any ideas, please?

What is the best practice for giving an <a> a different color than the underline? Background image? <a><span></span></a>? Something else?

how do you define the the color of a hyperlink before it has been clicked and after it has been clicked?

Thanks.

I'm trying to create a hover effect that changes the background color behind a link, but instead of ending with the text, the color change extends to the width of the div.

It's hard to explain, so here's an example: checkout the sidebar at pastemagazine.com. I've tried dissecting their source code, but they have about 5 different stylesheets and it's really hard to follow.

As far as I can tell, this is what makes the hover effect and I just can't figure out how they make the background color change extend beyond the text. I have my links in a ul just as they do and they don't seem to be doing anything else special.

Code:

#sect1 ul.stories a:hover{
		background-color:#d9f7ff;
		color: #71808F;
	}

Thanks!
cae

Hi there,

I have an image rollover css script, but it will not understand a:active so is there a way I can use an inline a:active attribute?

Many thanks!

Hi all,
below is the code i have in my css, but from some reason my website is showing blue instead of yellow for links can you tell my why this is happening

ffff00 is suppose to be yellow, at least that is what Expression web 2 shows.

/* Sets the style for unvisited links. */
a, a:link {
color: #FFFF00;
text-decoration: underline;
font-weight: bold;
}


Do to forum rules i can't post my url, so i know it will be difficult to troubleshoot. but thanks, for all the help you can give me.

Bustersnm

The problem:
a link appears in the color i have set in IE, but in other (probably the default one) color in FireFox

the explanation of the situation:

attachment 1
that's how it looks in FireFox
attachment 2
that's how it looks in IE, and the way it should look!

cause that's the color i have set in the css file

here is the code from the css file
Code:

A {
	color: #D9E0EF;
	text-decoration: underline;
}

A:HOVER {
	color: #D9E0EF;
	text-decoration: none;
}

here is the code around the link from the screenshots
Code:

<p align="center"><b><font size="7"><a href="index.php?p=join/index">JOIN</a></font></b></p>

where may be the problem which doesn't allow to FireFox to see that there is set color for the links?

I have make css from page property and type a sample text and covert it into <a> tag as css <a> tag should come in green color bt it shows in purple color and i dont why please suggest asap as required for my institute.
thanks in advance
link is attached please check the css also
Code:

http://practice.zymichost.com/

I am trying (with no luck) in trying to add a style ( a link in another color and size) to the bottom of my page but I already have a a: link up top. I will post the code below:

a:link {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
padding-top: 4px;
text-decoration: none;

The "other" link I want to change below:

.freshlink {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-decoration: underline;
}
.freshlink a:link {color: #009900; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: underline;} .freshlink a:visited {color: #999999;}

thank you very much for any help on this.

/df

Hello, I am having a real problem with my template at URL ; when I preview the template it looks great but once i save it and publish it, the scrollbar doesn't appear lilac and the left margins on my posts are too close to the left. I really don't know how to arrange this, I am new to html and of course a newbie to css. So here I include the code and if someone can give me some help i will be really grateful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta name="author" content="SOUL" />
<meta name="dc.language" content="en" />
<meta name="copyright" content="This work is licensed under a
Creative Commons License. " />
<meta name="description" content="Looking back to the times of cotton fields, coffee engines... and chivalry" />
<meta name="keywords" content="SLAVE,SLAVERY,DOMINANT,DOMINANCE,EROTICA,INTERRACIAL" />




<title><$BlogPageTitle$></title>

<$BlogMetaData$>

<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: URL
Date: 26 Feb 2004
----------------------------------------------- */


body {scrollbar-base-color: #cc99ff;
background-color: #f5ecff;}

blockquote, p, h1, h3, .blogpost {font-family: "Trebuchet MS", arial, sans-serif;
font-size: normal; color: black;}

.outerborder {background-color: #f5ecff;
width: 285px;}
.menuheader {font-family: "Harrington", "Trebuchet MS", arial;
background-color: #e7d1fd;
color: black;
font-size: 18px;
font-weight: bold;
text-align: center;
border-color: #7d00be;
border-width: 1px;
border-style: dashed;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 3px;}

.menutext {background-color: #f5ecff;
font-size: 16px;
padding-top: 5px;
padding-left: 10px;}

h2 {font-family: "Harrington","Trebuchet MS", arial;}


.dateheader {background-color: #e7d1fd;
color: black;
text-align: left;
border-bottom: 1px dashed #7d00be;
border-top: 1px solid #7d00be;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 3px;}
.postinfo {font-style: italic;
font-weight: bold;
color: black;}

.contentcell {background-color: white;
width: 100%;
border-color: #7d00be;
border-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-top-width: 0px;}


a:link {color: #7d00be;
text-decoration: none;}

a:visited {color: mediumpurple;
text-decoration: none;}

a:active {color: #cc66ff;
text-decoration: none;}



a:hover {background-color: #cc99ff;
color: black;
text-decoration: none;}
a img {
border-width:0;
}
.blogpost {margin-left: 15px;
margin-right: 10px;}


blockquote {padding: 5px;
font-size: smaller;
border-color: #cc99ff;
border-width: 1px;
border-style: dashed;}




.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #fff;
padding-bottom:1.5em;
}
.comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.comment-link {
margin-left:.6em;
}
.post a {
font-weight:bold;
}
#comments h4 {
margin:1em 0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#774;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 0 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 0 2em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
</style>
</head>

<body>
<!-- You may add banner here. -->
<center>
<img border="0" src="http://www.passionatelove.net/title.JPG" width="385" height="300"><p id="description">
<font face="Antigoni"><$BlogDescription$></font></p>
<p id="description">&nbsp;<!-- Start FastOnlineUsers.com -->
<font face="Banjoman Open Bold">
<a href="http://www.fastonlineusers.com"><script src=http://fastonlineusers.com/online.php?d=www.unmerciful-tara.blogspot.com></script> online</a></font><!-- End FastOnlineUsers.com -->
</p>
<p>&nbsp;</p>
</center>
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>

<td valign="top" width="100%">
<!-- You may move banner here if needed. -->
<div class="contentcell">
<Blogger>
<BlogDateHeader><h2 class="dateheader"><font face="AucoinLight"><$BlogDateHeaderDate$></font></h2></BlogDateHeader>
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title" align="center">
<a href="<$BlogItemUrl$>" title="external link">
<BlogItemUrl></BlogItemUrl>
<font size="4" face="AucoinLight"><$BlogItemTitle$> </font>
<BlogItemUrl></BlogItemUrl>
</a>
</h3>
</BlogItemTitle>

<div class="post-body">
<p style="margin-left: 6">
<font face="Georgia" size="3">&nbsp;<$BlogItemBody$> </font>
</p>
</div>

<p class="post-footer">
<em><font face="Book Antiqua">&nbsp;posted by <$BlogItemAuthorNickname$> at
</font> <a href="<$BlogItemPermalinkUrl$>" title="permanent link">
<font face="Book Antiqua"><$BlogItemDateTime$></font></a></em><font face="Book Antiqua">
</font>
<MainOrArchivePage><BlogItemCommentsEnabled>

<a class="comment-link" href="<$BlogItemPermalinkURL$>#comments">
<font face="Book Antiqua"><$BlogItemCommentCount$> comments</font></a><font face="Book Antiqua">
</font>
</BlogItemCommentsEnabled></MainOrArchivePage> <font face="Book Antiqua"><$BlogItemControl$>
</font>
</p>

</div>
<!-- End .post -->



<!-- Begin #comments -->
<ItemPage>
<div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>
<h4><font size="2" face="Book Antiqua"><$BlogItemCommentCount$> Comments:</font></h4>
<dl id="comments-block">
<BlogItemComments>
<dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said...
</dt>
<dd class="comment-body">

<p><$BlogCommentBody$></p>
</dd>
<dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p class="comment-timestamp">

<$BlogItemCreate$>
</p>
</BlogItemCommentsEnabled>
<p class="comment-timestamp">
<a href="<$BlogURL$>"><< Home</a>
</p>
</div>

</ItemPage>

<!-- End #comments -->

</Blogger>
</div></div>
<!-- End #main -->
<br>
&nbsp;</p>

</td>

<td valign="top" width="300">
<!-- You may add an image here. -->
<div class="outerborder">
<div class="menuheader"><font face="AucoinLight">Soul</font></div>
<p class="menutext">
<$BlogMemberProfile$></p>
<p class="menutext">
<font face="AucoinLight" size="3">&nbsp;The Irreverent 1700's Governor's Wife</font></p>
<ul>
<p style="text-align: center">
<b><font size="2" color="#668844" face="Antigoni Light">*some adult content*</font></b></p>
<p style="text-align: right">
<a href="http://feeds.archive.org/validator/check.cgi?url=http://unmerciful-tara.blogspot.com/atom.xml">
<img src="http://www.passionatelove.net/valid-atom.png" alt="[Valid Atom]" title="Validate my Atom feed" width="88" height="31" /></a></p>
<p style="text-align: right">
<a href="http://www.bloglines.com/sub/http://unmerciful-tara.blogspot.com/">
<img src="http://www.passionatelove.net/sub_modern6.gif" border="0" alt="Subscribe with Bloglines" width="80" height="15" />
</a></p>

<p style="text-align: right"><script src="http://blogsnob.simpleads.net/ad/11824" type="text/javascript">blogsnob. show off your websites. http://blogsnob.simpleads.net</script></p>

</ul>

<div class="menuheader"><font face="AucoinLight">Ledger</font></div>
<p class="menutext">
<script type="text/javascript" src="<$BlogArchiveFileName$>"></script>
<h2 class="sidebar-title" style="text-align: right"><b>
<font size="2" face="Footlight MT Light">Previous Posts</font></b></h2>
<ul id="recently">
<BloggerPreviousItems>
<li>
<p style="text-align: right"><a




ETC. ETC.... (THE PROBLEM SEEMS TO BE ABOVE)



</body>
</html>



THANKS FOR YOUR HELP!

Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use.

Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders.

Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white.

Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover.

Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation.

Going to the far below link and clicking on the top link "projects" of that page brings up a menu with three links. Clicking on one of those links, 'Built' for example, brings up another submenu and at the same time it highlights "Built" as orange. Clicking on "Unbuilt" or "In Progress" has the same effect.

What I'm now needing to happen is if say you click on "Block" under the "Built" menu and it goes to the "Block" page I have "projects" and "Block" highlighted as orange but I'm not sure how to have "Built" continually highlighted as orange but when either "Unbuilt" or "In Progress" is clicked on the link "Built" goes to grey and the menu item clicked on turns to orange - as I currently have it.

Seems what I need is an CSS class/ID OnLoad for just "Built" (per this example) to where when going to the "Block" page the link "Built" is orange in the beginning but when the other links are clicked on it turns to grey.

Would anyone have advice on how to achieve this? This doesn't work in Safari btw:

http://www.royseeagleton.com/new/

Thanks!,
Wesley