IE et propriétés Inset/Outset

Salut à tous,

J'ai un petit problème avec IE qui ne fait que m' exaspérer...

J'ai créé des boutons avec les propriétés outset et inset (hover), mais le résultat avec IE fait pitié, je n'arrive pas à lui faire afficher la même chose qu'avec Firefox.

Voici le css :

#cotegauche{      /* div ou est placé la classe onglets */
      margin-top: 150px;
      margin-left: 100px;
      padding: 0;
      width: 120px;
      height: 500px;
      background-image: url(vert1.jpg);
      position: absolute;
}

.onglets{
      margin-top: 0;
      margin-left: 2px;
      padding: 0;
}

.onglets li{
      margin-top: 0;
      margin-left: 2px;
      padding: 0;
      list-style-type: none;
      font-size: 22px;
}

.onglets a{
      padding-top: 3px;
      text-align: center;
      background-color: silver;
      color: white;
      width: 110px;
      height: 30px;
      display: block;
      text-decoration: none;
      border: 2px outset silver;
}

.onglets a:hover{
      width: 110px;
      height: 30px;
      color: black;
      background-color: gold;
      border: 2px inset;
      border-color: gold;
}

Qu'est-ce qui ne va pas dans mon css, que faut-il y ajouter pour que ce satané de IE le comprenne ?

Pour que vous voyez la différence j'ai fait une impression d'écran, voir là.

Je remets le html et le css :

[b]HTML :[/b]

<DIV id="cotegauche">
  <UL class="onglets">
    <li class="actuel">Accueil</li>
    <li><a href="">Lien 1</a></li>
    <li><a href="">Lien 2</a></li>
    <li><a href="">Lien 3</a></li>
    <li><a href="">Lien 4</a></li>
    <li><a href="">Lien 5</a></li>
    <li><a href="">Lien 6</a></li>
    <li><a href="">Lien 7</a></li>
    <li><a href="">Lien 8</a></li>
    <li><a href="">Lien 9</a></li>
    <li><a href="">Lien 10</a></li>
  </UL>
</DIV>

[b]CSS :[/b]

#cotegauche{
      margin-top: 0;
      margin-left: 0;
      padding: 0;
      width: 120px;
      height: 800px;
      background-image: url(vert1.jpg);
      position: absolute;
}

.onglets{
      margin-top: 0;
      margin-left: 3px;
      padding: 0;
}

.onglets li{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 22px;
}

.onglets a{
      background-color: #990000;
      padding: 0px;
      text-align: center;
      color: white;
      width: 110px;
      height: 30px;
      display: block;
      text-decoration: none;
      border: 2px outset #990000;
}

.onglets a:hover{
      background-color: #339900;
      width: 110px;
      height: 30px;
      color: #ffffff;
      border: 2px inset #339900;
}

.actuel{
      background-color: #339900;
      padding: 0px;
      text-align: center;
      color: #000000;
      width: 110px;
      height: 30px;
      display: block;
      text-decoration: none;
      border: 2px inset #339900;
}

Avec Firefox, le résultat est correct, mais avec IE c'est nul, comment faire pour qu'il m'affiche le même rendu ?

Je ne comprends pas ce qui donne une différence aussi flagrante