homepage Welcome to WebmasterWorld Guest from 54.237.71.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Having problems creating different link colors
khaus




msg:3842570
 11:09 pm on Feb 4, 2009 (gmt 0)

I have a site in CSS, within some of the body text I have links, I'm trying to get those links to be a different color than the main nav links. Something is cross-firing and not 100% sure what.
Here's the menu css:

* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
font-variant: normal;
}

ul,li {
display: block;
margin: 0px;
padding: 0;
border: 0;
}

ul {
width: 200px;
background: #fff;
list-style-type: none;
}

li {
position: relative;
padding: 0px;
z-index: 9;
}

li.folder{
background-color: #FFFFFF;
background-image: url(images/roll.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top: 0.px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 5px;
font-family: Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
font-size: 11px;
font-style: normal;
line-height: 23px;
font-weight: bold;
font-variant: normal;
color: #000000;
height: 30px;
border: thin solid #FFFFFF;
}

li.folder:hover {
z-index: 10;
background-color: #FFFFFF;
background-image: url(images/roll.gif);
background-repeat: no-repeat;
background-position: left bottom;
font-family: Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
font-size: 11px;
font-style: normal;
line-height: 23px;
font-weight: bold;
font-variant: normal;
color: #FFFFFF;
}

li.folder ul {
position: absolute;
display: none;
left: 200px; /* IE */
top: 8px;
}

li.folder>ul {
left: 200px;
}

ul.level1 li.folder:hover ul.level2 {
width:200px;
display:block;
color:#000;
font-weight:bold;
font-style:normal;
text-decoration:none;
margin:0;
padding:0;
font-size: 12px;
line-height: 23px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-variant: normal;
background-image: url(images/roll.gif);
background-repeat: no-repeat;
background-position: left top;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: 32px;
}

a {
padding: 2px;
text-decoration: none;
width: 100%;
}

li>a {
width: auto;
}

li a.submenu {
background-color: #FFFFFF;
padding-left: 12px;
display: block;
padding-top: 3px;
padding-bottom: 0px;
font-family: Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
font-size: 12px;
font-style: normal;
line-height: 23px;
font-weight: bold;
font-variant: normal;
color: #000000;
background-image: url(images/roll.gif);
background-position: left top;
margin: 0px;
height: 28px;
width: 190px;
padding-right: 0px;
}

li.explain {
color: #FFFFFF;
padding-left: 10px;
padding-top: 4px;
padding-bottom: 4px;
width: 200px;
font-family: Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
font-size: 12px;
font-weight: bold;
background-image: url(images/roll.gif);
background-position: left top;
font-style: normal;
line-height: 18px;
font-variant: normal;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html li.explain {
width: 200px;
}
/* End hide from IE5/mac */

a:link, a:visited {
color: #007118;
}

a:hover {
color: #007118;
}

#menu {
font-weight:700;
font-style:normal;
text-decoration:none;
}

#link {
padding: 0px 0px 0px 20px;
margin-top: 15px;
font-family: Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
font-size: 12px;
font-weight: bold;
}
#other {
font-weight:700;
font-style:normal;
text-decoration:none;
}
.other a:link {color: #FF0000;}
.other a:visited {text-decoration: none; color: #0000FF;}
.other a:hover {text-decoration: underline; color: #FF6600;}
(...)
.panel a:link {color: #FFFFFF;}
.panel a:visited {text-decoration: none; color: #FF00FF;}
.panel a:hover {text-decoration: underline; color: #FFFF00;}

 

Moby_Dim




msg:3842752
 6:33 am on Feb 5, 2009 (gmt 0)

At the first glance: try to change the order of some definitions- go from more common towards more specific.. e.g.place in your css file A {color...} above li a.submenu {...}, etc..

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved