Wikipedia links have a large upper and lower padding

Only recently, links to Wikipedia using the [Wikipedia:] namespace have a surprisingly large upper and lower distance to the rest of the text:



The dotted line is a Firefox feature highlighting the link that was clicked most recently.

This effect is limited to Firefox only; MSIE doesn't have any problems of this kind.
(I did only test with login in Firefox and without login in MSIE though.)
I'm reporting it because the "vanishing check-box" turned out to be a CSS issue and this one might be of a similar kind.

I'm not able to reproduce that on:

Firefox 13.0.1 on Windows
Firefox 13.0.1 on Linux
Firefox 8.0.1 on Mac
Firefox 12.0 on Mac
Firefox 13.0.1 on Mac
Chrome 20.0.1132.47 m on Windows
Chrome 21.0.1176.0 on Mac
Chrome 19.0.1084.56 on Mac
Safari 5.1.2 (6534.52.7) on Mac

The CSS class on those links is "interwiki" which should show up with similar things, like ↗tsukaima?

(The vanishing checkbox issue was the Prototype JavaScript library replacing one of the functions I already had in the page.)

Edited on 07/10/2012 07:21 PM.

Yes, that "tsukaima" link shows the same effect on my PC. (Firefox 13.0.1 on Windows here.)

Where is "interwiki" defined? I can't find it in "http://static-anime.mikomi.org/themes/default/base.2011-07-01-01.min.css".

Edited on 07/10/2012 01:34 PM.

It's not currently defined, actually. Looking through the computed styles I don't see anything obviously problematic, but I'm not sure that I would, as it looks fine to me. Ok, let's try another test... does this show the same problem ↗tsukaima?

How about this tsukaima?

Edited on 07/10/2012 07:15 PM.

The first one does have the problem, the second does not. And I remember the problem having appeared months or even years ago already, and it was linked to that arrow as starting character of the Wikipedia link somehow back then as well.

Test: The "↗" character alone creates that additional space already when I cut & paste it into this input form.

Writing ↗ as "↗" has the same effect but only after "preview"ing this posting.

Edited on 07/10/2012 09:18 PM.

Ok, so there must be something about the fonts on your computer, firefox and that unicode character...

I tried various fonts (letting them overrule the ones CAR is using), and various character encodings in Firefox other than Unicode. The effect doesn't go away. But as it appears to be a local issue somehow you should probably close this bug, even as unresolved.

I may look for another way of representing the offsite links, because if it's happening to you, you're probably not alone.

Remember that it's a Firefox only effect on my side, MSIE doesn't have it (as posted above). So it might be some side effect of me installing additional stuff (plugins) for Firefox (I do upgrade Firefox frequently so it could have been one of these updates but you checked the same versions as mine). And I do consider the arrow intuitive.

Then again, even when I move my userContent.css file away and restart Firefox (and the effects I have configured there vanish, such as my personal link colors overriding site CSS and the like), the arrow still has this excessive character box height.

Another test: It's clearly not CAR related. When I paste the ↗ character into the input form of, say, Google Translate I get the exact same effect.

Edited on 07/11/2012 01:51 AM.

Ok, now I feel better. =) Still, I was considering using something like http://fortawesome.github.com/Font-Awesome/, which would get us a consistent arrow as well.

Nice icons. But wouldn't using this font cause additional traffic (for CAR and/or the visitors)?

Like any other static resource, it would be a one time download for visitors to the site, and it can happen asynchronously, so it wouldn't slow initial page load.

Updated Firefox to 14.0.1. right now. And the "↗" effect is gone!