At work we're using jNice to make our buttons look a bit nicer. Unfortunately the library itself has some IE6+IE7 bugs. One of these bugs affects the styling of <button>'s. I have spent a couple of hours this morning investigating this bug and trying misc. classic IE fixes to no avail.
Steps to replicate in IE8 (using compatability mode to simulate IE7):
- Go to http://www.whitespace-creative.com/jquery/jNice/
- Load up the IE Developer toolbar after going into IE7 compatability mode
- Edit the HTML so that the submit button says "submit long long long long" or any other long string to see the wrapping of the text
See the attached screenshot illustrating the problem. (For now here is a link to imageshack with the image as the attachment is pending approval: http://img90.imageshack.us/img90/1978/jnicebug.gif)
From my investigation it seems to be to do with floats and display: block on the inner floats that causes the wrap. Obviously the easy fix is to set an explicit width for the inner span's but we use jNice across the whole site for all kinds of these buttons which have different amounts of text inside of them, so explicitly setting widths isn't an option. The buttons need to dynamically expand.
Any input would be greatly appreciated.