It all seemed so perfect

After reading Rediscovering the button element and then How to make sexy buttons with CSS, I was all pumped to make some slick form buttons for this site. As you might have noticed, the buttons around here are pretty plain.

Things looked very promising. By using the button element instead of the input element, I could implement the sliding doors technique. My buttons would have rounded corners AND expand with the text inside them. It almost seemed too good to be true.

Apparently it was.

Then it blew up in my face

Using the standard sliding door technique yeilded this result. Looks good in IE 7, but the images don’t align in Firefox. I tried battling with it for two hours before I went into a fit of rage and just deleted the whole stylesheet one line at a time. Digital tantrums are very unsatisfying. Fortunately this all took place on my testing server, so no actual stylesheets were injured.

Apparently the problem with Firefox lies in setting the span to display:block. It causes Firefox to add a 1px border to the top. When I took that line away it rendered beautifully in Firefox, but in IE 7 the background only showed immidiately behind the text. The rest of the button was white.

To get the sliding door to render properly in Firefox and IE 7, you’ll have to do some CSS browser hackery. In IE 7 set the span to display: block and in Firefox set it to display: inline. I’m not willing to do separate stylesheets for different browsers right now, so that just won’t work for me. For now, I’m setting the buttons to a fixed width. Hopefully the content in my buttons never gets longer than the image.

Has anyone else found a cross-browser way to make this work?