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

General Discussion

Posted by A. S.
A. S.
1,300 Points

Can't get rid of bullets in list?

Hi-- 

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

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

I wrote this code to get rid of the bullets in my unordered list. What could be effecting the code that would make it still appear with bullets?

Thanks!

A. S.
A. S.
1,300 Points

Relevant html

  <section id="secondary">
          <h3>Contact Details</h3>
          <ul class="contact info">
            <li class="phone"><a href="tel:555-555-5555"> 555-555-5555</a></li>
            <li class"mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
            <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
          </ul>
        </section>

4 Answers

A. S.
A. S.
1,300 Points
A. S.
A. S.
1,300 Points

It might help to explain it is this whole piece of code that is not working the way I expect it to: 

/**************************************
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');
}
Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

In your html, you have your ul with a class of contact info, but your css is for contact-info. Just add the hyphen into your html class name. Should work.

A. S.
A. S.
1,300 Points
A. S.
A. S.
1,300 Points

Thanks! It did work-- still getting used to checking for all those details and it get's maddening-- I'm happy you helped catch it.

Joseph Greevy
Joseph Greevy
4,990 Points
Joseph Greevy
Joseph Greevy
4,990 Points

sorry didnt see answer can't delete lol