Need Help resolving 2nd color for links issue in CSS

[wieas]

Hi! I am feeling really stupid. I have been struggling for three weeks with my css code trying to get a second color for links on: http://www.orionconsultinggroup.net/About%20Orion.html

I have looked it up on several websites and I am afraid that I am making a mess of my css without positive results. I have designed a web page that has a dark gray (#252525) background with a header and navigation panel that contain ecru type (#D4CFBB). I have an inset named #CV which has an ecru background (#D4CFBB) with dark gray lettering (#252525)--the inverse. I cannot, for the life of me, seem to be able to achieve a second color for the links in the #CV area. When I have added a link color in #CV, it turns the type to the background color (the default setting) and the type becomes invisible. Can anyone help me with this? I know I am missing something pretty elementary and fundamental. Thanks in advance for your help.

Margaret

Here is the code to the website (http://www.orionconsultinggroup.net/About%20Orion.html

@charset “utf-8”;

#Header {
position:absolute;
left:29px;
top:8px;
width:966px;
height:157px;
z-index:1;
}
#Nav {
position:absolute;
left:28px;
top:177px;
width:196px;
height:475px;
z-index:2;
}
.footer {
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #D4CFBB;
}
#CV {
position:absolute;
left:253px;
top:177px;
width:704px;
z-index:3;
padding-left: 20px;
padding-right: 20px;
background-color: #D4CFBB;
color: #252525;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
body {
background-color: #252525;
}
a:link {
color: #D4CFBB;
}
a:visited {
color: #D4CFBB;
}
a:hover {
color: #D4CFBB;
}
a:active {
color: #D4CFBB;
}

.subSubHeading {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: left;
font-style: italic;
margin-top: 0px;
}
.sectionTitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
}
li {
margin: 10px;
}
.company img {
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
a:link a:visited {
color: #D4CFBB;
text-decoration: none;
}
a:hover {
color:  #F0F0F0;

}
a:active {
color: #D4CFBB;
}
.heading {
font-size: 28px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #D4CFBB;
margin-bottom: 0px;
}
address {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: italic;
color: #D4CFBB;
}
#navLinks
a:link, #navLinks
a:visited {
color: #D4CFBB;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
#navLinks a:hover {
color: #F0F0F0;
text-decoration: underline;
}
.SubHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #252525;
margin-bottom: 0px;
}
#CVLinks
a:link, #CVLinks
a:visited {
color: #252525;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
#CVLinks a:hover {
color: #252525;
text-decoration: underline;
}

)

[almostbob]

#CV { position:absolute; left:253px; top:177px; width:704px; z-index:3; padding-left: 20px; padding-right: 20px; background-color: #D4CFBB; color: #252525; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }
body { background-color: #252525; }
a:link { color: #D4CFBB; }
a:visited { color: #D4CFBB; }
a:hover { color: #D4CFBB; }
a:active { color: #D4CFBB; }
#cv a { color:blue; }
#cv a:active { color:red; }
#cv a:hover {color:yellow; }
#cv a:visited {color:green; }

cascading style sheets
an element as a child of another element is styled something like the above, excluding lousy color choices. Links inside #CV should have the color attributes shown even if they are inside a div p

All those fixed pixel sizes may not look as intended on any other than the pc on which you are laying out the page
at other resolutions the layout will push offscreen or be a narrow column in the middle,
current best practice for screen element dimensions is % and em, an element 96% wide leaves a margin on all screen sizes and all window sizes, and element 966px wide does not
fixed fonts may become invisibly small or too large, or may not be visible by the user due to vision problems
ems or % adjust around basefont settings on the users pc so are always visible,
10px on this monitor is 0.09inch high, not really readable

[wieas]

Thank you almost bob! In your message, there is additional information about fonts and pixels. Is the website not showing up correctly on your screen? I tried to float stuff, but not really sure how it looks to you.

Thanks again!

[almostbob]

on my screen it is a narrow stripe in the middle, this is 34inches wide, you can have a lot of fun with lcd screens
so there is a lot of wasted realestate, on a small screen, a part screen window or a handheld device layouts dependent on fixed sizes tend to fall over
Have discovered that nobody wants to have to scroll sideways to read the page, they will follow it down forever, but not sideways
images should remain px, but other elements should either be left unsized to occupy the entire remaining space, or sized in % to share self adjust.
This post, reflows in its container if you resize the window, laid out in % the whole page will reflow its text in different window sizes

as an
example
this
block of
text
will not
reflow
and
looks
strange