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
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsHelp
I'm getting unusual results using svg images as li items in a ul.
Codepen is not fully rendering the problems but here is the link:
http://codepen.io/dhawkinson/collab/dMmVvm/
HTML
<div class="cardItem">
<h2>Contact Details</h2>
<ul class="details">
<li class="phone contactInfo"><a href="tel:206.910.3655">206.910.3655</a></li>
<li class="email contactInfo"><a href="mailto:doug5solas@gmail.com">doug5solas@gmail.com</a></li>
<li><a class="linkedin contactInfo" href="https://linkedin.com/in/doug5solas">linkedin</a></li>
<li><a class="twitter contactInfo" href="https://twitter.com/Doug5Solas">twitter</a></li>
<li><a class="github contactInfo" href="https://github.com/dhawkinson/personalProfile.git">github</a></li>
<li class="facebook contactInfo"><a href="https://facebook.com/doug5solas/">facebook</a></li>
</ul>
</div><!-- end of card -->
CSS
#contact a {
color:#212121;
}
#contact a:link,
#contact a:visited {
text-decoration: none;
}
li.contactInfo {
display: block;
margin-left: -25px;
width: 30px;
height: 30px;
background-size: 30px 30px;
opacity: .4;
transition: all .5s;
}
#contact li.phone {
background-image: url("images/iphone.svg");
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 3em;
}
#contact li.email {
background-image: url("images/email.svg");
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 3em;
}
#contact li.linkedin {
background-image: url("images/linkedin.svg");
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 3em;
}
#contact li.twitter {
background-image: url("images/twitter.svg");
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 3em;
}
#contact li.github {
background-image: url("images/github.svg");
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 3em;
}
#contact li.facebook {
background-image: url("images/facebook.svg");
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 3em;
}
What you can see in the codepen will help this explanation:
BTW, this was working about 36 hours ago using png items. I didn't like the inconsistency of the look and feel of those images so I decided to standardize on svgs.
I created the six svg icons used in the CSS and loaded them into the images file. I got the tool to build the images here; http://www.erikmoberg.net/iconmaker. I do not have the experience to build my own svgs. BTW the svgs are in the assets file on codepen.
I then replaced the references to the pngs with svg references. In live mode all of the links work as they should. the bullets (icons) for phone, email and facebook actually do appear to the left of the text with a couple of ems worth of separation. The icons for twitter, linkedin and gthub do not show at all, hence the shifting of the text to the left. I've compared the HTML and CSS and can't determine the reason for failure. The code structure for each li is identical except for the name of the image so that shouldn't be a problem.
It is probably some obscure little nit that is causing the failure but I have looked at it too long now to see it.
Help please.
2 Answers
Seth Kroger
56,413 PointsIn your HTML you're inconsistent in where you put the classes. On some you put the classes in the li tag and others you put them in the a tag. Put from the CSS you should be putting the classes on the li tag. Note that the ones where you put the classes on the anchors instead are the same ones that don't display the icons.
Joe Schultz
6,191 PointsYour image files are in a different folder than your css file. Try:
background-image: url("..images/email.svg");
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsOK I'll try that. But Half of them are working and half are not.
Well Joe, I made the change. It didn't work. Seems like it should have but, no! Thanks.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsDoug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsSeth, once again you showed up, ready to play. I have been looking at that for a day and a half and I didn't notice the inconsistency. Forest for the trees. Thanks so much. Not a difficult solution, but definitely in my blindspot.