Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jack Xu
Jack Xu
595 Points
Posted by Jack Xu
Jack Xu
595 Points

Problems validating CSS code

I can't get my CSS code validated through http://jigsaw.w3.org/css-validator. It comes up with this:

9 GENERAL * Parse Error *********************************** header { font-family: 'Ubuntu', sans-serif; }

When I try to remove that element it creates an error for the following element and so on... Can anyone shed some light on this problem?? :)

3 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Okay, so I edited a bit to make it easier to read, and it looks like the problem is in the first line: you've just closed your comment prematurely. The top should look like this:

/************************************
GENERAL
***********************************/
Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Jack. Can you paste your CSS here so we can take a look at it and better troubleshoot it with you?

Jack Xu
Jack Xu
595 Points
Jack Xu
Jack Xu
595 Points

CSS

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

header {
  font-family: 'Ubuntu', sans-serif;
}

a {
  text-decoration: none;
}

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

img {
  max-width: 100%;
  margin: 0px 0;
}

/***********************************
PAGE: about
************************************/

.profile-photo {
  margin: 5% 0;
  align-content: center;
  width: 40%;
  height: 40%;
}


/***********************************
PAGE: Contact
************************************/

.contact-info {
  list-style: none;
  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('../Images/phone.png');
}

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

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

#header {
  float: left;
  max-width: 100%:
}
*/

#logo {
  text-align:center;
  margin:0;
}

h1 {
  font-family: 'Ubuntu', sans-serif;
  margin: 0px 1%;
  font-size: 3em;
  font-weight:normal;
  line-height: 2em;
}

h2 {
   font-family: 'Ubuntu', sans-serif;
  margin: -15px 0 0;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1em;
}

h3 {
  font-family: 'Ubuntu', sans-serif;
  margin-top: 5%;
  padding: 10px;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  color: orange;
}

/***********************************
Navigation
************************************/

nav {
  font-size: 1.1em;
  text-align:center;
  padding: 10px 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 4% 2% 0 5%;
}

nav li {
  display: inline-block;
}

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


/***********************************
Footer
************************************/

footer {
  font-size: 0.8em;
  text-align:center;
  padding: 10px 0;
  margin: 20% 0 0 0;
  clear:both;
}

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



/***********************************
Portfolio
************************************/

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

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

#gallery li a p {
  Margin: 0px 0;
  padding: 2%;
  font-size: 0.95em;
  color: #000;
  background-color: #ECEDEB;
}


/***********************************
Colors
************************************/

body {
  color: #000;
  background: #ECEDEB;
}

header {
  background: #A0A39D;
  border-color: #EFFFE7;
}

h1, h2 {
  color: #fff;
}

nav a, nav a {
  color: #fff;
}

nav a.selected, nav a:hover {
  color: #328847;
}

p {
  color: #000;
}
Jack Xu
Jack Xu
595 Points
Jack Xu
Jack Xu
595 Points

Oh yeah.. Rookie mistake! Thanks a lot Ryan!

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Not rookie at all! These kinds of things sneak by all the time, so don't worry too much about it. :)

Jack Xu
Jack Xu
595 Points
Jack Xu
Jack Xu
595 Points

okay it does of course look a bit different in workspaces..

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

HI Ryan,

You can click on the '...' below your comment and change your comment to an answer.

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hey Jason. Yeah, I know, I just usually make a new comment (if a new comment has been started instead of a reply) so that my answer goes to the proper question and to ensure the other party gets a notification of a reply. :)

Edit: Oh, nvm, I see what you're saying now! Thanks for the head's up!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jack,

You have the option of selecting "Best Answer" if an answer solves your problem. This will let others know that the question has been solved.