Hallo,
ich habe folgendes Problem:
* habe ein Layout auf Tabellenbasis mit Mouseover für Tabellenfelder erstellt
* halte mich (soweit möglich) an W3-Standards
* im IE wird das Layout richtig erzeugt und bleibt stabil
* im FF wird das Layout richtig erzeugt, bleibt aber nicht stabil
Was bedeutet nun stabil?
Im FF wird das Layout, so wie es sein soll erzeugt. Die MouseOver funktionieren ebenfalls. Wenn ich jedoch einen der neuen
Menüpunkte (innerhalb der Seite) anwähle, wodurch das gleiche Layout erzeugt wird, bricht das MouseOver der Tabellenzellen ein.
Das Menü als solches kann vernachlässig werden. Mit einem Klick auf einen der Menüpunkte wechselt nur die Tabellenzelle die einen
andersfarbigen Hintergrund bekommt.
Diese Erklärung ist vermutlich etwas zu verwirrend. Wichtig ist aber nur das eigentlich Problem. Das folgt jetzt.
Das konkrete Problem:
Für mich stellt sich das Problem somit als sehr willkürlich dar. Das so genannte Highlighting der Tabellenzelle funktioniert nach dem
Neuladen der Seite. Klickt man - also die Seite baut sich erneut auf - wird nichtmehr die ganze Zeile, sondern nur noch vom Anfang der
Zelle bis zum Ende des Textes hinterlegt. Das sieht dann natürlich blöd aus.
Der Code:
Den kompletten Code schenk ich mir mal. Poste erstmal nur die Zeilen für die eigentliche Zelle.
<style type="text/css">
<!--
...
.subitemselect { background-color:#555555; }
.subitemshadow { background-color:#999999; }
.subitemdeselect { background-color:#CCCCCC; }
.submenuarrow { color:#FFAA00; }
...
-->
</style>
...
<script language="javascript" type="text/javascript">
function subMenuHighlighting(id, flag) {
// steuert das Highligting in den Submenüs
var tdid = "td"+id;
var subRef = document.getElementById(tdid);
activeID = getMenuID(menu, subMenu); // subMenu entspricht $sel in der URL
switch (flag) {
case 'on': // Submenuitem selectieren
subRef.className = "subitemselect";
break;
case 'shadow': // Submenuitem selectieren
subRef.className = "subitemshadow";
break;
case 'off': // Submenuitem deselectieren
if(activeID != id)
subRef.className = "subitemdeselect";
else
subRef.className = "subitemshadow";
break;
}
}
</script>
...
<td id="td401" width="100%" align="LEFT"
onMouseOver="subMenuHighlighting(401,'on')"
onMouseOut="subMenuHighlighting(401,'off')"
onClick="self.location.href='index_ie.php?menu=4&sel=1'">
<span class="submenuarrow">[b]»[/b]</span>
Fotografie
</td>
...
Alles anzeigen
Die JS-Funktion dient dazu, den momentan aktiven Menüpunkt nicht komplett vom Highlighting zu befreien, sondern einen
Zwischenton "stehen zu lassen". Das funktioniert auch so.
Naja, ich hoffe ich konnte mich verständlich machen. Notfalls stell ich mal eine Bsp.seite online. Dazu fehlt mir zur Minute jedoch
die Zeit.
Schaut mal ob ihr damit hier auch klar kommt. Über ein paar Anregungen würde ich mich freuen.
see yaah