Button active area and icon alignment

I am puzzled by an issue I noticed when I recently added icons to some buttons in my Vaadin application. The buttons are fairly straightforward:
[font=courier new]
Button button = new Button(“Update”);
button.setIcon(updateIcon);
[font=arial]
And I have a set of buttons that look like the attached jpeg, with a 24x24 icon and a Label to the right of the icon.

I have the buttons in an area with a fixed width, and I think the buttons are about 10-15 pixels shorter in width than they would “naturally” be if they were in an unconstrained area. I noticed that rather than center the icon and label in the button as would be desired, the button by default seemed to be insisting on a set padding between the left border of the button and the icon, causing the whole icon-and-label to be pushed against the right. I corrected this visually by adding this CSS:

[font=courier new]
.my-button .v-icon {
margin-left: -10px;
}

[font=arial]
That did what I wanted as far as alignment, but then I noticed the nasty side effect that the negative margin seemed to mess up the Button’s calculations of its “active area” (the area where the Button responds to a mouse-click). With the negative margin, the clickable area was only the left half of the button. Clicking on the icon or the first part of the label would work, but the right half of the button was inactive to clicking. I can only assume that the negative margin was unanticipated in some internal logic in the button for calculating the clickable area, and messed it up in this way.

So, my question: is there a better way to achieve the alignment I would like (i.e., icon + label horizontally centered, even though it’s less padding than the Button wants by default), without having a “half-active” button? Thanks!
[/font]
[/font]
[/font]
[/font]

14304.jpg

This is still an unsolved mystery to me, but the negative left margin was not the culprit. I tried it without the negative margin, with varying widths on the button, with undefined width, fiddled with padding, nothing works. I use these buttons in two different views. In one view, the buttons are arranged in a vertical stack (using “display:block” on the Button’s style), and those buttons have this half-active area problem. In the other view, where the buttons are arranged horizontally with undefined width, the active area is the full button just as it should be. Any ideas?

Did you already check with a developer Tool like Firebug if there either is a non-clickable element layered over the buttons’ right half or the active/clickable area is only over the left half?
You might have to check all the subelements of the button and even the elements of the parent layout.

Thank you! I should have thought of that. I was so fixated on the button itself, but it turned out the issue was a v-csslayout div with a negative margin that was empty/transparent in the area where the buttons are, but was nonetheless partly “on top of” them and preventing them from being clickable. I was able to fix it by adding some z-index properties to the overlapping layout elements.