red error on my /Colors/

Question

body { background-color: #fff; color: #999; }

/*green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { background-color: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* link s */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover{ color: #32673f; }

can someone help?

Answer 1 · 2015-01-28T20:15:52Z

January 28, 2015 8:15pm

The issue is that you didn't close the brackets on your footer declaration.

You have:

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;

and it should be:

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }

Answer 2 · 2015-01-28T19:49:57Z

January 28, 2015 7:49pm

Hi Oliver, can you provide me with a little bit more information on the issue you're having? What is showing red? Where is it showing that? Anything that would help me see what you're seeing.

Answer 3 · 2015-01-28T19:52:18Z

January 28, 2015 7:52pm

the body , header , nav , h1 , h2 , a and nav a { are all showing red and no colors are shown on the header background color and border and the link colours are white somethings gone wrong

Answer 4 · 2015-01-28T19:55:15Z

January 28, 2015 7:55pm

I copied and pasted your code in a codepen and I'm not seeing red showing up at all.

http://codepen.io/timknight/pen/Kwvmqz

Answer 5 · 2015-01-28T19:58:54Z

January 28, 2015 7:58pm

do you think it could be a problem with my index.html then?

<header>
  <a href="index.html" id="logo">
    <h1>Oliver Sewell</h1>
    <h2>Designer</h2>
    </a>
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a> </li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
   </header>

Answer 6 · 2015-01-28T20:01:51Z

January 28, 2015 8:01pm

:/ iv been stuck on this problem for 2 hours should i try delete everything and copy and paste see if that works

Answer 7 · 2015-01-28T20:02:35Z

January 28, 2015 8:02pm

You could try. I just want to be clear here... it's all of your text within the rendered HTML that is showing as red?

Answer 8 · 2015-01-28T20:04:13Z

January 28, 2015 8:04pm

You can use your developer tools to try and identify the problem! If you are using chrome, go to view --> developer --> developer tools. You should see all the css that exists on the right side under styles and mess with the css in there to identify the problem.

Answer 9 · 2015-01-28T20:07:03Z

January 28, 2015 8:07pm

its the css thats showing as red the only thing that is red in my html is the bottom part this is my full html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Oliver Sewell | Designer </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Oliver Sewell</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a> </li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header>

<div id"wrapper">
<section>
 <ul>
   <li> 
     <a href="img/numbers-01.jpg">
     <img src="img/numbers-01.jpg" alt=""
     <p>Experimentation with color and texture </p>
</li>

       <li> 
     <a href="img/numbers-02.jpg">
     <img src="img/numbers-02.jpg" alt=""
     <p>blend modes</p>
</li>



   <li> 
     <a href="img/numbers-06.jpg">
     <img src="img/numbers-06.jpg" alt=""
     <p>80's style</p>
</li>

   <li> 
     <a href="img/numbers-09.jpg">
     <img src="img/numbers-09.jpg" alt=""
     <p>drips photoshop brushes</p>
</li>

   <li> 
     <a href="img/numbers-12.jpg">
     <img src="img/numbers-12.jpg" alt=""
     <p>shapes </p>
</li>
  </ul>
</section>

<footer>
  <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter"</a>
   <a href="http://facebook.com"> <img src="img/facebook-wrap.png" alt="facebook" </a>


  <p>&copy; 2015 Oliver Sewell</p>
</footer>
    </div>

</body>

</html>

Answer 10 · 2015-01-28T20:08:28Z

January 28, 2015 8:08pm

full css

/******************* GENERAL *******************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

/******************* HEADING *******************/ header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; } /******************* Navigation *******************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/******************* FOOTER *******************/

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;

/******************* COLORS *******************/

/* site body */

body { background-color: #fff; color: #999; }

/*green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { background-color: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* link s */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover{ color: #32673f; }

Answer 11 · 2015-01-28T20:10:51Z

January 28, 2015 8:10pm

Oliver make sure you're including opening and closing HTML tags like you see on http://codepen.io/timknight/pen/Kwvmqz.

Also to Alicia's point, check out your dev tools to inspect the text to see where the red might be coming from.

Answer 12 · 2015-01-28T20:12:27Z

January 28, 2015 8:12pm

i think somethings in the wrong order on my .css

/******************* GENERAL *******************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

/******************* HEADING *******************/ header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; } /******************* Navigation *******************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/******************* FOOTER *******************/

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;

/******************* COLORS *******************/

/* site body */

body { background-color: #fff; color: #999; }

/*green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { background-color: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* link s */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover{ color: #32673f; }

Answer 13 · 2015-01-28T20:14:38Z

January 28, 2015 8:14pm

okay thankyou

Answer 14 · 2015-01-28T20:17:56Z

January 28, 2015 8:17pm

omg i missed out one bracket and it caused all those problems! , thankyou dude i was stuck on that for 2 hours trying to figure out what i did wrong , its working now thankyou!

Welcome to the Treehouse Community

Looking to learn something new?

Oliver Sewell

Oliver Sewell

red error on my /**Colors**/

14 Answers

Tim Knight

Tim Knight

Tim Knight

Tim Knight

Oliver Sewell

Oliver Sewell

Tim Knight

Tim Knight

Oliver Sewell

Oliver Sewell

Tim Knight

Tim Knight

Oliver Sewell

Oliver Sewell

Tim Knight

Tim Knight

Alicia Leslie

Alicia Leslie

Oliver Sewell

Oliver Sewell

Oliver Sewell

Oliver Sewell

wrapper {

logo {

Tim Knight

Tim Knight

Oliver Sewell

Oliver Sewell

wrapper {

logo {

Tim Knight

Tim Knight

Oliver Sewell

Oliver Sewell

Oliver Sewell

Oliver Sewell

Tim Knight

Tim Knight

red error on my /Colors/