nicht angemeldet
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>