Ser4phiM: Hovereffekt für div mit 2zeiligem Text im FF und IE

Beitrag lesen

Hallo Forum,
wieder einmal suche ich eure unendliche Weisheit auf und hoffe auf Gnade ;)
Folgende Situation: Ich habe auf meiner Homepage einen div-Container mit Rahmen, welcher oben mittig angeordnet ist und ein Zitat enthält. Dieses Zitat ist 2zeilig: die 1. Zeile enthält das Zitat und ist links ausgerichtet, die 2. Zeile enthält den Author und ist rechts ausgerichtet. Gut.

Folgende Absicht: Da der Hintergrund weiss und die Schrift- sowie Rahmenfarbe gräulich sind, haben einige user Schwierigkeiten, es gut zu lesen -> Lösung: Ein Hovereffekt, der das ganze Zitat (Rahmen + Text) schwarz färbt. Super.

Folgendes Problem: Nach etwas Basteln kann ich mit
<div align="center"><a id="rahmen_zitat">
 <div align="left"><?php include("a_zitat.inc"); ?></div>
 <div align="right">( <?php include("a_zitat-author.inc"); ?> )</div></a>
</div>
es genauso im FireFox erhalten, wie es haben wollte. Tolle Sache... wäre da nicht der IE, der anscheinend mit dem Zeilenumbruch + div im <a>-tag nicht zurecht kommt und mir das Zitat völlig zerstückelt.

Meine derzeitige Lösung:
<div id="rahmen_zitat">
  <table width="495" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td><a>
      <div align="left"><?php include("a_zitat.inc"); ?></div>
      <div align="right">( <?php include("a_zitat-author.inc"); ?> )</div>
      </a></td>
    </tr>
  </table>

Unschön, ja, aber es funktioniert fast perfekt: Dummerweise tritt der Hovereffekt für Rahmen und Text _nacheinander_ auf. Fahre ich über den Rahmen, färbt sich nur dieser, fahre ich mit der Maus in den Textbereich hinein, färbt sich auch dieser endlich. Unschöne Tatsache.

Meine Div-IDs sehen so aus:
#rahmen_zitat {
  display: table-cell;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  width: 495px;
  border-width: 1px;
  border-style: solid;
  border-color: #CCCCCC;
  padding-top: 0.1em;
  padding-right: 0.1em;
  padding-left: 0.1em;
  padding-bottom: 0.1em;
}
#rahmen_zitat:hover {border-color: #000000; text-color:#000000;}

bzw für meine derzeitige Lösung ohne display: table-cell;

Und ich hab echt keine Ideen mehr, wie ich es beiden Browsern recht machen kann. Wisst ihr einen eleganteren Weg?

...und ja, letztlich kann ich auch Rahmen + Text einfach dunkler färben, aber bla bla ;)

In dem Sinne und Danke im voraus,
Ser4phiM