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 Kevin Tran
Kevin Tran
980 Points

Mail and phone background-image(s) are not showing up :(

I have been struggling to solve this, but I can't figure it out. I am unable to display the images for mail and phone.

1) The images are located: img/mail.png and img/phone.png. As mentioned in previous discussions, the 'i' is lowercase.

html:

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8"> 
    <title>Kevin Tran | Programmer</title> 
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,800,700|Changa+One' rel='stylesheet' type='text/css'> 
    <!--above custom css b/c custom css refers to fonts -->  
    <link rel="stylesheet" href="css/main.css">        
    <!-- normalize goes first so we can structure with our own css-->

  </head> 

  <body> 

    <!-- because we're working with other pages in the nav, we want to keep the same header and footer but we change the class selected to about. want to leave a blanck section-->
    <header>  
      <a href="index.html" id="logo">
        <h1>Kevin Tran</h1>
        <h2>Programmer</h2>
      </a>
       <nav>
         <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li> <!-- b/c we start here-->
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section><!-- creates two columns in desktop view, 1 or stacked in mobile-->
        <h3>General Information</h3>
          <p> The thirst for knowledge is quite real.</p>
          <p> Please only use phone contact for urgent inquiries. Otherwise, email is the best way to reach me.</p>
      </section>

      <section>       
        <h3>Contact Details</h3>   
        <ul class="contact-info">
          <li class="phone"><a href="tel:408-xxx-xxxx">408-xxx-xxxx</a></li> 
<!--if you bring up this website on mobile browser, tapping on this number will begin to dial the number-->

          <li class="mail"><a href="mailto:trank.kevin@gmail.com">trank.kevin@gmail.com</a></li>
<!-- This will tell the browser that this is an email address that the user can email to-->
        </ul>
      </section>

css

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

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

.contact-info a {
 display: block; <!-- says that each anchor will take up a space -->
  min-height: 20px;<!-- minimum height at which your icons will be fully visible-->
  background-repeat: no-repeat; <!-- only want image to display once  -->
  background-size: 20px 20px; <!-- Will resize the background -->
/*  padding: 0 0 0 30px; <!-- want extra space on the interior of the element's left side, thats where images will be going. will push text to right, so image can have pace-->*/
  margin: 0 0 10px; 
}

.contact-info li.phone a { <!--goes to class contact-info then to list item with the class  phone and then selecting anchor element-->
  background-image: url('../img/phone.png'); <!-- path to image-->
}

.contact-info li.mail a { <!--goes to class contact-info then to list item with the class  mail and then selecting the anchor element-->
  background-image: url('../img/mail.png'); <!-- path to image-->

}
Kevin Tran
Kevin Tran
980 Points

I also noticed that when I press on my e-mail, I am not redirected.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

What's happening with your email link?

I believe the mailto: link only works if you have a default mail client set up on your computer.

For example, on my computer I have an email account set up with thunderbird.

So if I click on a mailto: link then I'll get a compose message window from thunderbird that pops up and then I can write what I need to and send it.

Kevin Tran
Kevin Tran
980 Points

Therein lies my problem. I don't have a mail client set up. I thought that by having chrome connected to my gmail account, it would redirect there and compose through the website. But I understand the purpose behind having a client in order to have the functionality.

You have been most helpful, sir.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I did a search on google and it does look like there's a way to do it: http://lifehacker.com/5883372/set-gmail-as-your-browsers-default-email-client-with-a-simple-hack

You're not going to be able to count on your website visitors doing this but you can certainly do it if you want it for yourself.

It looks like this can be made to work in both firefox and chrome and for other web based email clients besides gmail.

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Kevin,

You have html style comments in your css file - <!-- html comment -->

This will cause the browser to ignore all those style declarations.

You have to switch over to css style comments - /* css comment */

You've also commented out the 30px of left padding which is what is making room for the images.

Re-post your updated css if you're still having problems after fixing the comments.

Kevin Tran
Kevin Tran
980 Points

UNFFFF winner winner chicken dinner! You are my savior.

http://i.imgur.com/T7eX9a2.gif