css: ie shifts button's text value and background - css

Question

I've got a submit button in a list:
<ul>
<li><input type="submit" value="Pls don't shift" /></li>
</ul>
The li and the input have different backgrounds, and these should be positionable.
The input should have dynamic width (depending on the value).
The input's value should be almost at the input's bottom.
These things reduce the number of opportunities to solve the problem.
And the problem exactly is: IE8 and IE9 shift the text of value, and IE8 shifts the background too.
I've tried to solve it and made this css (this is only a 'debug-css'):
li {
display: block;
width: auto;
border: 1px solid red;
padding: 0;
margin: 0;
float: left;
overflow: hidden;
}
input,
input:active:hover {
display: block;
background: url(tools-48x48.png) no-repeat center center;
width: auto;
height: 60px;
border: 1px solid transparent;
outline: none;
color: #fff;
text-align: center;
position: relative;
overflow: visble;
padding: 0 10px;
margin: 2px;
}
input:active:hover {
border: 1px solid red;
}
And the most interesting thing is: Now if I click on the button's text value, then it makes the same bad shift, but if I click eslewhere (on the button, but not on the text value) then it works.
That was the point when I've minded to write here.
How to disable submit buttons :active state in IE?
Thank you!

Answer 1

I have tested this in IE9 and when I remove several styles that "aren't" used the input text doesn't shift when you click on it.
removed styles:
li {
width: auto;
border: 1px solid red;
padding: 0;
margin: 0;
overflow: hidden;
}
input,
input:active:hover{
background: url(tools-48x48.png) no-repeat center center;
outline:none;
}
and added the styles
input,
input:active:hover{
position: relative;
overflow: visible;
}
See my Fiddle for more details here: http://jsfiddle.net/f67Vw/4/
A good other option seems to be to replace it with a carefully styled a element.
HTML
<ul>
<li>
Doesn't shift
</li>
</ul>
CSS
.button {
display: block;
width: auto;
height: 19px;
border: 1px solid transparent;
color: #000;
text-align: center;
padding: 20px 10px;
margin: 2px;
text-decoration:none;
}
Again see my Fiddle for more details here: http://jsfiddle.net/f67Vw/4/