IE8 <input type="button"> - CSS hover does not work with border and padding set to 0

Question

Test page:

<!DOCTYPE html>
<html>
    <head>
        <title>button border hover test</title>
        <style type="text/css">
            input
            {
                border: 0;
                padding: 0;
            }

            input:hover
            {
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="button" value="input element" /><br>
        </form>
    </body>
</html>

The background colour does not change. If you set the padding to anything higher than 0, the background colour does change. I'm not seeing this behaviour in Firefox.

Having a padding of 1px isn't disruptive to the layout, but does anyone know of a way to make this work with 0 padding?

Can you use the <button type="submit"> element? It will work in IE8. labs.findsubstance.com/2009/05/21/… — Seth
– Seth, Commented Mar 3, 2011 at 18:16
Unfortunately the project is built on a framework that does not allow <button>. It's an XML BI framework where a 'Button' element translates to <input type="button">. — user247702
– user247702, Commented Mar 4, 2011 at 0:18

user247702 · Accepted Answer · 2011-10-18 11:52:26Z

There are two possible solutions.

Use a <button> element instead.
Use padding. But even then, sometimes the hover doesn't work.

Some relevant information from http://www.sitepoint.com/forums/showthread.php?769898-button-vs.-input-type-quot-button-quot

<button> can contain HTML, and is easier to style with CSS, which actually gets applied across browsers. However, there are some drawbacks to using it in IE. IE doesn't properly detect the value attribute (and uses the tag's content instead as the value), and all values are sent to the server, whether or not the button is clicked. This makes using it as a a little tricky.

<input type="submit"> doesn't have any value or detection issues. However, you can't add HTML like with and can only use the value tag. It's also harder to style, and the styling doesn't always respond well across browsers.

John · Accepted Answer · 2011-04-14 18:35:30Z

Welcome to the club. This was driving me crazy. I have a table with buttons in the last column. When you hover over a row, the background changes. If you hover over the button in the row, the text color on the button changes as well as the row background. I had 0 padding on the buttons. All this works great in FF with no problems.

In IE8, a whole nuther story. The row hover worked great but when you hovered over the button in the row, nothing happened. The row background didn't change and the button text color didn't change (99.99% of the time).

I played with this and finally realized what was going on. It seems to be that hover doesn't work while over button text. I added 20px of padding on each side of the text on the button. If I slide my cursor down the buttons in the padded area (not touching the text) it worked as well as FF. As soon as I slide the cursor down the middle of the buttons (through the button text), it breaks.

Go figure. I HATE IE!!!!

Collectives™ on Stack Overflow

IE8 <input type="button"> - CSS hover does not work with border and padding set to 0

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related