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

Michael Welsh
seal-mask
.a{fill-rule:evenodd;}techdegree
Michael Welsh
Front End Web Development Techdegree Student 9,248 Points
Posted by Michael Welsh
.a{fill-rule:evenodd;}techdegree
Michael Welsh
Front End Web Development Techdegree Student 9,248 Points

Getting a duplicate image above my top image.

The background images for the contact links work just fine for the bottom two links. The top however, has a duplicate image above it. It doesn't matter which image I use. If I swap locations of the links it just puts a duplicate of whichever image is first in the <ul>.

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Michael, could you post your code, so we are able to help you troubleshoot.

Michael Welsh
seal-mask
.a{fill-rule:evenodd;}techdegree
Michael Welsh
Front End Web Development Techdegree Student 9,248 Points
Michael Welsh
.a{fill-rule:evenodd;}techdegree
Michael Welsh
Front End Web Development Techdegree Student 9,248 Points 
.contact-info{
    list-style: none;
    padding: 0;
    margin: 0 0 0 15%;
    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('../image/phone.jpg');
}
.contact-info li.mail a{
    background-image: url('../image/mail.png');
}
.contact-info li.twitter a{
    background-image: url('../image/twitter.jpg');
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Modified the post to format the code for the forum. If you would like to see how that was done, you can just click "edit comment" on your comment. There are 3 backticks with the programming language name as an opener, and then three closing backticks after the code. :)

Michael Welsh
seal-mask
.a{fill-rule:evenodd;}techdegree
Michael Welsh
Front End Web Development Techdegree Student 9,248 Points
Michael Welsh
.a{fill-rule:evenodd;}techdegree
Michael Welsh
Front End Web Development Techdegree Student 9,248 Points

'''HTML <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:"></a></li> <li class="mail"><a href="mailto:@gmail.com">@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=">@</a></li> </ul> </section> '''

Michael Welsh
seal-mask
.a{fill-rule:evenodd;}techdegree
Michael Welsh
Front End Web Development Techdegree Student 9,248 Points
Michael Welsh
.a{fill-rule:evenodd;}techdegree
Michael Welsh
Front End Web Development Techdegree Student 9,248 Points

I am still completely baffled and not entirely sure how else to explain it. When I inspect the element within the browser, it says that the top link has a height of 50px, which is why I think the image is repeating itself. The other images are all 20px. I have tried changing the max height. I am super confused and have been staring at this problem for hours, while I probably should have just moved on. It's probably some stupid change I made in the CSS a few days ago that I don't have the technical skill to see.

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Sorry Michael,

I have no explanation. Your code seems to be all correct and should be outputting the single image for each of the contact links.

Once I formatted you code for the forum, I did notice a weird anomaly with the background-size declaration in the .contact-info a selector. If you notice, the hyphen is not coloured properly with the syntax. I don't know if this is a glitch or what, but your code should not be putting out duplicate images that I can tell.

I even rewatched the video, and your code matches Nick's... I don't know.

I guess it may be time to just move on and chalk this one up to a weird glitch... :confused: