Unterschiedliche Darstellung in Fx <6 und >=6

[suit]

Genau das möchte ich. Und zwar auch im IE8.

a.button,  
a.button * {  
	background: transparent url(../img/button_18.png) no-repeat left top;  
	display: inline-block;  
	height: 18px;  
	vertical-align: top;  
	line-height: 18px;  
	margin: 0;  
	padding: 0;  
	border: none;  
	width: auto;  
	position: relative;  
	text-align: center;  
	text-decoration: none;  
	color: #FFFFFF;  
	cursor: pointer;  
	font-size: 12px;  
	font-weight: bold;  
}  
  
a.button {  
	margin-right: 8px; /* width of right part */  
	vertical-align: middle;  
}  
  
a.button * {  
	background-position: right 0;  
	padding: 0 12px;  
	margin-right: -8px;  /* width of right part (negative) */  
	overflow: hidden;  
}  
  
a.button input, x:-moz-any-link { padding-bottom: 2px; /* Firefox line-height bug */ }  
  
* html a.button input { padding: 0; }  
*:first-child+html a.button input { padding: 0; }  
  
  
a.button:hover   { background-position: left  bottom; }  
a.button:hover * { background-position: right bottom; }

<a class="button"><input type="submit" value="foo" /></a>  
<a class="button"><span>foo</span></a>

Die Grafik dazu muss so aussehen:

___________________________                               _
/                           |                             | \ |                           |                             | |
\___________________________|                             |_/
 ___________________________                               _
/xxxxxxxxxxxxxxxxxxxxxxxxxxx|                             |x\ |xxxxxxxxxxxxxxxxxxxxxxxxxxx|                             |x|
\xxxxxxxxxxxxxxxxxxxxxxxxxxx|                             |x/

Wobei der Linke Teil exakt in der Mitte aufhören muss und der rechte Teil 8 Pixel breit ist (vgl. margin-right: -8px; /* width of right part (negative) */)

In diesem fall muss sie 2x 18px, also 36px hoch sein.

Was zu entfernen ist, wenn du keinen Rollover-Effekt brauchst, müsstest du selbst rausfinden.