CSS <span> Problem im IE bei "Redaxo"

[Tachikoma]

Hallo liebes Forum!

Ich beschäftige mich seit kurzem erst mit einem CMS welches Redaxo heisst und endlich mal schön simpel ist.

Nun hab ich mit Hilfe einiger php-Leute ein wunderbares Template erstellt, welches auf eine CSS-Datei zugreift.

Der Gag an der Seite ist, das man Infos über jeden Menüpunkt erhält,
wennn man mit der Maus über den jeweiligen Punkt fährt.

Ich hatte die Seite schon fertig, bevor ich mich fürs CMS entschied:
http://www.she-rocks.com/Site/start.html

Nun hab ich die Seite im CMS umgesetzt und schon gibt es das Problem,
das der Mouseover nur noch in Firefox läuft und nicht mehr im IE.
Ich hab nun schon Stunden damit verbracht herauszufinden woran das liegen könnte... aber ich finde keine typischen IE Fehlerquellen (margin etc)

Die CMS-Seite sieht so aus:
http://www.alexanderwelitschko.de/Redaxo/index.php?article_id=21

(Achtung, der Mouseover-effekt geht bisher nur auf dieser Seite und auch nur bei den Punkten "Dates" und "guests")

Vielleicht weiß Jemand eine Lösung?
Bin ziemlich verzweifelt langsam.

Danke schonmal!

Die CSS-Daten sehen wie folgt aus:

/* CSS Document */
body {
  background-color: #333333;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 11px;
  line-height: 13px;
  margin: 0px;
  padding: 0px;
}

body td {
  padding-bottom: 15px;
}

/* Der folgende Container gilt für die Webseite Standard */

#main_site_container {
  background-color: #333333;
  height: 450px;
  width: 600px;
  margin-top: -225px;
  margin-left: -300px;
  padding: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  border: none;
}

#footer {
  background-color: none;
  height: 20px;
  width: 600px;
  margin-top: 230px;
  margin-left: -300px;
  padding: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  border: none;
}

#footer a {
  text-decoration: none;
  color: #999999;
}

/* folgende Container umschreiben die Navigation */

#backtoshe-rockscom {
  float: right;
  width: 100px;
  height: 50px;
}

/* Navigation als horizontale Liste */

#navigation {
  background-color: #aaaaaa;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  width: 600px;
  height: 50px;
}

/* Navigation als horizontale Liste ENDE */

/* Navigations-Mouseover */

.navigation {
  position: absolute;
  left: 30px;
  top: 10px;
  margin: 0px;
  padding: 0px;
}

.navigation a {
  color: #ffffff;
  font-weight: bold;
}

.navigation li {
  list-style: none;
  display: inline;
  padding-right: 20px;
  color: #ffffff;
}

#navi a {
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 0px;
  margin: 0px;
  border-width: 0;
  text-decoration: none;
  background-color: transparent;
}

#navi a span {
  height: 500px;
  width: 20px;
  display: none;
  margin: 0px;
  padding: 0px;
}

#navi a:hover span {
  position: absolute;
  padding: 0px;
  margin: 0px;
  top: 17px;
  left: 0px;
  display: block;
  width: 500px;
  height: 20px;
  color: #333333;
  font-size: 11px;
  font-weight: normal;
  text-align: left;
}

/* Hintergrundbild-Container */

#background {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 600px;
  height: 400px;
}

#background-loads {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 600px;
  height: 250px;
}

.bg_start {
  background-image: url(../sitepix/annikamicro.jpg);
}

.bg_band {
  background-image: ;
}

.bg_dates {
  background-image: url(../sitepix/annika_back.jpg);
}

.bg_downloads {
  background-image: url(../sitepix/loadarea.jpeg);
}

.bg_press {
  background-image: url(../sitepix/Press_area.jpg);
}

.bg_imprint {
  background-image: url(../sitepix/imp_desk.jpg);
}

/* Content */

#content_start {
  position: absolute;
  left: 30px;
  top: 20px;
  width: 200px;
  height: 380px;
  overflow: auto;
}

#content_dates {
  position: absolute;
  left: 30px;
  top: 20px;
  width: 300px;
  height: 380px;
  overflow: auto;
}

#content_impressum {
  position: absolute;
  left: 280px;
  top: 120px;
  width: 250px;
  height: 280px;
  overflow: auto;
}

/* textstyles*/

p {
  margin: 0px;
  text-decoration: none;
  font-size: 11px;
}

p #metan {
  content: attr(meta name);
}

h1 {
  margin: 0px;
  text-decoration: none;
  font-size: 11px;
  padding-bottom: 15px;
  font-weight: bold;
}

.black {
  color: #000000;
}

.white {
  color: #FFFFFF;
}

[wahsaga]

hi,

Nun hab ich die Seite im CMS umgesetzt und schon gibt es das Problem,
das der Mouseover nur noch in Firefox läuft und nicht mehr im IE.

Der IE ändert die Sichtbarkeit (bzw. allgemein die Formatierung) von a:hover span nur dann, wenn auch für a:hover irgendeine Änderung eintritt, die ihn zum erneuten Rendern dieses Elementes bringt.

Dazu genügt es schon, beispielsweise die Hintergrundfarbe von der Kurz- auf die Langschreibweise zu ändern, also #fff zu #ffffff o.ä.
In deinem Fall ist der Hintergrund für a zwar transparent - aber muss er das denn sein, oder könntest du die Farbe ggf. auch explizit angeben?

gruß,
wahsaga

[Tachikoma]

Oh Mann!!

Das wars!

VIELEN TAUSEND DANK!!!

DANKE!! :-)