CSS sliding doors and buttons don’t play nice

If any of you are looking to try using the CSS sliding doors technique on buttons, beware! There appears to be a bug in Firefox's button rendering. When you insert a block element in the button, it won't align with the button, even when you set all of the borders, margins and padding to zero.

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

Button rendering in Firefox and Internet Explorer 7

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?

This entry was posted in CSS and tagged , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://michaelhopkins.us Michael

    Did you check them out in Safari? I don’t think it would work in Safari either. But then Who really cares?

  • http://orangeSPLoTCH.com mattc

    Unfortunately I don’t have ready access to an Apple, so I don’t get to do much testing with Safari. If you’d like to contribute to the “Buy Matt a Mac” fund, please let me know.