Overlapping items

[kevva]

So, since sometime back word-spacing: -0.43em results in overlapping items like this: http://jsfiddle.net/JXek9/. This is fixed by removing the word-spacing property altogether http://jsfiddle.net/JXek9/1/.

Tested in Chromium 26, FF 18, IE 8-9. I know the word-spacing had no effect on earlier versions of Chrome. Not sure when they "fixed" it. As far as I know though, the word-spacing property only was there to collapse whitespace on IE 6-7 and old versions of FF so it should be pretty safe to drop it.

[necolas]

Overlapping in which browsers?

[kevva]

Haven't tested in Chrome stable, but in Chromium 26 it's overlapping. May only be a bug.

Screenshot:

[necolas]

Yeah that's not the case in stable Chrome or any other browser I tested. Suggest it's a bug. I need to dig around in some issue threads on GitHub to remember why I used both and whether the browser that needed it still matters. This is when I realise I'm missing a code comment!

[necolas]

Seems to have been for some version of FF < 4 (which I don't support here) and legacy versions of Opera. I'm just going to double check and run some tests over the weekend, if it all checks out, I'll make a change. Thanks for the heads up!

[kevva]

Yeah, I filed an issue on crbug.com/170910 just in case. I'm curious if they changed it intentionally or if it's just a bug.

[kevva]

Seems like the word-spacing property is required in Opera. Otherwise there will be gaps ~~.
csswizardry/inuit.css#107

Another possible solution would be to use a Opera hack. For example:

:-o-prefocus, .btn-group {
  word-spacing: -0.43em;
}
:-o-prefocus, .btn-group__item {
  word-spacing: normal;
}

[necolas]

Oh, that must be a platform-specific issues, because it's fine without word-spacing on Mac OS X. Well, thanks for filing that Chrome issue, it should get fixed. If not, we can re-open this when it lands in a stable build. Thanks!

[necolas]

Sigh, this shipped in Chrome 25.

[kevva]

What's the best solution here? To remove the word-spacing property and use the pseudo-class for targeting Opera?