[wp-trac] [WordPress Trac] #24045: Meta link underlining of icons plus underline is shifted due to pos:rel + top: -1px
WordPress Trac
noreply at wordpress.org
Thu Apr 11 16:45:32 UTC 2013
#24045: Meta link underlining of icons plus underline is shifted due to pos:rel +
top: -1px
--------------------------------------+---------------------------
Reporter: nico23 | Type: defect (bug)
Status: new | Priority: normal
Milestone: Awaiting Review | Component: Bundled Theme
Version: trunk | Severity: normal
Keywords: 2nd-opinion dev-feedback |
--------------------------------------+---------------------------
[[Image(http://i.imagebanana.com/img/7hoy3bqq/2013.png)]]
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:
1. 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.
2. Use a advanced approach like you can see on twitter.com use
`<a><ICON><b>link</b></a>` and then CSS like
{{{
#!css
a: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.
--
Ticket URL: <http://core.trac.wordpress.org/ticket/24045>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software
More information about the wp-trac
mailing list