A technique for making CSS buttons that are quite hard to break (but probably not entirely unbreakable!) no matter what positioning you give them. The buttons are constructed with the 'sliding doors' technique, where left and right ends of a single image file are overlapped to give them a flexible widtht. This technique also keeps the number of non-semantic extra elements in the DOM to a minimum: 1 extra <span> for each button.
The CSS looks a bit hairy, but it's not as complex as it first seems. The important thing to realise is that IE uses -ve relative positioning because it doesn't behave correctly when confronted with a -ve margin.
Also, in your button image, it's best to separate button shapes by at least 1px of transparent space. In FF, at certain zoom levels, there is a 1px error that grows the button vertically, and without the transparent space 1px of the background of the next button can be seen.
ALL BROWSERS: Hit zone does not include the far right-hand side of the button, because the button has to be 'wrapped' around the input rather than the other way around.
To sort both these problems use the following construct:
IE6: does not respond to :hover on inputs, so the background-position of the graphic (and thus the colour) does not change. Could be fixed with a little javascript.
There follows some screed with a button in the middle. There follows some screed with a button in the middle. There follows some screed with a button in the middle. This is some screed with a button in the middle. That was some screed with a button in the middle. That was some screed with a button in the middle. That was some screed with a button in the middle. That was some screed with a button in the middle.
Some tests were done using the <button> tag, as it would be an ideally semantic way to make buttons. Unfortunately it has major problems, and it's largely FireFox at fault. Firefox does not display button contents that have been shifted outside of the boundaries of button tag, whether -ve margined, relatively or absolutely positioned. It's as if overflow: hidden is always defined. Makes using this technique a bit difficult. IE6 just weirds out. Not sure what it's doing. For one thing, it doesn't respond to :hover, so the background colour does not change. Opera and Safari get it right.
So the <button> tag is a no-no. Read here about other problems with the button tag: