IE8 Problem mit Grafikbutton!

[lacosamia]

Hallo zusammen,
und danke fürs reinschauen!
ich habe mit CSS3 eine schaltfläche in facebook-optik designt.
ich möchte dieser auf meiner facebook-anwendung integrieren.
zu meinem problem:
den button zeigt es im IE8 auch an.. nur die grafik in dem button nicht...
jetzt bin ich leider total ratlos wie ich das ändern kann...
anbei hab ich euch mal meinen code eingefügt..
vllt. weiss jemand woran das liegt bzw. ob man das ändern kann.. und wie..???
danke an euch!

button

<tr>
     				<td><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: 14px;">Datum: </span></span></td>
					<td>&nbsp;</td>
					<td><input name="u[reservierung]" id="reservierung" readonly="readonly" type="text"  value="<?=($u['reservierung']);?>" />&nbsp;&nbsp;<a class="uibutton icon secure" href="#" onclick="displayCalendar(document.forms[0].reservierung,'yyyy/mm/dd hh:ii',this,true); return false;">Kalender</a></td>
				</tr>

CSS

.uibutton.icon:before {
    content: "";
    position: relative;
    top: 1px;
    float:left;
    width: 10px;
    height: 12px;
    margin: 0 0.5em 0 0;
    background: url(fb-icons.png) 99px 99px no-repeat;
}

.uibutton.edit:before  { background-position: 0 0; }
.uibutton.add:before  { background-position: -10px 0; }
.uibutton.secure:before  { background-position: -20px 0; }
.uibutton.prev:before  { background-position: -30px 0; }
.uibutton.next:before  { float:right; margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }

[thomas_E]

afaik versteht bisher kein IE die pseudo-klassen wie :before :after, etc.

ob es dafür nen reinen css-workaround gibt müsst ich grad selbst googeln.
ansonsten JS

[sonar]

Doch, ab Version 8 versteht der IE :before und :after
CSS Compatibility and Internet Explorer