I’m running the latest ChameleonTheme on latest Vaadin, but on FF 3.5.9, trying to use the button segments seems to introduce a 1px gap between the two buttons. It lays out fine on IE8, Chrome 5, Safari 5 and Opera 10.5, so it’s got to be a FF-specific issue.
I have a HorizontalLayout with segment and segment-alternate using two small buttons with icons in them, styled as “first” and “last” respectively. But there’s a DIV element that has a coded “width: 73px;” that if I adjust to 72, then renders correctly (I think).
Filtered
I’m not sure how the 73px is calculated… Here’s the html rendered in Firebug for the complete horizontal layout segment containing my two buttons:
Filtered
Show all
This seems like a tough one because it looks correct in the other browsers, so I don’t know if there’s anything to be done.
I was actually aware of this issue. The reason is the sub-pixel font rendering Firefox uses, and calculates element dimensions using fractional pixels, but still allocates the Math.ceil value for the element, while drawing a smaller element.
The font rendering is superb, but the dimension calculation is just hideous. No way to fix it other than trying out a little bit of additional CSS magic for the offending button. Try alternating the letter-spacing property for instance, or font-size.
Rats! Figured it was something ugly like that. For now, I’ll just live with it since there’s way more pressing work to be done, but we’ll revisit your suggestions then (I’ve got TODO comments added to remind me). Maybe we can even just adjust the button label. Those who complain can pick an of the other browsers
Filtered
Show all