Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How to Change Link Font Color Inside a Table

Posted on 2007-11-21
5
7,643 Views
Last Modified: 2010-04-21
I have a table defined as follows:

<table width="950" border="0" cellpadding="0" cellspacing="0" style="FONT-SIZE: 10pt; FONT-FAMILY: Courier New">
<tr>
<td width='81' class='class2'><a target=madetail href=tec.php?action=commands>commands</a></td>
<td width='100' class='class2'><a target=madetail href=tec.php?action=list>list</a></td>
</tr>

What I would like to do is to change the font color for the links to white. I tried adding font color=white, but that did't work. Appreciate any guidance.
0
Comment
Question by:dhite99
5 Comments
 
LVL 18

Expert Comment

by:Morcalavin
ID: 20328911
If you want to change just those links, you can add a class to your <style> tag.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
 
</script>
<style type="text/css">
	.link
	{
		color: #ffffff;
	}
	.link:hover
	{
		color: #ffffff;
	}
	.link:active
	{
		color: #ffffff;
	}
	.link:visited
	{
		color: #ffffff;
	}
</style>
<title>Untitled Document</title>
</head>
<body style="background-color:purple">
<a class="link" href="#">Test</a>
</body>
</html>

Open in new window

0
 
LVL 6

Expert Comment

by:starfailure
ID: 20329301
if you want to style the links inside the table differently than the rest of the web page, use inheritance in your css:
example:

table a {
  color: #abcdef;
}

table a:hover {
  color: #000000;
}

0
 
LVL 6

Expert Comment

by:starfailure
ID: 20329311
err.. don't know why i said "inheritance".  i mean Hierarchy
0
 
LVL 1

Accepted Solution

by:
edenmachine earned 100 total points
ID: 20335748
Worse case scenario you add a span tag inside of the <a> tag like so:

<td width='81' class='class2'><a target=madetail href=tec.php?action=commands><span style="color:white;">commands</span></a></td>

HOWEVER - this is the best and "more correct" way to do it:
inside your style you should put a NEW entry:

.class2 a {color:white;}

You might also need to and these depending on how your stylesheet is setup:
.class2 a:link {color:white;}
.class2 a:active {color:white;}
.class2 a:visited {color:white;}
.class2 a:hover {color:yellow;} /*or whatever the hover color you'd like */


Basically this tells your page that whenever there is an <a> tag inside another tag that has the "class2" style attribute that the color of the font for that <a> tag needs to be white.  This will keep all your other <a> tag font colors normal and will only affect the ones inside the class2 style.




.class2
0
 

Author Closing Comment

by:dhite99
ID: 31410399
Worked like a champ - THANKS!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
login jsp example 24 63
Help to align the buttons in a row 2 43
Add box and text color changing for everything 1 34
Javascript the "if condition with Or" 8 29
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question