CSS How to Make a Website Responsive Web Design and Testing Website Testing

barnabasadedoyin
barnabasadedoyin
1,501 Points

CSS wasn't validated

I got this also from css validator level 3

36 header Value Error : padding-top Too many values or values are not recognized : 5px 0 47 h1 Parse Error 0; 52 Parse Error [: 1.75em; font-weight: normal; line-height: 0.8em; } h2]

How can I solve this?

Jason Anello
Jason Anello
Treehouse Moderator 94,431 Points

Hi barnabasadedoyin,

Can you post all of your css from the "HEADING" section of your main.css file? This should be approximately lines 30 to 60 and should cover all those errors.

barnabasadedoyin
barnabasadedoyin
1,501 Points

Ok Jason, but more than 60 lines. main.css:

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

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

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

a {
 text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}



/*************************************
HEADING
*************************************/

    header {
      float: left;
      margin: 0 30px 0 0;
      padding-top: 5px 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: 1.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/*************************************
NAVIGATION
*************************************/

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

    nav ul {
        list-style: none;
        margin: 0 10px;
        padding: 0px;
    }

    nav li {
        display: inline-block;
    }

    nav a {
        font-weight: 800;
        padding: 15px 10px;
    }



/*************************************
PAGE: FOOTER
*************************************/

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

    .social-icon {
       width: 20px;
       height: 20px;
       margin: 0 5px;
      }


/*************************************
PAGE: PORTFOLIO
*************************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7; 
}


/*************************************
PAGE: ABOUT
*************************************/
.profile-photo {
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;


     border-radius: 100px;
/* Prevent background color leak outs */

  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;

  } 


/*************************************
PAGE: CONTACT
*************************************/

 .contact-info {
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 0.9em;
 }


 .contact-info a {
   display: block;
   min-height: 20px;
   background-repeat: no-repeat;
   background-size: 20px 20px;
   padding: 0 0 0 30px;
   margin: 0 0 10px;
 }

 .contact-info li.phone a {
   background-image: url('../img/phone.png');
 }

 .contact-info li.mail a {
   background-image: url('../img/mail.png');
 }

 .contact-info li.twitter a {
   background-image: url('../img/twitter.png');
 }


/*************************************
COLORS
*************************************/
/* site body */
body {
  background: #fff;
  color: #999;
}
/* green header bg */
header {
  background-color: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */ 
nav {
  background: #599a68;
}
/* logo text */
h1, h2 {
   color: #fff;
}
/* link color */
a {
 color: #7e7e7e;    
}


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

3 Answers

Jason Anello
MOD
Jason Anello
Treehouse Moderator 94,431 Points

Thanks for posting the css. Sorry for the confusion but I meant to post only line numbers 30 to 60 because all of your errors were in that range but it's ok to post all of it.

The first error was reported for line 36:

padding-top: 5px 0;

The validator is reporting too many values because you have 2 values there and you can only have 1 when using padding-top

You can change it to padding-top: 5px; or use the shorthand property as shown in the course padding: 5px 0 0 0;

The next error was on line 47:

margin: 15px; 0;

You have an extra semi-colon there after 15px

Your 3rd error went away after fixing those 2 errors. I think it was a false error triggered by the 2nd error.

Because of that I would recommend that you fix the errors reported in order and maybe re-validate every 1 or 2 errors that you fix because some may go away.

barnabasadedoyin
barnabasadedoyin
1,501 Points

Validated! Thank you Jason. How can someon know about those errors next time?

Jason Anello
Jason Anello
Treehouse Moderator 94,431 Points

Well, the validator will try to help you by telling you the line number the problem was on.

In your case, the 1st error was reported on line 36. So you would look at the error message for a hint as to what might be wrong, "header Value Error : padding-top Too many values or values are not recognized", then you would go back to your text editor and see what you have on line 36.

Then it's a matter of looking it over and trying to figure out what you might have done wrong. I think as you gain more experience you'll getter better at this process.

Also, as you gain more experience you'll be making less of these types of errors.

Hey people!

I am trying to validate my CSS and I am getting an error saying

"URI : TextArea 198 Parse Error [: visted]"

my code for this location is:

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

Would someone please help me.

Many thanks, Josh

Sorry people I worked it out... DUH, I spelt "visited" wrong!