Navigation mit auftauchendem Bild - Problem Opera und Zentrierung

Hallo!

Ich laboriere schon einige Zeit mit einer Navigation (nur html+css), bei der (bei mouseover) unter dem Link ein kleines Bildchen auftauchen soll.
Es funktioniert auch, nur mit Opera habe ich Probleme, da gibt es ganz seltsame Ergebnisse. Und ich weiß nicht, wie ich generell dieses Bildchen unter dem Link zentrieren kann.

Hier der Code

html:

     <link rel=stylesheet type="text/css" href="navtest.css">

<style type="text/css">



</style>
     <div id="navcontainer">
              <ul id="navlist">
              <li><a class="info" a href="start.html" target="haupt" alt="Startseite" title="Einführungsseite" >Startseite<span></a></li></span>
              <li><a class="info" a href="homöopathie.html" target="haupt" alt="Homöopathie" title="Über die homöopathische Behandlung" >Homöopathie<span></a></li></span>
              <li><a class="info" a href="polarity.html" target="haupt" alt="" title="" >Polarity<span></a></li></span>
              <li><a class="info" a href="ayurveda.html" target="haupt" alt="" title="" >Ayurveda<span></a></li></span>
              <li><a class="info" a href="telefon.html" target="haupt" alt="" title="" >Beratung<span></a></li></span>
              <li><a class="info" a href="links.html" target="haupt" alt="" title="" >Links<span></a></li></span>
              <li><a class="info" a href="kontakt.html" target="haupt" alt="" title="" >Kontakt<span></a></li></span>
              <li><a class="info" a href="impressum.html" target="haupt" alt="" title="" >Impressum<span></a></li></span>
              </ul>
              </div>

css:

/* DATEI: navtest.css */

body {
text-align: center;
margin: 0;
padding: 0;
font-weight:bold;
font-family:Helvetica,plain; sans-serif;
font-size:medium;
font-weight:bold;
color:#000000;
background:#FFFFFF;
}

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 0px;
align: center; /* Seiteninhalt wieder links ausrichten /
margin:0 auto; /
standardkonforme horizontale Zentrierung */
padding:5px;
font-size:90%;
font-weight:bold;
color:#800000;
}

      a.info{
             position:relative; /*this is the key*/
             z-index:1;
                  background-color:#FFFFFF;
             color:#800000;
             text-decoration:none}

         a.info:hover{z-index:2; background-color:#fff }

         a.info span{display: none}

         a.info:hover span{ /*the span will display just on :hover state*/
             display:block;
             position:absolute;
             top:25px; left:3px; width:23px;height:24px;
             background-image:url(laby.jpg); color:#000;
             text-align: center
                  }

a:link { text-decoration:none; font-weight:bold; color:#800000; }
a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; color:#800000}
a:active { text-decoration:none; font-weight:bold; color:#800000}
a:focus { text-decoration:none; font-weight:bold; color:#800000}

angesehen werden kann die Seite unter:

http://www.archaja2.cjb.cc

danke

hmm ich arbeite mich mal in den Code rein…
Ps: HTML Tags benutzen.