Website: Problem mit dem Internet Explorer 9

[DONTSTOP]

Ich musste gerade etwas entsetzt feststellen, das der Internet Explorer ein Problem mit meiner Website hat. Beim Überfahren der Menü-Leiste vergrößert sich die Zelle merklich.

In allen anderen Browsern sieht es normal aus, der IE6 im virtuellen XP macht auch damit auch keine Probleme. Ich vermute das Problem in der CSS-Datei, konnte es aber nicht ganz eingrenzen.

Hier nun meine aktuelle CSS:
__________________________________________________ ___________________
/*Schriftart (global)*/
body { background-color:#FFFFFF; font-weight:bold; font-family: Verdana;}

/*Farbe der Links*/
a:link { color:white ; text-decoration: none; }
a:hover { text-decoration: none; color:#F5AB19; background-image:url(http://vivalamusica.wmw.cc/grafiken/out.png)}
a:visited { color:white; text-decoration: none; }
a:active { text-decoration: none; color: #F5AB19; }
a:focus { text-decoration: none; color: #F5AB19; }

a.type1:link { color:#F5AB19; text-align:center; }
a.type1:visited { color:#F5AB19; text-align:center; }
a.type1:active { color:#F5AB19; text-align:center; }
a.type1:hover { color:#F5AB19; text-decoration: underline; text-align:center; background-image:url(grafiken/none.png)}


/*verlinktes Bild ohne Rahmen*/
a img { border: 0; }

/*Tabelle*/

.tablo { width: 80%; height: 100%; border-style: solid; border-width: 2px; }
td a { display: block; width: 100%; }


.unten { font-size: 0.7em; font-weight: bold; text-align: center; vertical-align:middle; }

.box { width: 200px; background:yellow; }
.box .top, .box .bottom{display:block;background: white; }
.box .top b, .box .bottom b
{
display:block;height: 1px; overflow: hidden; background: yellow;
}
.box .r1{margin: 0 5px;}
.box .r2{margin: 0 3px;}
.box .r3{margin: 0 2px;}
.box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px; }

.box2 { width: 200px; background:yellow; }
.box2 .top, .box .bottom{display:block;background: white; }
.box2 .top b, .box .bottom b
{
display:block;height: 1px; overflow: hidden; background: #FFD912;
}
.box2 .r1{margin: 0 5px;}
.box2 .r2{margin: 0 3px;}
.box2 .r3{margin: 0 2px;}
.box2 .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px; }

h1 { font-size: 2em; color:#000000; text-align: center; } /*Ueberschrift der einzelnen Webseiten*/
__________________________________________________ ____________________________________


ein gutes Beispiel für die Probleme ist die Start-Seite (es betrifft aber afaik alle Unterwebsiten): http://vivalamusica.wmw.cc/



Laut den Validatoren des W3C ist die Startseite sowohl 100% CSS- als auch HTML-valid.


Das Problem tritt nur im Internet Explorer 9 auf (hatte ich schon in der BETA des IE9 festgestellt).


Hat jemand eine Idee, wo das Problem liegt?

[heinzl]

F12 -> Dokumentmodus: IE9-Standards

[DONTSTOP]

yupp, das Problem tritt in dem genannten Modus nicht auf.

Sollte ich vielleicht einen Hinweis machen, dass die IE9-Nutzer auf den Modus umshcalten sollen?