IE: erneutes setzen der background-position will nicht
Cid
- javascript
Hallo
ich hoffe, ich habe nicht in das falsche Thema gepostet, denn irgendwie bin ich mir nicht sicher ob es sich um ein Javascript oder um ein CSS-Problem handelt...
Ich soll eine Tabelle erstellen, welche einen Hover-Effekt(in Form einer Grafik) der Zeilen beeinhaltet. Das ist an sich nicht das Problem.
Mit onmouseover und onmouseout lege ich das Hintergrundbild und die Position des Bildes fest.
function clearHover(name)
{
document.getElementById("leg_" + name).style.background = "none";
}
function createHover(name)
{
var x = -37;
if(navigator.appName == "Netscape")
{
x = 500;
}
document.getElementById("leg_" + name).style.background = "url(\"grafik/btn_abschluss.gif\") no-repeat " + x.toString() + "px 7px";
}
Im Firefox funktioniert das wunderbar. Im IE hingegen nur auf den ersten Blick: Nämlich dann ,wenn ich das erstemal über eine Zeile fahre.
Beim zweiten Aufruf von createHover wird zwar das Bild angezeigt, aber der IE ignoriert die Positionsangaben völlig.
Wie bring ich dem IE nun bei, dass er auch beim zweiten Aufruf das Bild positioniert? ICh suche mittlerweile schon Stunden nach einer Lösung und finde nichts :(
Ich könnte wirklich Hilfe bei diesem Problem gebrauchen...(oke, ne, ich könnte nicht nur, ich brauch sie)
Lg Cid
Hallo, Cid!
Ohne eine Seite, an der man das testen kann, hilft der Code recht wenig - wir können also nur Vermutungen anstellen.
Mein erster Rat wäre, die background-Position per CSS standardmäßig zu setzen und nur auf das background-image (url(...), none) einzuwirken.
Gruß, LX
Ohne eine Seite, an der man das testen kann, hilft der Code recht wenig - wir können also nur Vermutungen anstellen.
Mein erster Rat wäre, die background-Position per CSS standardmäßig zu setzen und nur auf das background-image (url(...), none) einzuwirken.
Erstmal vielen dank für deine Antwort.
Wenn ich die Position so einfach setzen könnte, wäre das Problem ein deutlich kleineres ;) Aber die Positionsangaben funktionieren beim Firefox und IE offensichtlich komplett anders irgendwie...
Deshalb lautet die X-Angabe beim FF auch 500px und beim IE -37px. Ich glaube mittlerweile zwar zu wissen, wie dieser Unterschied zu Stande kommt aber anfangen kann ich damit trotzdem nichts :( (FF legt das Hintergrundbild tatsächlich hinter die ganze Zeile, während der IE das Bild hinter jede Zelle steckt)
Die Möglichkeit eine standarmässige Position via CSS anzugeben fällt wegen diesem Unterschied weg, da ich die Tabelle über PHP generiere und mir da bisher keine Möglichkeit bekannt ist um festzustellen ob der Client FF oder IE verwendet.
Lg Cid
Hi,
Wenn ich die Position so einfach setzen könnte, wäre das Problem ein deutlich kleineres ;) Aber die Positionsangaben funktionieren beim Firefox und IE offensichtlich komplett anders irgendwie...
Hast Du background-attachment auf fixed gesetzt? Das versteht der IE nicht ...
cu,
Andreas
Hast Du background-attachment auf fixed gesetzt? Das versteht der IE nicht
Hiho, schöne Vermutung, da bin ich vor längerer Zeit auch mal reingefallen, aber daran liegts nicht, da ich background-attachement gar nicht gesetzt habe, weswegen es eigentlich ja den Initialwert haben sollte.
Das grösste Rätsel in meinen Augen liegt immer noch darin, dass es beim ersten mal immer und ausnahmslos klappt wie ich will, auch im IE. Erst beim zweiten mal setzen des Hintergrundbildes beginnt der IE die Positionierung zu ignorieren...
Hier nochmal die betroffenen Codeausschnitte:
PHP-Teil aus der Tabelle:
$i = 1;
while($haus = pg_fetch_assoc($res))
{
echo "<tr id='leg_haus" . $i . "' onmouseout=\"clearHover('haus" . $i . "')\" onmouseover=\"createHover('haus" . $i . "');\">";
echo "<td class='legend' style='text-align: right; width: 20px;'>" . $i . ".</td>";
echo "<td class='legend'>" . utf8_decode($haus['name']);
echo "</td>";
echo "</tr>";
$i++;
}
JavaScript-Teil:
function clearHover(name)
{
document.getElementById("leg_" + name).style.background = "none";
}
function createHover(name)
{
var x = -37;
if(navigator.appName == "Netscape")
{
x = 500;
}
document.getElementById("leg_" + name).style.background = "url(\"grafik/btn_abschluss.gif\") no-repeat " + x.toString() + "px 7px";
}
Und noch das CSS von legend:
.legend {border-bottom:1px solid #FFFFFF; color:#0E0084; font-weight: bold; font-family:Arial; font-size:14px; padding-right:5px;}
Ich frage mich echt wo der Fehler liegen könnte; zumal da das ganze ja nicht völlig nicht funktioniert :S
Hi,
Hiho, schöne Vermutung, da bin ich vor längerer Zeit auch mal reingefallen, aber daran liegts nicht, da ich background-attachement gar nicht gesetzt habe, weswegen es eigentlich ja den Initialwert haben sollte.
Das grösste Rätsel in meinen Augen liegt immer noch darin, dass es beim ersten mal immer und ausnahmslos klappt wie ich will, auch im IE. Erst beim zweiten mal setzen des Hintergrundbildes beginnt der IE die Positionierung zu ignorieren...
Was passiert, wenn Du die background-Werte einzeln setzt, also statt background einzeln background-image, background-position usw.?
cu,
Andreas
Dann gibts dasselbe Spiel...
Die Grafik wird angezeigt, sie wiederholt sich nicht und trotzdem werden die Positionsangaben völlig ignoriert...
Nya, werd nun mal einen etwas umständlichen work-around zusammenbasteln (da ich cellspacing und cellpadding 0 habe und keinen Rahmen anzeige, hab ich da so eine gaaanz kleine Idee im Hinterkopf) Trotzdem danke das sihr wenigstens versucht habt, mir bei dem Problem zu helfen.
Lg Sid