nicht angemeldet
oder CSS? Firefox 0.9.1 flackert beim Laden und Hovern
Hallo,
vor einiger Zeit hab' ich hier eine Seite vorgestellt, die ich hauptsächlich als CSS Fingerübung erstellt habe. Das Design ist hier nicht recht gut weggekommen, aber das tut nichts zur Sache.
Ob schön oder nicht, das CSS sollte eigentlich in Ordnung sein, und tut's auch in Moz, Op7 und IE ab 5.0.
Und jetzt kommt der Firefox 0.9.1 und vernichtet die Seite buchstäblich.
Wer den 0.9.1 hat, kann's hier nachvollziehen (und vermutlich auch mit dem Moz.1.7):
http://www.tc-bernau.de/index_css.php
Bereits beim Laden der Seite, aber dann beim hovern der Tennisbälle, bzw. der verlinkten Bilder in der Spalte links flackert das ganze Bild heftig.
Um der Sache auf den Grund zu kommen, hab ich das Problem aufs Wesentliche reduziert. Der Quelltext zu diesem Beispiel ganz unten.
Das Problem wird m.E. vom overflow:auto verursacht - aber darauf kann ich in diesem Fall ja nicht gut verzichten.
Ich hab' wirklich schon alles mögliche versucht - ohne Erfolg.
Andererseits - den Firefox zu beschuldigen, ist mir etwas zu einfach; wahrscheinlich zeigt auch der neueste Mozilla das gleiche Verhalten.
Wär' schön, wenn ich auf mein Problem Reaktionen bekäme.
Gruß Fritz
-------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css">
#links, #mitte, #rechts {
float:left;
width:150px;
height:300px;
margin: 5px;
border: 1px solid red;
}
#mitte {
background:yellow; /* damit das Flackern im FF 0.9.1 deutlich wird */
overflow:auto; /* das ist der Übeltäter, aber ohne geht's halt nicht */
}
#rechts a:hover {border:0;} /* ??? ohne dies geht der hovereffekt im IE nicht
dabei ist es ziemlich egal, was drin steht */
#rechts a .info {display:none;}
#rechts a:hover .info {display:block;}
</style>
</head>
<body>
<div id="links">
<h1>links</h1>
</div>
<div id="mitte">
<h1>mitte</h1>
hier muß overflow:auto rein, damit der Text in der Box bleibt<br>
hier muß overflow:auto rein, damit der Text in der Box bleibt<br>
hier muß overflow:auto rein, damit der Text in der Box bleibt<br>
hier muß overflow:auto rein, damit der Text in der Box bleibt<br>
hier muß overflow:auto rein, damit der Text in der Box bleibt<br>
hier muß overflow:auto rein, damit der Text in der Box bleibt<br>
</div>
<div id="rechts">
<h1>rechts</h1>
<a href="#">Link: bitte hovern!<span class="info">ergänzender Linktext</span></a>
</div>
</body>
</html>
-
Hallo,
kann jemand das Problem nachvollziehen?
Gibt es ein Lösung?
Oder muß ich meinen Ansatz verwerfen, wenn neue Moz.-Versionen die Seite zerschießen?Gruß Fritz
-
Hi,
Das Problem wird m.E. vom overflow:auto verursacht - aber darauf kann ich in diesem Fall ja nicht gut verzichten.
warum nicht? Ich kann das Problem zwar in meinen älteren Geckos nicht nachvollziehen, aber diesen winzigen Textbereich empfinde ich als Zumutung. Laß die Höhe doch flexibel, so daß die Seite als Ganzes gescrollt und vor allem genutzt werden kann. Berücksichtige auch, daß der Trend zu größeren Bildschirmen und entsprechend größeren Anzeigebereichen geht, in denen diese fixe Höhe wirklich pimpflig wirkt.
freundliche Grüße
Ingo-
Hallo Ingo,
Das Problem wird m.E. vom overflow:auto verursacht - aber darauf kann ich in diesem Fall ja nicht gut verzichten.
warum nicht?weil: Das Ganze ist wie gesagt vor allem eine Fingerübung in CSS. Dabei wollte ich einen Tennisplatz als Vorgabe für das Layout umsetzen. Und ein Tennisplatz ist in den Abmessungen eben nicht flexibel ;-)
Natürlich kann ich eine Seite mit CSS liquid gestalten.
Aber darum geht es bei meiner Frage nicht. sieh bitte mal vom Design ab (darum hab ich in meinem Posting gebeten), und geh' auf das eigentliche Problem ein, nämlich den Darstellungsfehler im neuesten Firefox (Moz?). Und dann reduziert sich das Problem auf die Kombination von overflow:auto und hover.
Aber wenn Du den neusten Firefox (Moz?) nicht hast, dann wird's wohl schwierig.
Trotzdem Danke für Deinen Kommentar.Gruß Fritz
-
-
Hallo Fritz,
Wer den 0.9.1 hat, kann's hier nachvollziehen (und vermutlich auch mit dem Moz.1.7):
http://www.tc-bernau.de/index_css.php
Bereits beim Laden der Seite, aber dann beim hovern der Tennisbälle, bzw. der verlinkten Bilder in der Spalte links flackert das ganze Bild heftig.bezüglich des Quälcodes kann ich dir leider nicht wirklich weiterhelfen. Zumindest kann ich den Fehler auch in meinem Firefox 0.9.1 sehen.
Es flackert jedoch nicht das ganze Bild (Fensterinhalt), sondern lediglich die linke obere Ecke des Tennisplatzes (etwa 60% horizontal, 70% vertikal). Und das was da flackert sind die Bildchen vom rechten Rand und der Text und die Bilder aus dem Mittelfeld. Ist ganz gut zu erkennen, wenn man dauerhaft schnell mit der Maus über die Links rechts ;-) fährt.
Vielleicht hilft dir das weiter beim Debuggen des Quälcodes.
Viel Glück!
Ben-
Hallo Ben,
Es flackert jedoch nicht das ganze Bild (Fensterinhalt), sondern lediglich die linke obere Ecke
ja, _was_ da flackert ist mir schon klar:
es sind divs, die kurzzeitig an position 0,0 dargestellt werden.
Nur, _warum_ das so ist, und vor allem, wie ich es vermeiden kann (oder ist es doch ein firefox bug) ist mir nicht klar
Danke jedenfalls für dein HilfeGruß Fritz
-
-
Hallo,
o.k., konnte das Problem lösen - allerdings für einen teueren Preis:
mußte einige floats durch position:absolute ersetzen
(warum ist das eigentlich schlecht?)Danke für euere Hilfe
Fritz-
Hi
mußte einige floats durch position:absolute ersetzen
(warum ist das eigentlich schlecht?)Weil du das "flüssige Layout" verlierst.
Elemente können sich viel schneller überschneiden,
decken, etc.Gruss
chlori
-