[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