#24045 closed defect (bug) (fixed)
Twenty Thirteen: Meta link underlining of icons plus underline is shifted due to pos:rel + top: -1px
Reported by: | nico23 | Owned by: | lancewillett |
---|---|---|---|
Milestone: | 3.6 | Priority: | normal |
Severity: | normal | Version: | 3.6 |
Component: | Bundled Theme | Keywords: | has-patch |
Focuses: | Cc: |
Description
Screenshot made on Firefox 20, Kubuntu
As seen here http://i.imagebanana.com/img/7hoy3bqq/2013.png the underline is shifted blow the icons, this happens because if the positioning of the :before pseudo.
There are many ways to get around this:
- Put the icon as its own element before the actual link and not inside the link, that one I personally would do especially because It looks kind of ugly to have the icons underlined in the first place, even when not shifted. Instead of a extra element the icons could be created by inside the <span>'s instead of inside the links. This also is especially true for tags because if there is more then one tag it looks odd if the icon is underlined with the first tag but the other tags not have a icon. Downside: hovering icons would not underline links.
- Use a advanced approach like you can see on twitter.com use
<a><ICON><b>link</b></a>
and then CSS likea:hover{ text-decoration: none } a:hover b { text-decoration: underline; }
this approach would underline the link even on hover if the icons. Could not be used on multiple links (for tags) this way though but again for tags the should no icon be underlined on hover anyway if you ask me.
Sidenote: It made me happy to see the love for details to move some icons for just one pixel. I did the exact same thing on themes I am working on before I saw twentythirteen ;)
PS: I wrote all of this assuming this is not Firefox only, and it was your intention to underline icons, now I see in Chrome the icons are not underlined. Should have tested it in Chrome before, but anyway. Technically it might be possible in Firefox to have the icon overlap the line, but I would advice to separate link and icon because there might still be issues with font-resizing and stuff like this coming up.
Attachments (2)
Change History (9)
#1
@
12 years ago
- Summary changed from Meta link underlining of icons plus underline is shifted due to pos:rel + top: -1px to Twentythirteen: Meta link underlining of icons plus underline is shifted due to pos:rel + top: -1px
#4
@
12 years ago
- Keywords has-patch added; 2nd-opinion dev-feedback removed
- Milestone changed from Awaiting Review to 3.6
Hey nico23, thanks for the report.
Could you update to the latest revision of Twenty Thirteen? This should be fixed by r23962. Thanks!