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 Arturo Espinoza
Arturo Espinoza
9,181 Points

:hover and :active help

I am using a tiny favicon icon over nav links (nav a:hover). For the most part they work fine but when I hover over a link that is too long it gets cut or moves from the center. I've tried everything and cant seem to get it to center.

http://imgur.com/5JvMv90

nav a:hover,
.current_page_parent,
.current_page_item {
  background: url('http://...faviconred.ico') no-repeat center top;
  color: red;
  min-height: 20px;
  padding: 15px 0px 0px 0px;
 }

nav a:active,
.current_page_parent,
.current_page_item {
  background: url('http://...faviconredanim.gif') no-repeat center top;
}

2 Answers

Thorsten Herbst
Thorsten Herbst
11,935 Points
Thorsten Herbst
Thorsten Herbst
11,935 Points

Could you post the html code please? seems like you have a problem with the surrounding elements.

Arturo Espinoza
Arturo Espinoza
9,181 Points
Arturo Espinoza
Arturo Espinoza
9,181 Points

I cant really post the html. It was done in wordpress so I don't have an actual html for each page. But you can see the site itself if this will help you . I don't want the :hover selector to activate when a link is :active.

Konrad Pilch
Konrad Pilch
2,435 Points

Vie source -> copy _> paste in tree-house forum. Or give us the link.