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

[Ser4phiM]

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

[Cheatah]

Hi,

wieder einmal suche ich eure unendliche Weisheit auf und hoffe auf Gnade ;)

falsches Dojo. Hier gibt's nur Weisheit.

<div align="center">

Das align-Attribut dient darstellerischen Zwecken und hat im HTML-Code somit nichts verloren. Eliminiere es.

<a id="rahmen_zitat">

Das <a>-Lemenet dient der Verlinkung von Ressourcen. Willst Du keine Ressourcen verlinken, ist ein <a>-Element falsch.

<div align="left">

Ein <a>-Element kann kein <div> enthalten. Dieser Code ist kaputt.

<?php include("a_zitat.inc"); ?></div>

Bei clientseitigen Problemen kann serverseitiger Code niemals nützen, wohl aber eine Hilfe bis hin zur Unmöglichkeit erschweren. Eliminiere serverseitigen Code bei Problemen *immer* *vollständig*.

es genauso im FireFox erhalten, wie es haben wollte. Tolle Sache...

Nein. Auch Firefox hätte diesen Code ablehnen müssen. Leider ist er zu fehlertolerant. Teste nicht funktionierenden Code *immer* zunächst auf Validität.

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.

Das kannst Du ihm nicht vorwerfen. Du hast ihm bereits Müll vorgeworfen, das sollte eigentlich reichen. Repariere Deinen Code - sowohl technisch als auch semantisch.

Meine derzeitige Lösung:
<div id="rahmen_zitat">
  <table width="495" border="0" align="center" cellpadding="0" cellspacing="0">

Du hast augenscheinlich keine tabellarischen Daten vorliegen. Womit rechtfertigst Du also eine Tabelle? Und womit rechtfertigst Du jedes einzelne Attribut im <table>-Tag?

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

Sorge zunächst einmal für validen, semantischen und sinnvollen HTML-Code. Alles andere ist nachgelagert und davon abhängig.

Cheatah

[Ser4phiM]

Hallo Cheatah,
Danke für die Antwort, auch wenn sie gewohnt... nennen wirs mal (euphorisch) nüchtern war ;)

Das mein Code keine HTML-Glanzleistung war und sicherlich eleganter sein könnte (was auch meine Absicht vernünftig rüberbringen würde), ist klar, aber nicht umsonst schrieb ich zum Schluss

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

Wie gesagt, ich hab an Einigem rumgebastelt, aber entweder es wollte sich nicht zentrieren lassen, oder die Ausrichtung von Zitat und Author funktionierte nicht oder der Rahmen um beides wollte nicht mitspielen... und für einen kleinen (praktischen) Denkanstoss wäre ich wirklich dankbar.

In dem Sinne und schönen Dienstag noch,
Ser4phiM

[wahsaga]

hi,

Wie gesagt, ich hab an Einigem rumgebastelt, aber entweder es wollte sich nicht zentrieren lassen, oder die Ausrichtung von Zitat und Author funktionierte nicht oder der Rahmen um beides wollte nicht mitspielen... und für einen kleinen (praktischen) Denkanstoss wäre ich wirklich dankbar.

Dann fang mal mit dem ersten Tipp an - sorge für sinnvoll(eres) HTML.
http://de.selfhtml.org/html/text/zitate_adressen.htm#zitate

gruß,
wahsaga

[Ser4phiM]

Hi,

Dann fang mal mit dem ersten Tipp an - sorge für sinnvoll(eres) HTML.
http://de.selfhtml.org/html/text/zitate_adressen.htm#zitate

ok, habe jetzt <blockquote> benutzt, mein code sieht jetzt folgendermaßen aus:
<blockquote id="rahmen_zitat">
<?php include("a_zitat.inc"); ?><br />
<span style="text-align:right;">( <?php include("a_zitat-author.inc"); ?> )</span></blockquote>

mit
#rahmen_zitat {
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  width: 495px;
  border-style: solid;
  border-width: 1px;
  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; color:#000000;}

Habe den gesamten Code auch validieren lassen, scheint auch ok zu sein.
Aber leider wird weder der Author rechts angeordnet noch funktioniert der Hover-Effekt im IE...
Ich habe im Forum gesucht, aber nichts zu Hover-Effekten im IE gefunden, was kein Link war, und das ist mein Zitat ja nicht.

In dem Sinne,
Ser4phiM

[Ser4phiM]

Habe eine Möglichkeit gefunden im Internet Explorer auch andere Elementen neben <a> mit einem Hovereffekt auszustatten, leider nur mit JavaScript:

CSS:
.menue {
  background-color:#000;
  color:#fff;
}
.menue:hover{
  background-color:#fff;
  color:#000;
}
.menue_hover{
  background-color:#fff;
  color:#000;
}

JS:
<div class="menue" onmouseover="className='menue_hover'" onmouseout="className='menue'">Startseite</div>

Ansonsten habe ich nichts gefunden. Fällt euch noch was ein?

In dem Sinne,
Ser4phiM

[Philipp Stephani]

Ansonsten habe ich nichts gefunden. Fällt euch noch was ein?

Nein. Der Internet Explorer kann nur Links hovern:

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

„:focus und :hover gelten auch für andere Elemente als Verweise. Wenn Sie beispielsweise für h1:focus CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-Überschrift klicken, nimmt diese, solange die Maustaste gedrückt wird die definierten Eigenschaften an. Im Internet Explorer funktioniert dies jedoch nicht.“

[Ser4phiM]

Nein. Der Internet Explorer kann nur Links hovern:

Wie du an meinem Bsp. siehst, stimmt das nicht. Der IE kanns, aber nur mit JavaScript...

In dem Sinne,
Ser4phiM