Add Iconography part is not updating.

Question

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.

Answer 1 · 2014-07-30T17:43:14Z

July 30, 2014 5:43pm

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

Answer 2 · 2014-07-30T18:40:10Z

July 30, 2014 6:40pm

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

Answer 3 · 2014-07-30T18:55:53Z

July 30, 2014 6:55pm

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

Answer 4 · 2014-07-30T21:11:09Z

July 30, 2014 9:11pm

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>

Answer 5 · 2014-07-30T22:41:59Z

July 30, 2014 10:41pm

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.

Answer 6 · 2014-07-30T22:43:25Z

July 30, 2014 10:43pm

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

Answer 7 · 2014-07-30T23:08:02Z

July 30, 2014 11:08pm

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

Answer 8 · 2014-07-30T23:12:55Z

July 30, 2014 11:12pm

Anytime! your welcome, Good luck and happy coding!

Answer 9 · 2014-07-31T12:16:00Z

July 31, 2014 12:16pm

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.

Answer 10 · 2014-07-31T13:30:14Z

July 31, 2014 1:30pm

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

Answer 11 · 2014-07-31T13:32:00Z

July 31, 2014 1:32pm

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

Answer 12 · 2014-07-31T13:33:27Z

July 31, 2014 1:33pm

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?

Answer 13 · 2014-07-31T14:07:42Z

July 31, 2014 2:07pm

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

Thanks so much guys.

Answer 14 · 2014-07-31T14:25:48Z

July 31, 2014 2:25pm

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; }

Answer 15 · 2014-07-31T14:51:47Z

July 31, 2014 2:51pm

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)?

Answer 16 · 2014-07-31T15:04:00Z

July 31, 2014 3:04pm

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?

Answer 17 · 2014-07-31T15:36:23Z

July 31, 2014 3:36pm

Hi everyone,

Two things:

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

Answer 18 · 2014-07-31T16:40:12Z

July 31, 2014 4:40pm

Hi Nick,

Hope this helps:

https://www.dropbox.com/s/hnrgnbvxmke1h35/Workspace%20Web%20Design

Thanks

Answer 19 · 2014-07-31T16:53:53Z

July 31, 2014 4:53pm

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.

Answer 20 · 2014-07-31T17:01:34Z

July 31, 2014 5:01pm

Hi Bogdan,

Yup, that fixed it. Thanks!

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

Welcome to the Treehouse Community

Looking to learn something new?

Andrew Shipley

Andrew Shipley

Add Iconography part is not updating.

20 Answers

Justin Budd

Justin Budd

Andrew Shipley

Andrew Shipley

Justin Budd

Justin Budd

Andrew Shipley

Andrew Shipley

Justin Budd

Justin Budd

Justin Budd

Justin Budd

Andrew Shipley

Andrew Shipley

Justin Budd

Justin Budd

Andrew Shipley

Andrew Shipley

Bogdan Ciocsan

Bogdan Ciocsan

Andrew Shipley

Andrew Shipley

Bogdan Ciocsan

Bogdan Ciocsan

Justin Budd

Justin Budd

Andrew Shipley

Andrew Shipley

Andrew Shipley

Andrew Shipley

Bogdan Ciocsan

Bogdan Ciocsan

Andrew Shipley

Andrew Shipley

Bogdan Ciocsan

Bogdan Ciocsan

Andrew Shipley

Andrew Shipley

Bogdan Ciocsan

Bogdan Ciocsan

Nick Pettit

Nick Pettit

Andrew Shipley

Andrew Shipley

Nick Pettit

Nick Pettit

Andrew Shipley

Andrew Shipley

Bogdan Ciocsan

Bogdan Ciocsan

Justin Budd

Justin Budd

Andrew Shipley

Andrew Shipley

Bogdan Ciocsan

Bogdan Ciocsan