CSS won't change link color?

Hi, I have links at the side of my page and I can’t change the font color by using css or changing the a link color. The link color just stays black. Any ideas? Thank you.



a { color:#666666;
text-decoration:none;
}

a:hover { text-decoration : none;
}

.leftopbox {
color : #ffffff;
font-size : 10px;
margin-left : 18px;
width : 133px;
text-align : left;
background-color : #000000;

border-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
} 

and this is the HTML code


<div class="leftopbox">
   <a href="http://www.zmpm.com" title="Site dedicated to world peace"> &nbsp;  &nbsp;&nbsp;Zen Peace Magazine</a>  </div>


a { color:#666666;
text-decoration:none;
}

a:hover {
color:#000000;
text-decoration : none;
}

that should change to black when you hover your mouse over the a link

yea…I don’t know why the CSS and /or a link colors aren’t working right. The site is www.loversofbeauty.com and the colors I’m referring to are the links to other sites at left of page. The page validates as HTML and CSS.

they are not black for me!
Also why aren’t you using a seperate .css file?
include it with:

 <link rel="stylesheet" type="text/css" href="yourCSSfile.css" media="screen, projection" />

put it before </head> tag
try to do so and then post the content of your CSS file here :slight_smile:

Ok …did that and this is the CSS code:


<style type="text/css">


* { margin:0; padding:0; }

BODY {
background-color:#333333;
font-size : 11px;
font-family:arial,sans-serif;

}

a { color:#666666;
text-decoration:none;
}

a:hover { text-decoration : none;
}

#header {
;
padding:0px;
}


#left {
float:left;
color : #666666;
width:270px;
font-weight : normal;
background-color:#ffffff;

}


#right {
float:right;
width:270px;

background-color:#ffffff;
text-align : center;
font-size : 11px;
}


.rightbox {
margin-left :auto;
margin-right : auto;
color : #000000;
font-size : 11px;
width : 170px;
padding : 10px;
background-color :  #ffffcc;
text-align : justify;
border-top-style : solid;
border-right-style : solid;
border-left-style : solid;
border-width : 1px;
border-color : #eeeeee;
border-bottom-style : solid;
}
.rightbox1 {
margin-left :auto;
margin-right : auto;
color : #000000;
font-size : 11px;
width : 162px;
padding-left : 28px;
padding-top : 6px;
padding-bottom : 6px;

background-color : #eeeeee;
text-align : justify;
border-style : solid;

border-width : 1px;
border-color : #cccccc;
border-bottom-style : solid;
}


.rightbox2 {
margin-left :auto;
margin-right : auto;
color : #000000;
font-size : 11px;
width : 170px;
padding : 10px;


background-color : #eeeeee;
text-align : justify;
border-style : solid;

border-width : 1px;
border-color : #cccccc;
border-bottom-style : solid;
}


.rightbox3 {
margin-left :auto;
margin-right : auto;
color : #000000;
font-size : 11px;
width : 170px;
padding : 10px;


background-color : #eeeeee;
text-align : justify;
border-style : solid;

border-width : 1px;
border-color : #cccccc;
border-bottom-style : solid;
}

#left a {

padding : 3px;
   color: #313F57;
   display: block;
   width: 127px;

}
#left a:hover {
   background: #eeeeee;

   text-decoration: none;
   border-left: 0px solid yellow;
}

.leftopbox1 {
color : #000000;
font-size : 11px;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
width : 160px;
padding : 10px;
background-color : #ffffcc;
text-align : justify;
border-width : 1px;
border-style : solid;

border-color : #eeeeee;
}


.leftopbox2 {
color : #000000;
font-size : 11px;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
width : 160px;
padding : 10px;
background-color : #eeeeee;
text-align : justify;
border-width : 1px;
border-style : solid;

border-color : #cccccc;
}

.leftopbox {
color : #ffffff;
font-size : 10px;

width : 133px;
text-align : left;
background-color :#99ff66;

border-width : 1px;
border-top-style : solid;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
}
.leftopbox3 {

color : #ffffff;
font-size : 10px;
text-align : left;
width : 133px;

background-color :#99ff66;

border-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
}

.leftopbox4 {
color : #ffffff;
background-color : #99ff66;
font-size : 10px;
margin-left : 18px;
width : 133px;
text-align : left;


border-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
}
.leftopbox5 {
color : #ffffff;
font-size : 10px;
margin-left : 18px;
text-align : left;
width : 133px;
background-color : #99ff66; ;

border-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
}
.leftopbox6 {
color : #ffffff;
font-size : 10px;
margin-left : 18px;
text-align : left;
width : 133px;
background-color :#99ff66;

border-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
}
.leftopbox7 {
color : #ffffff;
font-size : 10px;
margin-left : 18px;
width : 133px;
text-align : left;
background-color : #99ff66;

border-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
}


.leftopbox8 {
color : #ffffff;
font-size : 10px;
margin-left : 18px;
width : 133px;
text-align : left;
background-color : #99ff66;

border-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
}
.leftopbox9 {
color : #ffffff;
font-size : 10px;
margin-left : 18px;
width : 133px;
text-align : left;
background-color : #99ff66;

border-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
}

.leftopbox10 {
color : #ffffff;
font-size : 10px;
margin-left : 18px;
width : 133px;
text-align : left;
background-color : #99ff66;

border-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
}


.leftopbox12 {
color : #ffffff;
font-size : 10px;
margin-left : 18px;
width : 133px;
text-align : left;
background-color : #99ff66;
border-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-bottom-style : solid;
border-color : #333333;
margin-left : auto;
margin-right : auto;
}

.leftopbox11{
color : #000000;
font-size : 11px;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
width : 160px;
padding : 10px;
background-color : #ffffcc;
text-align : justify;
border-width : 1px;
border-style : solid;

border-color : #eeeeee;
}
#center {
margin-right:auto;
margin-left:auto;
width : 290px;
text-align : center;
padding-left:0px;
color : #333333;
font-size : 12px;
font-weight : normal;
background-color:#ffffff;
}


.centerbox1 {
color : #000000;
font-size : 11px;

margin-left : auto;
margin-right : auto;
width : 280px;
padding : 11px;
background-color : #ffffcc;
text-align : justify;
border-width : 1px;
border-style : solid;

border-color : #eeeeee;
}


#footer { clear:both;
background-color:#cccccc;
color : #000000;
padding:14px;
font-size : 11px;
}

#box-wrap {

color : #000000;
text-align : center;
background-color : #ffffff;
height : 100%;
width : 880px;
margin-left : auto;
margin-right : auto;
border-style : solid;
border-width : 0px;
border-color : #333333;
}

.topbox {
border-width : 0;
border-bottom-style : solid;
border-color : #99cc33;
}




img.floatLeft {
float: left;
margin: 4px;
padding : 6px;

}

img.floatRight {
float: right;
margin: 4px;
padding-left : 6px;
padding-bottom: 6px;

}

.update{




color : #999999;
font-family :  arial, sans-serif;
font-size : 9px;

font-weight : normal;
text-align : left;
}

.counter{

font-size:12px;
color : #666666;
}

img
{
border-style: none;
vertical-align:middle;
margin-left : auto;
margin-right : auto;
padding-bottom : 4px;
}



TABLE {
border-top: solid 0px #000000;
border-right: solid 0px #000000;
margin-left : auto;
margin-right : auto;

}

TD {
border-left: solid 0px #000000;
border-bottom: solid 0px #000000;

}
</style>

why are you using leftopbox1 leftopbox2 … classes why not just one?

and explain how the links should appear exactly? grey links on a greenish-lime background and that background turns into light grey on mouse over or What?
Also what browser(s) are you using to view your page?

Actually the colors are ok, with grey mouseover etc. The point is that if I wanted to change them, I can’t…The browsers I checked in : IE, Firefox and Opera.
I did try having all the links in one div, but same problem…I must be doing something silly?

Try
a:link {

instead of

a {

Might help? :slight_smile:

Yea…must have been the a: link. It’s working fine now (www.loversofbeauty.com) and I was able to change the link colors. Thank you one and all.