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 How to Make a Website Adding Pages to a Website Add Iconography

Posted by Courtney Church
Courtney Church
1,405 Points

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

joewode
joewode
13,803 Points
joewode
joewode
13,803 Points

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.

Matt Luker
Matt Luker
7,117 Points

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

Tomas Pavlik
Tomas Pavlik
26,726 Points
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

joewode
joewode
13,803 Points
joewode
joewode
13,803 Points

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