I am encountering a formatting issue with a jQuery splitbutton on my webpage. In order to adhere to my company's design standards, I am essentially converting a link into a button. The functionality works perfectly fine; however, depending on the browser being used (I am currently testing in IE and Chrome), the right side of the split button seems slightly longer than the main button.
The problem appears to lie within this specific CSS class:
.default_button.medium_toggle {padding: 14px 5px 10px;}
By changing the 10px to 9px, it resolves the issue in IE. As it stands now, it works correctly in Chrome. (A side note, when zooming in on the page in Chrome, the alignment is off but that is not a major concern for me)
Any recommendations or suggestions would be greatly appreciated. You can access all of my code at jsfiddle.net/lwisdom43/6ErCs/3/. I have included it there as I did not want to paste all of my CSS for these two buttons in this post. Once again, this is all driven by the design standards set by our company. Thank you for any assistance you may offer.