Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 11 years 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's profile nico23 Owned by: lancewillett's profile 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 11 years ago.
24045.1.diff (1.0 KB) - added by lancewillett 11 years ago.

Download all attachments as: .zip

Change History (9)

#1 @nico23
11 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

#2 @obenland
11 years ago

Hey nico23, thanks for the report.

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

#3 @obenland
11 years ago

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

@lancewillett
11 years ago

#4 @lancewillett
11 years ago

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

#5 @lancewillett
11 years ago

Updated patch to include RTL support.

#6 @lancewillett
11 years 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.

#7 @SergeyBiryukov
11 years 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.