Anonymous 0

Could someone please tell me why #menunav is black text rather then the desired color. It works fine on hover etc. Many thanks.

body {
    background: url(../images/bg.png) repeat;
    background-color: #5d0e02;
}
/*Main container*/
#wrapper {
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;
    width: 960px;
    margin: 50px auto 0px auto;
    height: 825px;
    background: #921906 url(../images/girl.png) no-repeat 95% 1%;
}
#wrapperMenu {
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;
    width: 960px;
    margin: 50px auto 0px auto;
    height: auto;
    background: #921906 url(../images/girl.png) no-repeat 95% 1%;
}
/*Logo plus*/
#header img {
    margin: 42px 0 0 25px;
}
#header {
}
/*CS3 bits*/
.cool {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 0px 0px 4px #000;
    -webkit-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000;

}
/*Top navigation*/
#nav {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 110%;
    display: inline;
    float:right;
}
#nav ul {
    list-style: none;
    padding:0;
    padding-top: 1em;
    padding-left: 20px;
    margin: 5px 0px 15px 0px;
}
#nav li {
    display: inline;
}
#nav a:link, #nav a:visited {
    margin-right: 25px;
    text-decoration:none;
    color:#ff6500;
    padding: 2px;
}
#nav a:hover, #nav a:active {
    color:#ff6500;
    border-bottom:#ff6500 solid thin;
}
/*Menu page nav*/
#menunav {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 85%;
    display: inline;
    text-align: center;
}
#menunav ul {
    list-style: none;
    padding:0;
    padding-top: 1em;
}
#menunav li {
    display: inline;
    padding: 10px;
}
#menunav a:link, #nav a:visited {
    text-decoration:none;
    color:#ff6500;
    padding: 2px;
}
#menunav a:hover, #nav a:active {
    color:#ff6500;
    border-bottom:#ff6500 solid thin;
}
/*Text and menu*/
#content {
    padding:20px;
    text-align: left;
    clear: both;
}
/*Table menu*/
#contentMenu {
    padding:20px;
    clear: both;
}
#contentCont {
    padding:30px 30px 30px 30px;
    text-align: left;
    width: 420px
}
#contentMenu table {
    margin: 20px auto 0px auto;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
}
#contentMenu caption {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 140%;
    color: #FFF;
    padding: 0 0 20px 0;
}
h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 140%;
    color: #fff;
}
h3 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 110%;
    color: #FFF;
}
p {
    color: #FFF;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 90%;
    line-height: 120%;
}
/*Main Images*/
#mainimage {
    clear: both;
}
#mainimage img {
    border-top: thin solid #000;
    border-bottom: thin solid #000;
}
/*The bottom*/
#footer {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 60%;
    color: #FFF;
    right: 30px;
    bottom: -10px;
    float: right;
    text-align: right;
    width: 500px;
    position: relative;
}
/*Email style*/
a[href^="mailto"] { color: #ff6500;
}
  • In the future, try pulling out relevant CSS only, showing the bit of HTML related to the problem (just a small snippet), linking to the page with the problem, or creating an example of the problem. Not only will these help find the solution for us, but often you can end up finding it yourself. Ktash about 8 years ago
  • So sorry. I will do as suggested in the future. And you're right, i found he problem. Thanks sbl2000 about 8 years ago

1 answer

danwellman 5600
0
points
This was chosen as the best answer

Try setting #menunav a { color:color } explicitly to the desired color instead just trying to inherit the color from the container. The hover states work because the element (a) is part of the selector

Answered about 8 years ago by danwellman
  • Many thanks. I found the problem, i forgot to change the visit & active name to menunav sbl2000 about 8 years ago