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