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 Iconography

Add Iconography part is not updating.

Hi I am up to the "Add Iconography" part of the Web Design track in the title but it is not showing the changes on the site.

Can anyone see my code and tell me what's wrong?

Thanks.

20 Answers

can you post your code? I'd be more than happy to take a look. You may also reference this code from my style sheet for that project.

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

Hi, thanks.

I can't seem to get the bullet point to disappear for the list items, also the email icon won't appear:

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

can you send your link to your test page or post the html for the contact page? I don't see anything in that code snippet that stands out that would prevent it from now showing Thanks

Here it is, thank a lot!

http://web-2naxm45xvk.treehouse-app.com/contact.html

<!DOCTYPE html> <html> <head> <title>Andrew Shipley | Designer</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/normalise.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">

</head> <body> <div id="wrapper"> <header> <a href="index.html" id="logo"> <h1>Andrew Shipley</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" >Portflio</a></li> <li><a href="about.html" >About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <section> <h3>General Information</h3> <p>I am currently looking for new design work, so please don't hesitate to contact me via my Twitter handle.</p> <p>Please only use phone contact for urgent inquiries, otherwise Twitter and Email are the best ways to reach me.</p>

</section>
  <section>
    <h3>Contact Details</h3>
  <ul class="contact-info">
      <li class="phone"><a href="tel:+44-151-920-8725">+44-151-920-8725</a></li>
    <li class="email"><A href="mailto:andrewdshipley@googlemail.com">andrewdshipley@googlemail.com</A></li>
    <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=mootonandrew">@mootonandrew</a></li>
    </ul>
  </section>
<footer>
  <a href="http://twitter.com/mootonandrew"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
  <a href="https://www.facebook.com/andrew.shipley.167"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
  <p>&copy; 2014 Andrew Shipley.</p>
</footer>
  </div>

</body> </html>

Check your 2nd list item in the list
<li class="email"><A href="mailto:andrewdshipley@googlemail.com">andrewdshipley@googlemail.com</A></li> change both "A's to lower case "a" so it should read <a href="mailto:andrewdshipley@googlemail.com">andrewdshipley@googlemail.com</a> next change the class id in your email section from class="email" to class="mail"so it matches the same thing in your typed in your css file after i made those two changes it worked in my test environment where i just copied your code into a spot on my page. last thing just make sure the the pictures exist inside your img folder and aren't accidently outside that folder. lastly make sure you have your window sized like he does in the video so everything lines up under each other until you get to the repsonisve webpage section. Let me know if that this works for you.

im not sure how to post the code like you did or i would do that for ya sorry

Awesome! Thanks Justin, I will give this a shot tomorrow as its late here.

Anytime! your welcome, Good luck and happy coding!

That worked, except for the bullet points next to the unordered list.

Does anyone know the correct code to make to bullet points go away please?

This is my corresponding HTML and CSS.

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

html<ul class="contact-info"> <li class="phone"><a href="tel:+44-151-920-8725">+44-151-920-8725</a></li> <li class="mail"><a href="mailto:andrewdshipley@googlemail.com">andrewdshipley@googlemail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=mootonandrew">@mootonandrew</a></li> </ul>`

Thanks.

Bogdan Ciocsan
Bogdan Ciocsan
4,861 Points

The following CSS should remove the bullet points:

 .contact-info li { list-style-type:none; }

Thanks for your help Bogdan, but it didn't work.

Bogdan Ciocsan
Bogdan Ciocsan
4,861 Points

Can you link to your project so we can see why it's not working?

the list-style: none; should do it but try changing it to list-style-type: none; i've seen some other forms state the other way maybe even target the .contact-info ul { list-style: none; ) specifically as well i see you did try targeting the li. i know google chrome does not recognize my .selected class but other browsers do maybe it is a browser issue. have you tried on a different browser?

Only tried it on chrome so far.

Here's the link: http://web-2naxm45xvk.treehouse-app.com/contact.html

Thanks so much guys.

Bogdan Ciocsan
Bogdan Ciocsan
4,861 Points

Hi Andrew, I think your code is not working because of a bad referenced link in the head section of your page (a css file is getting a 404 error). Replace the normalize.css link with this one: http://web-2naxm45xvk.treehouse-app.com/css/normalize.css and it might fix your problem. (in your current setup you have misspelled the word normalize).

I would also suggest you add the following code afterwards in your main.css file:

ul.contact-info li {  list-style-type:none; }

HI Bogdan,

Just tried your suggestions, changed the misspelling but still didn't work.

I am still linking to the relative normalize.css link in my workspaces because I know I definitely uploaded it there.

Thanks.

Bogdan Ciocsan
Bogdan Ciocsan
4,861 Points

Hi Andrew, I can't understand why it's not working.

I created a test workspace and copy pasted your code from your contact page, along with the two css files. The link is here: http://web-w42tt5puho.treehouse-app.com/contact.html

I just added the following line in main.css

ul.contact-info li {
  list-style:none; 
}

You can see that it's working here. The images are not loaded because I did not download them into my workspace.

PS: When you check your page, do you click on CTRL + F5 (clear the cache)?

Hi Bogdan,

I tried doing F5 for the first time but still didn't work. This is my code now:

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

Does anyone know if someone from Treehouse can get in my workspace and possible show me what's going wrong here?

Bogdan Ciocsan
Bogdan Ciocsan
4,861 Points

Might be that your workspace is not updating your css files. You can try contacting support at this following link: http://teamtreehouse.com/support and give them a link with your thread, it would be easier than having to explain your problem. Good luck!

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Hi everyone,

Two things:

  1. You shouldn't share links from Workspaces. They will only work for about 15 minutes after you close your Workspace (all the ones I clicked on here don't work).
  2. The list-style property will work better if its attached to the unordered list element. The following code should get rid of bullet points:
ul.contact-info { list-style: none; }

Hi Nick,

Thanks for your help. I tried your suggestion but it still did not work.

Andrew

Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Andrew,

Sorry that didn't work out! Do you have anywhere to host your code (like Dropbox)? You can download all your code from a Workspace as a zip file, upload it someplace, and then share the link here. That will make it a lot easier to debug. :)

Bogdan Ciocsan
Bogdan Ciocsan
4,861 Points

Hi Andrew.

I fixed your problem: https://www.dropbox.com/s/k5c2smbtf90is0n/workspace.zip

It was because of the following thing:

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

that was missing a "/" at the start.

Nick Pettit I hope you don't mind I intervenied :-) It was just bugging me to know why it was not working.

it's always the small things we overlook. I was writing something in c# and forgot a " ; " at the end of one of my statements and it took me forever to find.

Hi Bogdan,

Yup, that fixed it. Thanks!

No need for the extra "ul" before the ".contact-info" either.

Bogdan Ciocsan
Bogdan Ciocsan
4,861 Points

Great to hear that! You're more than welcome! And yes ".contact-info" should have worked from the start, because it was selecting the correct 'ul'. I guess it's just as Justin said, we tend to overlook small things that can ruin our code :-)