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

Design Web Typography Final Project: Create a Typographic Site Header and Summary

Posted by Charlotte Curran
Charlotte Curran
4,710 Points

weird dotted underline beneath the small caps

I've followed the videos, but all the text that's in the small caps have this weird dotted underline and i'm not sure where that would've come from. i see no css styling that would cause this. how do i fix this and why is it there?

1 Answer

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

This is happening because in the CSS Zen Garden markup, "CSS" is in <abbr> tags, which are used to denote that something is an abbreviation-- you can include a title attribute set to the full name, which will show in a tooltip on hover. What you're seeing is likely your browser's default styling for <abbr> tags, since the underline makes it obvious to the user that something will happen if they hover over or click on the text.

In Chrome, this is the styling that's being applied:

abbr[title] {
    text-decoration: underline dotted;
}

So if you did not want that styling, you could write the following in your own stylesheet:

abbr {
    text-decoration: none;
}

Your stylesheet will override the user agent (browser) one, so you should be set!