WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 12 months ago

Last modified 12 months ago

#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

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
    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.

Attachments (2)

24045.diff (455 bytes) - added by lancewillett 12 months ago.
24045.1.diff (1.0 KB) - added by lancewillett 12 months ago.

Download all attachments as: .zip

Change History (9)

comment:1 nico2312 months 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

comment:2 obenland12 months ago

Hey nico23, thanks for the report.

Could you update to the latest revision of Twenty Thirteen? This should be fixed by r23962. Thanks!

comment:3 obenland12 months ago

Never mind, the part that would have fixed that was not in there.

lancewillett12 months ago

comment:4 lancewillett12 months ago

  • Keywords has-patch added; 2nd-opinion dev-feedback removed
  • Milestone changed from Awaiting Review to 3.6

lancewillett12 months ago

comment:5 lancewillett12 months ago

Updated patch to include RTL support.

comment:6 lancewillett12 months ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 23966:

Twenty Thirteen: change Genericon element display to inline-block to avoid underlining the icon when its related element wrapped in a link. Props obenland, fixes #24045.

comment:7 SergeyBiryukov12 months ago

  • Summary changed from Twentythirteen: Meta link underlining of icons plus underline is shifted due to pos:rel + top: -1px to Twenty Thirteen: Meta link underlining of icons plus underline is shifted due to pos:rel + top: -1px
Note: See TracTickets for help on using tickets.