HELP - Font Color

[Chezshire]

Hello Everyone,

HISTORY: I'm a second quarter college student studying web design, and largely I've managed to finish my site and am now working on the final tweaks (thanks to those who've helped me to get this far!). Overall I'm pretty happy with my site and am in the final phase of tweaking and checking the code and stuff like that and looking for inconsistencies/things which are misbehaving and this has led me to a problem I can't seem to solve in the left vertical/menu nav (The listed months on the left side of the page on the avacado green-ish area - specifically the active link which is displaying tan on the off white color rather then as reddish-brown on the off-white background).

 

PROBLEM: I'm trying to get the font color of the word 'December 2009' to display as reddish brown (#842d1b;) using an the class of 'current' to the link in question. But the color is being over-rided and displaying as a lite tan/beige which makes me a very sad clown

 

SITE URL: http://xpg.us/xSCC/xFinalP/dinnersforsinners/schedule/schedule.html

 

 

AFFECTING CSS:

 /* Navigation Links - listed vertically - left column div */	
#leftcolumn h1, h2, h3, h4 {
color: #e7e2c4; 
text-align: center; 
margin-top: .5em;}

#leftcolumn a {
display: block;	
text-align: center;

text-decoration: none;	
margin: 5px 0px;
border: 0px;
padding: 0px 5px;
}	 

#leftcolumn a:link {color: #e7e2c4; margin-left: 5px;}
#leftcolumn a:visited {color: #e7e2c4; font-weight: bold; margin-left: 5px;}
#leftcolumn a:active {color: #842d1b; background-color: #fffff1; font-weight: bold; margin-left: 5px;}
#leftcolumn a:hover {color: #842d1b; font-weight: bold; margin-left: 5px;}


.current {color: #842d1b; font-weight: bold; line-height: 2em; background-color: #fffff1; 
}

/* Content Area Links */

 

 

FULL CSS SHEET:

/* Wildcard & Body are in dfs_divs.css */

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .90em;
color: #aa9f4e;	
background-color: #000;
}

p { color: #615c49;
}

.indent {text-indent: 1.15em;}


ol {
list-style-type: none;
}

li {	
margin: 3px 0px;
}

a {
text-align: center;
text-decoration: none;
}	 

/* Navigation Links - listed vertically - left column div */	
#leftcolumn h1, h2, h3, h4 {
color: #e7e2c4; 
text-align: center; 
margin-top: .5em;}

#leftcolumn a {
display: block;	
text-align: center;

text-decoration: none;	
margin: 5px 0px;
border: 0px;
padding: 0px 5px;
}	 

#leftcolumn a:link {color: #e7e2c4; margin-left: 5px;}
#leftcolumn a:visited {color: #e7e2c4; font-weight: bold; margin-left: 5px;}
#leftcolumn a:active {color: #842d1b; background-color: #fffff1; font-weight: bold; margin-left: 5px;}
#leftcolumn a:hover {color: #842d1b; font-weight: bold; margin-left: 5px;}


.current {color: #842d1b; font-weight: bold; line-height: 2em; background-color: #fffff1; 
}

/* Content Area Links */
#rightcolumn a {	
text-align: center;
text-decoration: none;
color: #aa9f4e;	
}
#rightcolumn a:link {color: #aa9f4e;}
#rightcolumn a:visited {color: #aa9f4e;}
#rightcolumn a:active{color: #aa9f4e; background-color: #fffff1; font-weight: bold;}
#rightcolumn a:hover {color: #aa9f4e; background-color: #fffff1;}



#rightcolumn h1, h2, p, ol, ul, object {
padding: 10px}

#rightcolumn h2 {
color: #aa9600;
}

#rightcolumn h3 {
color: #aa9600;
text-align: left;
}

#rightcolumn img {margin-left: 10px;}

/* Div is in right column content area */	
#callout li { 
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	font-size: .7em;	
	color: #615c49; 
	padding: 5px 5px;
	}

	#cast img { 
		padding: 5px 10px;
		}

	#callout img { 
		padding: 5px 10px;
		}

	#callout a {	
		text-align: center;
		text-decoration: none;
		color: #aa9600;	
		}

	#callout a:link {color: #aa9f4e;}
	#callout a:visited {color: #aa9f4e;}
	#callout a:hover {color: #aa9f4e; background: none;}
	#callout a:active{color: #aa9f4e; background: none; font-weight: bold;}


/* Div is in right column content area */	
#ingredients li { 
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	font-size: .7em;	
	color: #615c49; 
	padding: 5px 5px;
	}

/* Div is in right column content area */	
#recipe p { 
	font-size: .8em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	color: #615c49; 
	padding: 5px 10px;
	}



/* Div is in right column content area - tricks page */	
#notes h3 {color: #615c49;}
#notes ol, ul {
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	font-size: .7em;
	color: #aa9f4e; 
	text-align: left;
	}

/* Center Freebie Images */
.center {text-align: center;}


/* End rightcolumn div/content */	

/* Footer Links - listed horizontally */

#footer a {color: #e7e2c4;}

#footer a:hover {color: #842d1b; font-weight: bold;}

img {border: 0px}

hr {color: #aa9f4e;
background-color: #aa9f4e;
height: 1px;
margin: 10px  35px 0px 35px;}

.center_home {
text-align: center;}

[Chezshire]

UPDATE: Hi everyone,

  So whilst I wait for someone who's smarter then me to point out what dumb thing I've done (or maybe not done?) this time, I've been attempting to work the problem out and while I've not solved it, I do think I've found the actual problem which is that that '#leftcolumn a:link' style is overriding the '.current'. Now I don't know why this is happening as the class is listed later in the stylesheet then a:link style.

 

So i'm very perplexed and googling away for an answer and experimenting and testing out new bits of colorful language with each failure I experience (laughs).

 

Uhm... help? Please?

 

 

[haku]

http://htmldog.com/guides/cssadvanced/specificity/

[Chezshire]

Thank you for the help Haku, I went out and got the HTML DOG book and looked it over, but I'm still not able to figure out the specific issue. I know that it is one of specificity; But short of using local formatting, i can't seem to solve the problem -- my class which is listed last in my style sheet should over ride everything else as I understand the rules of specificity. I'm flummoxed and completely stymied - I've tried a good fifty different attempts but I can't get the text in the white box to display red, without making everything display red.

 

Anyhoo - thanks for pointing me to the web page which lead me to the book which helped me to have a stronger conceptual understanding of the problem even if it hasn't yet helped to solve the problem.

 

 

[Chezshire]

Finally found the problem - It was one of specificity which I knew going in when asking for help. The main thing was in seeing how the specification of the delineator was written. I had it in the right place, I had my rule (that which is in the brackets written correctly), but what I didn't have written correctly was the delineator's name (the name by which the CSS is called). By adding a 'a' and the name of the 'div' before the 'class' I was able to target the desired effect which was my intent and hope.

 

This is the new rule which works:

#leftcolumn a.current {

font-weight: bold;

color: #842d1b;

line-height: 2em;

background-image:url('../images/bkg/bkg_leftCol_current_183x26.jpg');

background-repeat:no-repeat;

background-position:top right;

}

 

 

Thank you for the book Haku and the website - very useful

-Chez

[haku]

Specificity doesn't mean that the last CSS selector takes priority, it means that the selector with the highest specific explanation as to which element it is addressing takes priority.

 

so for example, if you have this HTML:

 

<div id="target">
  <p class="explanation">
    <a href="#" class="target_link">explanation</a>
  </p>
</div>

 

And this CSS:

 

div#target p.explanation a.target_link {color:red;}
p.explanation a.target_link {color:blue;}
a.target_link {color:green;}
a {color:pink;}

 

The top selector will take precedence because it has a much higher specificity than any of the others, so the link will be red. It's all explained in that link I gave.

[Chezshire]

Thank you Haku, as always it's very appreciated.

 

Happiest of Holidays!!!