nicht angemeldet
IE: border-bottom verschwindet bei scrollen
Wahrscheinlich ein IE-Browserfehler, suche aber einen Workaround, damit es sich doch darstellen lässt:
Der nachfolgende Code zeigt eine Seite mit zwei Menüpunkten (eins und zwei), die mit einer dicken Linie unterstrichen ist. Bei Rollover ändert sich die Farbe der Schrift und der Linie.
Wenn ein Menüpunkt selektiert wird, wird das damit angezeigt, daß nur der Text in der rollover-Farbe angezeigt wird (der Balken bleibt in der Standardfarbe).
Das ganze musste absolut positioniert werden, da die Menüzeile an einem bestimmen Ort der Hintergrundgrafik erscheinen soll. Auf dieser Hintergrundgrafik ist dann noch eine transparente Flash-Animation absolut positioniert. Habe die relevanten Teile des Codes separiert und am Ende des Postings reingestellt.
Das Problem:
Wenn ich die Seite im IE (bei mir VErsion 6) ansehe und dann den Menübereich hochscrolle und langsam wieder zurückscrolle, ist der Balken unter den Menüitems weg. Wenn ich schnell zurückscrolle, verschwindet er nicht (gibt auch noch eine Zwischenvariante mit einer schmalen Linie). Beim Firefox und Opera kein Problem. Wenn ich das Browserfenster in der Grösse verändere, erscheint die Linie auch gleich wieder.
Meines Erachtens ein Bug im IE, aber wie kann ich das CSS schreiben, damit es nicht auftritt?
Schöne Grüsse,
wrnr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>scrollproblem </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<style>
/* ---------------------------------------------------------------------- */
body {
font-family:verdana, arial, helvetica, sans-serif;
font-size:10px;
line-height:15px;
}
/* menu */
#content {
position:absolute;
left:140px; top:215px;
width:100px;
margin-bottom:60px;
padding-top:60px;
padding-left:60px;
border:1px solid black;
}
#menu {
position:absolute;
left:140px;
top:194px;
width:100px;
height:21px;
padding:0px;
margin:0px;
vertical-align:top; text-align:left;
z-index:100;
}
.menu {
font-weight:bold;
font-size:10px;
padding:7px;
padding-bottom:4px;
padding-top:0px;
line-height:15px;
text-transform:uppercase;
border-bottom:4px solid black;
text-decoration:none;
color:blue;
}
.menu:hover {
text-decoration:none;
color:blue;
border-bottom:4px solid blue;
}
</style>
<body>
<div id="menu">
<a class="menu" href="test.html">eins</a><a class="menu" href="test.html">zwei</a>
</div>
<div id="content">
<h1>Headline</h1>
<p>Text </p>
</div><!-- content -->
<p style="height:1000px;"> </p><!-- scrollbar machen -->
</body>
</html>
-
Hi,
Wenn ich die Seite im IE (bei mir VErsion 6) ansehe und dann den Menübereich hochscrolle und langsam wieder zurückscrolle, ist der Balken unter den Menüitems weg.
Bei solchen Phantomfehlern hilft es dem IE oft, dem jeweiligen Element in Conditional Comments eine dummy-Höhe von 1px zuzuweisen.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Bei solchen Phantomfehlern hilft es dem IE oft, dem jeweiligen Element in Conditional Comments eine dummy-Höhe von 1px zuzuweisen.
Hab ich versucht, hat leider nix geholfen. Habe jetzt aber einen Workaround mit conditional comments gemacht. Hier die Angaben für die über cc eingebundene css-Datei:
#menu { height:21px; background-color:#b7b7b7;; } .menu { background-color:white; border-top:1px solid white; }grüsse,
wrnr
-