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 trialMichael Welsh
Front End Web Development Techdegree Student 9,248 PointsGetting 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>.
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');
Michael Welsh
Front End Web Development Techdegree Student 9,248 PointsWell that didn't post as clearly as I hoped it would. Sorry. I'm trying to remove my actual contact info from the code.
Jason Anders
Treehouse Moderator 145,860 PointsModified 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
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
Front End Web Development Techdegree Student 9,248 PointsI 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
Treehouse Moderator 145,860 PointsSorry 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...
Jason Anders
Treehouse Moderator 145,860 PointsJason Anders
Treehouse Moderator 145,860 PointsHey Michael, could you post your code, so we are able to help you troubleshoot.