CSS won't change link color?

dubman · April 16, 2006, 5:22pm

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>

madkad · April 16, 2006, 5:34pm


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

dubman · April 16, 2006, 5:42pm

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.

Dark_Tranquility · April 16, 2006, 5:51pm

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

dubman · April 16, 2006, 6:08pm

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>

Dark_Tranquility · April 16, 2006, 6:31pm

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?

dubman · April 16, 2006, 7:08pm

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?

fisherboy · April 17, 2006, 10:12am

Try
a:link {

instead of

a {

Might help?

dubman · April 17, 2006, 12:30pm

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.

Topic		Replies	Views
Cant seem to control link color HTML & CSS	4	584	October 8, 2014
Link not pcicking color etc HTML & CSS	5	520	September 5, 2010
CSS link states aren't changing color? HTML & CSS	3	797	November 14, 2010
Change color of a link? HTML & CSS	3	500	October 8, 2014
CSS help please HTML & CSS	4	588	October 8, 2014

CSS won't change link color?

Related topics