CSS color property not changing text color?

Question

Just like it says, the color property is not changing the color of the text.

The HTML:

<body>
  <header>
    <ul id="navbar">
      <li><a href="/home.html">Home</a></li>
      <li><a href="/money.html">Money</a></li>
      <li><a href="/sports.html">Sports</a></li>
    </ul>
  </header>
</body>

and the CSS:

#navbar {
    list-style-type: none;
}

#navbar li {
    background-image: url(../images/bg-nav.c.gif);
    background-position: left top;
    color: white;
    float: left;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    height: 37px;
    text-align: center;
    text-decoration: none;
    width: 120px;
}

Benjamin · Accepted Answer · 2014-08-12 14:55:36Z

5

You have apply color to your <a> tag. Find the below change

#navbar li a{
   color:#fff;
}

answered Aug 12, 2014 at 14:55

Benjamin

2,6902 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bobby Over a year ago

I did the exact same thing this morning

Gildas.Tambo Over a year ago

you don't need to add li you can just use #navbar a

Benjamin Over a year ago

Of course you do that unless you don't use any '<a>' in your nav which will affect the all.

Gildas.Tambo Over a year ago

since it is not correct to use <a> als <ul> child you no not need to add LI

pmilla1606 · Accepted Answer · 2014-08-12 14:56:34Z

0

You need to target the anchor (a) elements inside the li's.

Try #navbar li a

answered Aug 12, 2014 at 14:56

pmilla1606

7557 silver badges13 bronze badges

Comments

Shaeldon · Accepted Answer · 2014-08-12 14:57:18Z

0

You have to change

a:link {  }
a:visited {  }
a:hover { }
a:active {  }

possibly with referenz to your navbar if you use multiple links on your site

answered Aug 12, 2014 at 14:57

Shaeldon

8814 gold badges18 silver badges28 bronze badges

Comments

Gildas.Tambo · Accepted Answer · 2014-08-12 15:19:25Z

0

LIVE DEMO

enter image description here

#navbar {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

#navbar li {
    float: left;
    list-style-type: none; /*apply list-style to li*/
    text-align: center;/*here we are telling LI to `text-center` all child anchor */
}
#navbar a {
    background-image: url(https://d3ui957tjb5bqd.cloudfront.net/uploads/2013/05/firelight-logo-preview-1-f-560x372.png);
    background-position: left top;
    background-size:100% auto;
    background-repeat:no-repeat;
    color: white;
    text-decoration: none;
    padding: 20px 60px; /* use padding instead of width and height since you don't know how long the text will be */
}

edited Aug 12, 2014 at 15:19

answered Aug 12, 2014 at 15:06

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

Collectives™ on Stack Overflow

CSS color property not changing text color?

4 Answers 4

4 Comments

Comments

Comments

LIVE DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related