Question

I have a buttonset that is mostly comprised of single characters for each button. In one of the buttons there is an image. Unfortunately the button containing the image doesn’t align itself correctly with the rest of the images in it’s buttonset, and it isn’t the correct height either. If a screenshot is needed, this can be provided.

---

Here is a jsFiddle that accurately represents the issue that I’m having. Preferably I would like a solution that works on any size image though.

Answer 1

So I ended up figuring it out. The vertical-align property was being set to baseline, so I changed that to top. Also, I changed any image inside of a button to be the size of the rest of the buttons using this css snippet.

span.ui-button-text > img{
  height: 1.1em; // This is jQuery UI default font-size for buttons.
}