Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

I am receiving errors from the validator website

They say something is wrong with this section in html. </nav> </header> <div id="wrapper"> <section> They say something is wrong with this section in html.

In CSS it said there is an error:

gallery li a p Value Error : font Parse Error size:0.20em

I don't understand.

5 Answers

Ali Esmaili
Ali Esmaili
7,985 Points

Could you show us the rest of the HTML code, & possibly the CSS code in question?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cristian Castro | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,800,700,600|Bevan' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Cristian Castro</h1> <h2>Photographer</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 id="gallery"> <li> <a href="img/church.jpg" alt=""> <img src="img/church.jpg" alt=""> <p>Cathedral of Cartagena, Colombia</p> </a> </li> <li> <a href="img/boat.jpg" alt=""> <img src="img/boat.jpg" alt=""> <p>Tropical islands of Cartagena</p> </a> </li> <li> <a href="img/burger.jpg" alt=""> <img src="img/burger.jpg" alt=""> <p>Yummy! Delicious burger!</p> </a> </li> <li> <a href="img/flowers.jpg" alt=""> <img src="img/flowers.jpg" alt=""> <p>Some tropical flowers you can find in Cartagena, Colombia</p> </a> </li> <li> <a href="img/light.jpg" alt=""> <img src="img/light.jpg" alt=""> <p>A light outside Gabriel Garcia Marquez house in Cartagena, Colombia</p> </a> </li> </ul> </section> <footer> <a href="http://www.facebook.com/ccriscastphoto/"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social_icon"></a> <p>© 2016 Cris Cast Photography.</p> </footer> </div> </body> </html>

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

body{ font-family: 'Work 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 0 30px 0; padding: 5px 0 0 0; width: 100% }

logo {

text-align:center; margin:0; }

h1 { font-family: 'Bevan', 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; }

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

nav li{ display:inline-block; }

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

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

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

.social_icon { width:30px; height:30px; margin: 0 5px }

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

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float:left; width: 45%; margin: 2.5%; background-color: #303030; color: #fff; }

gallery li a p {

margin:0; padding:5%; font size:0.20em; color: #707070; }

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

.profile-photo { display:block; max-width: 200px; margin: 0 auto 30px; border-radius: 100%; }

/************************ PAGE: ABOUT ************************/

.profile-photo { display:block; max-width: 200px; margin: 0 auto 30px; border-radius: 100%; }

/************************ 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'); }

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

/* site body */ body{ background-color: #333; color: #999;
}

/* black header */ header { background: #000; border-color: #f23; }

/* nav background on mobile devices */ nav { background: #f23; }

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

/* links */ a { color: #fff; }

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

/* selected nav link */ nav a.selected, nav a:hover{ color: #800

Ali Esmaili
Ali Esmaili
7,985 Points

For The Question You Asked:

I think your issue is that in your CSS, you forgot to put a hyphen in one of your selector properties. You accidentally wrote font size: instead of font-size:, like so...

/* What you wrote */
#gallery li a p {
  color: #707070;
  font size: 0.20em;
  margin: 0;
  padding: 5%;
}

/* What you meant to write */
#gallery li a p {
  color: #707070;
  font-size: 0.20em;
  margin: 0;
  padding: 5%;
}

This should solve your problem.

Ali Esmaili
Ali Esmaili
7,985 Points

I have a few more notes for you. If you're not interested, completely ignore this post. : p

Follow-Up Note:

In your HTML file, do you have the !DOCTYPE, html, head, and body tags? I'm not seeing them in the example you provided. Your file should look something like this...

<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Page setup, like the meta tags you already have -->
  </head>

  <body>
    <!-- Website or app content, like the header and div tags you included -->
  </body>
</html>
A Second Follow-Up:

The a ("hyperlink") tags in your HTML don't support the alt property. You can remove them, because they won't do anything...

    <!-- What you have -->
            <a href="img/boat.jpg" alt="">

    <!-- What will be supported -->
            <a href="img/boat.jpg">
Hey Look, Another Follow-Up:

You could clean up your CSS file, so that you can diagnose things a little bit better. Here are a couple of pointers...

  • Do you find yourself repeating code/properties? Try combining some of those selectors! In some cases you will need to be more specific, but until you come to those scenarios, try not to repeat yourself...
/* A few selectors that are repeating */
h1,
h2 {
  color: #fff;
}

a {
  color: #fff;
}

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

/* The same selectors sharing a repeating property */
a,
h1,
h2,
nav a,
nav a:visited {
  color: #fff;
}
  • It looks like you have some overqualified selectors, which means you are being more specific than you need to be [HOWEVER, if you use different elements in different rules with the same class (e.g. nav a.selected and nav i.selected) and you want them to act differently, ignore this]...
/* One of the overqualified selectors */
nav a.selected,
nav a:hover {
  color: #800;
}

/* The alternative that should have the same result */
nav .selected,
nav .selected:hover {
  color: #800;
}
  • When writing CSS, it's much more readable and easier to diagnose when you write multi-line instead of inline.
  • Don't forget to use semicolons. Forgetting one could mess things up unexpectedly and they're easy to miss.

I hope this has been helpful. : )

Ali Esmaili
Ali Esmaili
7,985 Points

Cristian Castro – Did my response help?