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

HTML How to Make a Website Adding Pages to a Website Add and Style Icons

Vilius Grižas
Vilius Grižas
2,753 Points
Posted by Vilius Grižas
Vilius Grižas
2,753 Points

CSS test error. Specifying HTML tags.

Hey. I'm struggling to answer a question, what I write seems fine, but it doesn't work..

Question from a test: Select an ancor element inside the contact-info list. Then set them to block level elements.

This is what I did.

.contact-info li a{
  diplay:block;
}

I've also tried doing this:

.contact-info ul a{
  diplay:block;
}

and many more varieties, but it didn't work. Is there really a mistake I'm making? I want to believe that it's a kind of bug, but I'm sure many people passed it and it should be okay.

Oh and the error I'm getting is this: Did you set the display for links inside of the contact-info list to block?

css/main.css 
a {
  text-decoration: none;
}

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

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

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

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

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

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

nav li {
  display: inline-block;
}

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

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}
.contact-info{
font-size:0.9em;
margin:0;
padding:0;
list-style:none;
}
.contact-info ul a{
  diplay: block;
}
Vilius Grižas
Vilius Grižas
2,753 Points
Vilius Grižas
Vilius Grižas
2,753 Points

While creating comment I made a mistake instead of display I wrote diplay, but that's not the reason. Still doesn't work.

3 Answers

Ante Vujčić
Ante Vujčić
11,306 Points
Ante Vujčić
Ante Vujčić
11,306 Points

try out this: .contact-info a { display: block; }

Vilius Grižas
Vilius Grižas
2,753 Points
Vilius Grižas
Vilius Grižas
2,753 Points

Wow. Ir worked! But why? Is it the spacebar after a or something?

Ante Vujčić
Ante Vujčić
11,306 Points
Ante Vujčić
Ante Vujčić
11,306 Points

No, it's not spacebar I think that would even work without spacebar. Mistake in code was ul/li element that appear. First of all you cannot use .contact-info ul... because .contact-info already says that you are inside that ul element and you want to choose that anchor element and set it to block element so you have to choose all anchor elements with .contact-info a{}. But I am not sure why .contact-info li a {} doesn't work that seems ok. Hope it helped, enjoy coding :)

Vilius Grižas
Vilius Grižas
2,753 Points
Vilius Grižas
Vilius Grižas
2,753 Points

Indeed it did! Thanks a lot! Enjoy coding as well! Hope you reach what you're aiming for ;)