CSS - What Color Notation To Use? Underlined Links Yes Or No?

Hi Guys!

Most of the links in my document are set to #ffffff, because they have a dark background.

I have 'content' section that I want to show blue links. I tried adding the following code into my style sheet:

PHP Code:
 a.content:link {
color: #0000FF; 
text-decoration: underline;
}

a.content:visited {
color: #0000FF; 
text-decoration: underline;
}

a.content:hover {
background-color: #6666FF;
text-decoration: underline;
} 





And nothing!? (apart from the layout crapped up!!!!) Could someone point me in a better direction?

Full CSS below!

Thanks Charlie



PHP Code:
 html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(images/newback.jpg);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: sans-serif; 
font-size: .7em;
}
#wrap {
background-image:url(images/newback150px.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

div#navbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#formbox {
color: #000000;
padding: 2%;
border: #000044 solid 1px;
}

div#userbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

#header {
background-color: #000044;
background-image:url(images/wel.jpg);
width 100%;
background-repeat: repeat;
border-bottom: 2px #000000 solid;
color: #ffffff; 
margin:0; padding:0;
height:100px;
}

}
#left {
float:left;
width:149px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
color: #ffffff; 
text-align:center;
background-color: #000044;
border-right: 1px #000000 solid; 
}
#main {
position:relative;
margin-left:200px;
}

#content {
text-align:center;
padding:4px;
margin-right:200px;
margin-bottom:150px;
text-align:left;
}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000044;
border-top: 2px #000000 solid;
margin:0; padding:0;
background-image:url(images/newback.jpg);
background-repeat: repeat;
margin-top:-0px;
color: #ffffff; 
text-align:center;
}
div#newsbar {padding: 0%; 
text-align: center;
height:140px; 
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff;
margin-left: +150px;
margin-right: +10px; 
margin-top: -180px; 
border: 2px #000000 solid;  
width: auto;} 

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

h1 {font-size: 1.4em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h2 {font-size: 1.3em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h3 {font-size: 1.2em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h4 {font-size: 1.1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h5 {font-size: 1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

a:link {color: #ffffff; 
text-decoration: underline;} 

a:visited { 
    color: #ffffff; 
    text-decoration: underline;}     

a:hover {color: #dedbcb;
background-color: #0000FF;
text-decoration: underline;} 

Is there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text.

So, is there a way to specify a:visited { color: do-not-change; }?

Hey
i got some cells in a table which hold links.
How can i make only the links inside these cells a different color?

This is the class i use on the table cells:
css Code:
Original - css Code .selectedContactRow{ background-color: white; color: black; }

  

  


 .selectedContactRow{


     background-color: white;


     color: black;


 } 

I only know how to change the link colors in general.
css Code:
Original - css Code a:link{color: red;} a:hover{color: red;} etc.

  

  


 a:link{color: red;}


 a:hover{color: red;}


 etc. 

thanks in advance.

I am trying to create a text box that has no border but has the entired box appear to be underlined. That is, I would like a 20 char box to appear like it has 20 underscores in it. However, I do not want to use a mask to do this, since I do not want any underscores in it. I want this to look like a host-based program. I don't want the text to show up as underlined as it's typed in, I would like it to appear just as an already underlined text box. So we can say that I want to record First Name and Last Name.

so it would look like

First Name:____________________

Last Name:____________________

Any ideas on how to do this?

here is my code so far
Code:

input.termbox {color:#3333FF;
background-color: #FFFFFF;
font-family:Terminal;
font-size: 15px;
text-decoration:none
font-weight: normal;
border: none;

I have some body text on a site I am working on. On Firefox and Safari the text appears with an underline even though it isn't set in the CSS to have this line. Strangely it doesn't happen in Internet Explorer 6. Also, it only happens on one page of the site in Firefox and Safari.

I'm trying to make a small box that is entirely clickable with text inside that is not underlined. Could someone explain to me why this code does not work, and what I need to do to fix it?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			font-family: helvetica;
			padding: 30px;
		}
		
		.box {
			width: 250px;
			height: 75px;
			padding: 40px 10px 10px 25px;
			background: #FFCE4E url('images/gradient_bg.jpg') repeat-x;
			border-radius: 5px;
			border: 1px solid #E8A935;
		}
		
		.box h3 {
			font-size: 19px;
			color: #333;
			padding-bottom: 5px;
		}
		
		.box p {
			font-size: 14px;
			color: #CC0000;
			font-style: italic;
		}
		
		a .box {
			text-decoration: none;
		}
	</style>
</head>
<body>
	<a href="#">
	    <div class="box">
	        <h3>Main text goes right here.</h3>
	        <p>Smaller italicized text goes here.</p>
	    </div>
	</a>
</body>
</html>

Hello All,
I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer.
Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result.

How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well?

This is how the code is displayed in IE:
http://img407.imageshack.us/img407/2360/pfieeu9.jpg

Firefox/Safari/Chrome:
http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg


You can see the little extra "nubbin" of underline between the icon image and the text.

CSS:
Code:

a.red10ullink:link	     {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:visited    {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:hover     {color: #333333;
		     font-size: 10pt;
		     font-family: arial;}

img.icon    {vertical-align: middle;
               border-width: 0px;
               margin: 0px 5px 0px 0px;}

HTML:
Code:

<a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a>

Thanks!

Here's the code: Code:

<html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body		{ margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div		{  }
table		{ width: 100% }
.sttable	{ background-color: #000080 }
tr		{  }
td		{ vertical-align: top }
.sttd		{ font: bold 12px Arial #FFFFFF }
</style>
</head>

<body>
<table class="sttable">
   <tr>
      <td class="sttd">Catalog&nbsp;>&nbsp;Categories</td>
      <td class="sttd">Cart&nbsp;Total:&nbsp;&nbsp;$&nbsp;0.00</td>
      <td class="sttd">Date</td>
   </tr>
</table>
</body>
</html>

Would someone please tell me why the color of the text isn't rendering white?

hello,

about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets?

i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color...

i hope i explained my issue properly...
thanks for any thoughts or suggestions on this

I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed!

Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them.


HTML
Code:

div id="bar-links">
<center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td>
</tr>
<tr>
<td background="images/barlist_02.gif" width="20"></td>
<td background="images/barlist_03.gif" width="456">&nbsp;</p>
<div id="bar-links">
<h4><a href="#" title="Riley's Pub">Riley's Pub</a>&nbsp;
<a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> &nbsp;
<a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> &nbsp;
<a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> &nbsp;
 </h4>
 </div>
</td>
<td background="images/barlist_04.gif" width="24"></td>
</tr>
<tr>
<td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td>
</tr>
</table>
</div>

CSS

Code:

#bar-links { 	text-indent:inherit; 	text-align:left; 	 }

Hi,
Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of:

Code:

body {
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 15px;
}
#header {
  clear: both;
}
#topmenu {
  width: 100%;
  height: 30px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  clear: both;
}
#topmenu a {
  width: 150px;
  height: 28px;
  color: #ffffff;
  background-color: #990000;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #ffffff;
  padding-top: 2px;
  float: left;
}
#topmenu a:hover {
  width: 150px;
  color: #990000;
  background-color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #990000;
  float: left;
}

#body {
  color: #000000;
  background-color: #ffffff;
  margin: 10px 0px 10px 0px;
  clear: both;
}
#footer {
  width: 100%;
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  border-top: 2px solid #990000;
  padding-top: 5px;
  clear: both;
}
#footer a {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: none;
}
#footer a:hover {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: underline;
}








#leftmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-right: 0.5%;
  float: left;
}
#contents {
  color: #000000;
  background-color: #ffffff;
  width: 58.5%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  float: left;
}
#rightmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-left: 0.5%;
  float: right;
}




.contentbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}


.menubreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}



.footerbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 2px;
  clear: both;
}


.menutoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}
.contenttoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}


.menu {
  width: 100%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  float: left;
}
.menu a {
  width: 98%;
  height: 19px;
  color: #000000;
  background-color: #eeeeee;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}
.menu a:hover {
  width: 98%;
  height: 19px;
  color: #ffffff;
  background-color: #990000;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}




.menucontent {
  width: 96%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
  float: left;
}
.menucontent a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}
.menucontent a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}




.subcontentright {
  color: #000000;
  background-color: #ffffff;
  text-align: right;
}

.content {
  width: 98%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 5px;
  float: left;
}
.content a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}
.content a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}



.input {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 13px;
}


.menuformcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  clear: both;
}

.menuformsubcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  clear: both;
}

.menuformlabels {
  color: #000000;
  background-color: #ffffff;
  width: 50%;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
}
.menuformfields {
  color: #000000;
  background-color: #ffffff;
  width: 48%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 2%;
  float: left;
}


.menuformsubmit {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  clear: both;
}

http://jigsaw.w3.org/css-validator/...ut+with_options

Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings...

Thanks!
Yours sincerely,
speedbooster!

I am looking a sitting for Peach color like this #000000 not the word. Dose anyone know how to do this or know the sitting for it?

Hey everyone,

I am using a template, and I thought i changed all of the colors, however, i am still getting blues and i want them gone. Help me please!

Sarah

CSS:
/* Global Styles */

body {
margin:0px;
}

td {
font:11px arial;
color:#333333;
}

a {
color: #cc0000;
text-decoration:none;
font-weight:bold;
}

a:hover {
color: #990000;
text-decoration:underline;
}

/* ID Styles */

#navigation a {
font:10px arial;
color: #ffffff;
text-decoration:none;
letter-spacing:.1em;
}

#navigation a:hover {
color: #99CCFF;
}

#padding {
padding:20px 5px 20px 5px;
}

#calendar td {
border: 1px solid rgb(0,51,153);
}

#noborder td {
border: 0px;
}

#weekdays th {
font:11px arial;
color: #ffffff;
font-weight:bold;
border: 0px;
padding:2px;
}

#calheader td {
font-weight:bold;
}

/* Class Styles */

.logo {
font:18px times new roman;
color: #990000;
letter-spacing:.3em;
font-weight:bold;
line-height:22px;
}

.tagline {
font:11px times new roman;
color: #CC3300;
letter-spacing:.2em;
}

.smallText {
font:12px times new roman;
color: #CC3300;
line-height:18px;
}

.pageHeader {
font:30px times new roman;
color: #CC3300;
letter-spacing:.1em;
line-height:38px;
}

.bodyText {
font:11px arial;
color:#333333;
line-height:24px;
}

.pageName {
font:20px georgia;
color: #8F0000;
letter-spacing:.1em;
line-height:26px;
}

.subHeader {
font:14px times new roman;
color: #990000;
font-weight:bold;
line-height:20px;
letter-spacing:.1em;
}

.navText {
font:10px arial;
color: #333300;
letter-spacing:.1em;
}