Image in Button: Strange space 2.0 (this time IE7)

Question

This is a followup to my previous question. It dealt with a rendering issue in Firefox. After that issue was fixed I obviously tested the design in other browsers. And obviously - how could it be different - I encountered yet another rendering issue, this time in IE7.

The former of the above elements is a button containing an img. The latter is a div containing an img.

In the former case (the one with button and img) there is a space between the border of the img and the border of the button. I want to get rid of it.

CSS:

* {
    margin: 0;
    padding: 0;
}

button, img, div {
    border: 1px solid black;
}

img {
    display: block;
}

/* this is a fix for one of the padding issues in IE7 */
button {
    overflow: visible;
}
/* this is a fix for the problem in Firefox linked above */
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Please help me, I'm starting to feel really pissed to be honest. This is the third padding bug I encounter with this button tag...

Edit: I am giving bounty on this question, to either get a more at-the-root fix for the IE7 problem or for tipoffs about other browser-bugs related to <button>s. I want to have a button that looks perfectly, pixel for pixel the same in all major browsers. (PS: IE6 is not a major browser.)

Answer 1

So display:block doesn't fix it? How about vertical-align:bottom for the img? Can you setup a testcase on jsfiddle.net?

EDIT: display:block on the button seems to do it: http://work.arounds.org/sandbox/48/run

Edit #2: Stubborn huh.. does this work? http://work.arounds.org/sandbox/48

Answer 2

Well, it seems that I must conclude that there is no fix for this one - at least no known fix. Thus I saw no alternative then manually removing this space (using negative margins).

Here is my complete list of fixes that makes the button element look the same in Firefox, Safari, Chrome, Opera, Internet Explorer (IE9, IE8, IE7, haven't tested IE6):

button img {
    display: block; /* required to get rid of bottom space in many browsers */
    *margin: -1px -1px -3px -1px; /* remove additional space in IE7 */
}

button {
    overflow: visible; /* remove content-size dependent padding in IE7 */
}
button::-moz-focus-inner {
    border: 0;  /* remove inner focus from Firefox. The inner focus takes up */
    padding: 0; /* padding in Firefox even if not focused due to a bug */
}
button:focus {
    outline: 1px dotted black; /* as we removed the inner focus give it an outer focus ring to improve accessibility */
}

Compressed version:

button img{display:block;*margin:-1px -1px -3px -1px}
button{overflow:visible}
button::-moz-focus-inner{border:0;padding:0}
button:focus{outline:1px dotted black}

Removed line breaks:

button img{display:block;*margin:-1px -1px -3px -1px}button{overflow:visible}button::-moz-focus-inner{border:0;padding:0}button:focus{outline:1px dotted black}

Have fun with consistent buttons!

Answer 3

Have you tried adding width:auto to the button?

button {    
    overflow: visible;
    width: auto;
}

Answer 4

I often find myself cursing at buttons and then solving the problem by displaying an image with an onclick Javascript submit.

Hackish? Perhaps. But it's an acceptable solution for the 100+ major credit card websites I did for an international bank....and to date, I haven't found a more picky client.

Answer 5

I get around this issue by using an <input type="image" /> instead of a <button /> and using javascript to modify the image shown when the mousedown and mouseup events is triggered.

Try it, it'll save you a big headache.