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 Helen Anderson
Helen Anderson
6,519 Points

a:hover - not covering whole of selected text

I'm using grey to hover over links. For example

a:hover {
    color: #ccc;
}

The default color is black-#33333.

Unfortunately, the hover is not covering all of the text, leaving black strips on the top of the letters. See image.

I've tried everything I can think of to clear the black stripes, the most effective being line height. But this has undesirable side-effects particularly if the line-height exceeds the default line height. That makes the text or line jump

Any ideas?

Thanks in advance

3 Answers

Zyad Sherif
Zyad Sherif
11,420 Points
Zyad Sherif
Zyad Sherif
11,420 Points

You have to post the code for us to track the problem, try http://codepen.io or http://jsfiddle.net put your code there and share the link to it.

Best

Helen Anderson
Helen Anderson
6,519 Points

Thanks Zyad

To clarify, I'm new at this, and just about everything I know is from treehouse. So, posting the code .... How much do I post? I'm working through the Wordpress theme track, customising my own site by extending Zac's course. Do I load the whole thing up there? Or will just the style sheets be sufficient.

Zyad Sherif
Zyad Sherif
11,420 Points

Helen, this should be done by pasting in the CSS code as well as a static HTML only version of the website -or at least the portion the has the bug- in one of the tools I mentioned earlier.

Helen Anderson
Helen Anderson
6,519 Points

Ok, a few challenges for newbies there:

  • how do I create an html version of the site?
  • github - have tried and failed to use this several times. Would love to see a github tutorial on treehouse starting at the very beginning. The github instructions, eg https://help.github.com/articles/set-up-git assume you have knowledge of how to navigate your mac's file structure and manage permissions
  • jsfiddle - cannot get it to work with the files I have, esp. as don't know how to convert wordpress files into an html version of the site. Another idea for a treehouse tutorial.
Louis Otto
Louis Otto
23,264 Points
Louis Otto
Louis Otto
23,264 Points

Zyad is right, also, you may want to see if the problem persists in different browsers, to be sure it isn't a simple render issue.

Helen Anderson
Helen Anderson
6,519 Points

Thanks Louis

Have tested across browsers and issue occurs in Chrome and Safari, but not in Firefox.

So, if the issue is browser specific, what do you suggest?

Thanks Helen

Web Developers
Web Developers
1,352 Points
Web Developers
Web Developers
1,352 Points

Could also help if you tell us the software/setup used for the image in testing.

Helen Anderson
Helen Anderson
6,519 Points

I'm playing around with the Wordpress theme from Zac's course to create my own Wordpress site. I haven't made the site public yet,as I'm personalising my site before working through the last set of videos.

The screenshot is in a chrome browser, hosted locally as instructed by the Wordpress theme course.

I've replaced the fonts Zac used, for the example image the font is Junction from here http://www.theleagueofmoveabletype.com/junction I'm also using a free google font.

The issue is happening with both fonts.