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.

CSS How to Make a Website Adding Pages to a Website Add Iconography

My bullets will not disappear, and I'm pretty sure all the code is right to remove bullets and add logos... Please help.

Main.css

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

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

.contact-info { 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'); }

3 Answers

Heh nevermind, I figured it out. I forgot to move the closing tag for the unordered list to the bottom of my list in contact.html. It should be right above the closing section tag. Whoops.

Like this:

      <section>
        <h3>Contact Details</h3>
        <ul class="contact-info"> /* tag was here */
          <li class="phone"><a href="tel:555-5555">555-5555</a></li>
          <li class="mail"><a href="mailto:fake@mail.com">fake@mail.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=joewode">@joewode</a></li>
        </ul> /* moved to here */
      </section>

Worked for me after that.

Thank you so much for this tip! it was exactly the issue I had. You rock!

Tomas Pavlik
Tomas Pavlik
26,726 Points

Hi Courtney, it would be better to see the complete code.... but... did you hide the bullets inside ul element by using list-style: none; ?

Tomas

Yes she did, you can see it on the first line.

I am also having this problem, the css in my document matches hers, but for some reason none of it is being applied to my contact page. Like its being ignored completely by the interpreter.

At first I had problems getting the twiiter and facebook icons to even show up in my workspaces img directory. Turns out they were being interfered with by ad-block plus, for some reason. Is it possible that this is due to to some other type of browser/plugin conflict? My code:

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

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

Using firefox 38.0.5