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

Posted by Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

SVG Question

Hi All

I have made my first move to using SVG's on this site I am using these as a roll over and they seem to be throwing up an odd little black pixel at the bottom of the image in Chrome (not tested in anything else) - does anyone know why this might be happening please.

G

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Yes,

In the bootstrap.css file somewhere around line 238 there are anchor pseudo classes

a:hover, a:focus

and these pseudo classes have this:

color: rgb(0, 85, 128);
text-decoration: underline;

That is where the underline is coming in. When I disable the text-decoration attribute the underline disappears. You just need to find the best solution for you to fix that. If you over ride that class, it will effect all anchors, so you should be able to give those social media anchors a special class to override the bootstrap anchor classes that are giving you problems.

Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Hi Kevin

Thanks for that - should have looked down my developer tools - it just did not even occur to me it would be an underline issues.

G

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

No worries Graham! Sometimes it just takes a second set of eyes. Sounds like you found your answer, so I'll post what I found to work for anybody who may stumble across this later.

   ul.social a:hover, ul.social a:active {
    text-decoration: none;
}
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

It does indeed Kevin, you are not wrong there.

Thanks again

G

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I solved it, but I'll you try to solve it first.