The navigation icons (tags, people, badges) combine sprites + text.
When the text gets sufficiently long, the sprite regions overlap, and the last one continues on to show white space. I think this is a bug. It happens with german words, which can get very long.
My fix was to set a fixed width, in skins/default/media/style/style.less:
#navTags{
.sprites(-50px,-5px);
width: 50px;
}
#navUsers{
.sprites(-125px,-5px);
width: 59px;
}
#navBadges{
.sprites(-210px,-5px);
width: 47px;
}
But I don't know much CSS... I guess there must be a better way to clip the visible sprite region, and fall back to the background color outside of it. Ideas?
Now we have language code included as class on the html body element, so for languages other than english just add another class qualifier to the style source code.
For example:
body.lang-de #navBadges {
width: 60px;
}
We should really have these fixes in the default skin.
but that's basically the same solution... isn't there a way to only show the image background with fixed width, and if the text is longer, leave transparent background? that would be more flexible.
piskvorky (Dec 11 '11)Ah, ok, we should just restructure the sprites - probably should make them laid out vertically.
Evgeny (Dec 11 '11)yes, that's also a solution :) to make the horizontal spacing between individual sprites larger, or even place them vertically
piskvorky (Dec 11 '11)Asked: Dec 10 '11
Seen: 54 times
Last updated: Dec 10 '11
Copyright Askbot, 2010-2011. Content on this site is licensed under a Creative Commons Attribution Share Alike 3.0 license.