IE-Bug bei Hover über Links
0 0 0 0 0 0 
Detlef G.
0
IE-Bug bei Hover über Links
Hallo,
wahrscheinlich kennt ihr dieses Problem schon in ähnlicher Weise, aber so wie bei mir habe ich es bisher noch nicht gesehen und erst recht keine funktionierende Lösung gefunden, darum bitte ich Euch alle um Mithilfe:
Das Problem tritt nur im IE auf (wir benutzen IE 6): Die untenstehende Beispielseite (stark vereinfacht) sieht beim Aufruf ok aus; die beiden Logos "Rechtslogo 1" und "Rechtslogo 2" befinden sich genau in der oberen rechten Ecke. Wenn ich jedoch unten mit der Scrollbar nach rechts scrolle, so dass besagte logos nicht mehr in der rechten Ecke sind und anschliessend mit der Maus über den ersten Link in der Mitte fahre ("Dies ist der erste link"), so wird das Rechtslogo 1 neu positioniert und springt erneut in die rechte Ecke. Analog geschieht das mit Rechtslogo 2 (unter Rechtslogo 1), wenn ich mit der Maus über den zweiten Link in der Mitte fahre.
Zusätzlich wird Rechtslogo 1 auch dann neu in der Ecke positioniert, wenn ich direkt über das Rechtslogo fahre.
Soweit ich gehört habe, sollen diese Hover-Probleme im IE 7 behoben sein. Kann man für IE6 hier auch ohne viel Aufwand etwas machen, damit die Logos nicht neu positioniert werden ?
Wenn ich im Stylesheet bei a:hover die Background-Farbangabe entferne, bleibt Rechtslogo 1 an Ort und Stelle ... nur würde ich die Farbänderung beim Hover gern behalten.
Wisst ihr Rat ?
Hier ist erstmal die HTML-Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<head>
<link rel="stylesheet" href="./teststylesheet.css" type="text/css" title="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="left" >
<img src="./logo1.gif" id="logo_links"></img>
<ul id="left_navigation" >
<li><a href="#Link1">Menuepunkt 1</a></li>
</ul>
</div> <!-- div LEFT -->
<div id="Inhalt" >
<div id="top" >
<img src="./top1.jpg" id="top_grafik"></img>
<a href="www.x.de" id="link_logo_rechts">
<img src="./rechts1.gif" id="logo_rechts" title="Rechtslogo1"></img>
</a>
<ul id="top_navigation">
<a href="x" class="top">Dies ist der ERSTE Link</a>
</ul>
<ul id="mehrsprachigkeit">
<li><a href="x"><img src="./de1.gif" id="spr" title="Rechtslogo2"></img></a></li>
</ul>
</div> <!--- div TOP -->
<br />
<div id="micronavi">
<a href="x" class="micronavi" >Dies ist der ZWEITE Link</a>
</div> <!-- div MICRONAVI -->
<div id="content">
<h2>Ergebnistabelle:</h2>
<table>
<tr>
<td>Spalte01Spalte01</td> <td>Spalte02Spalte02</td>
<td>Spalte03Spalte03</td> <td>Spalte04Spalte04</td>
<td>Spalte05Spalte05</td> <td>Spalte06Spalte06</td>
<td>Spalte07Spalte07</td> <td>Spalte08Spalte08</td>
<td>Spalte09Spalte09</td>
</tr>
</table>
</div> <!-- div CONTENT -->
</div> <!-- div INHALT -->
</div> <!-- div WRAP -->
</body>
</html>
... und hier der Inhalt von teststylesheet.css:
* { margin:0; padding:0; }
html, body { height:100%; }
body { padding-left: 12em; /* Versatz wegen linker Menueleiste. */
color: black; font-family: verdana, sans-serif; }
* html #wrap { height: 1%; } /* für IE */
#left {
width:11.5em; /* Breite von 11.5em */
float:left; /* Textumfluss: Links */
margin-top: 0.5em; /* Oberer Rand: 0.5em */
margin-left:-11.5em; /* Versatz linker Rand */
overflow: hidden;
}
* html #left {
position:relative; /* sichtbar machen */
display:inline; /* doubled float-margin */
margin-right:0; /* kein rechter Rand */
}
#Inhalt { width:100%; margin-left:-1px; }
div#Inhalt {
padding: 1em;
margin: 0px 0em 0px -0.5em;
}
* html #Inhalt { float:left; } /* für IE */
* html div#Inhalt { margin-left: -0.3em; } /* für IE */
ul#left_navigation {
padding: 0.25em; /* Abstand: 0.25 em */
font-size: 0.7em; /* Schriftgroesse: 0,7em */
width: 14.8em; /* Breite: 14.8em */
}
html ul#left_navigation {
padding-left: 0.25em; /* Abstand links: 0.25em */
width: 14.8em; /* Breite: 14.8em */
}
/* Aufzaehlung linke Navigation */
ul#left_navigation li { margin: 0.25em; list-style-type: none; }
/*Links in linker Navigation */
ul#left_navigation a {
padding: 0.5em; /* Abstand: 0.5em */
display: block; /* Display:block */
font-weight: bold; /* Fettschrift */
background-color: #e0e0e0; /* Hintergrund: grau */
text-decoration: none; /* Text-Dekoration: Ohne */
width: 13.1em; /* Breite: 13.1em */
}
/* Top-Navigation */
ul#top_navigation {
border-width: 0px;
font-size: 0.7em; /* Schriftgroesse: 0.7em */
margin-right: 17.1em; /* rechter Rand: 17.1 em */
background-color: #205671; /* Hintergrund: blau */
text-align: center; /* Text zentriert */
}
* html ul#top_navigation { margin-right: 18.3em; } /* für IE */
/* Link in Liste in der Top-Navigation */
ul#top_navigation a {
font-weight: bold; /* Schriftstil: fett */
color: white; /* Schriftfarbe weiss */
background-color: #205671; /* Hintergrund: blau */
text-decoration: none; /* Text-Dekoration: ohne */
}
div#micronavi { font-size: 0.7em; }
div#content { font-size: 0.8em; padding-right: 1em; }
a:hover { background: #eeeeee; } /* GRUND FÜR IE-HOVER-VERSCHIEBUNG RECHTSLOGO ?! */
H2 { padding-top:1em; }
#link_logo_rechts {
right: 8px; top: 8px; position: absolute; }
ul#mehrsprachigkeit {
padding-left: 0.6em;
font-size: 0.7em;
right: 0.6em;
width: 13.9em;
position: absolute;
margin-top: -1.15em;
height: 1.15em;
background-color: #c0c0c0;
text-align: center;
}
* html ul#mehrsprachigkeit { padding-left: 0.4em; }
html ul#mehrsprachigkeit { width: 13.75em; }
ul#mehrsprachigkeit li { list-style-type: none; }
ul#mehrsprachigkeit a { border: 0px; }
TD { BORDER: #000 1px solid; }
#logo_links { width:11em; height:8.1em; }
#top_grafik { width:14.2em; height:6.6em; }
#logo_rechts { width:10.4em; height:6em; }
#spr { width:3em; height:1em; }
Ich danke euch schon mal im Voraus für eure Hilfe !
Viele Grüße,
Galdran
-
hi,
Hier ist erstmal die HTML-Seite:
Kaum jemand hat vermutlich Lust, erst mal per Copy&Paste aus deinem meterlangen Code ein anzeigbares Dokument zu erstellen, um das Problem nachvollziehen zu können.
Stelle doch bitte ein Online-Beispiel bereit.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi Wahsaga,
hätte ich gern getan ... leider habe ich im Dienst einfach nicht die Möglichkeit, unfertige Seiten online zu stellen (nein, und auch noch keinen eigenen Webspace. :( ).
Aber ich habe den Code von HTM-Seite und Stylesheet jetzt zusammengefasst, man muss also nur noch diesen gesamten Code kopieren und als HTM-Datei speichern.
Mehr Komfort kann ich leider nicht bieten und hoffe, dass sich trotzdem jemand erbarmt.Also jetzt der Gesamtcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<head>
<style type="text/css">
* { margin:0; padding:0; }
html, body { height:100%; }body { padding-left: 12em; /* Versatz wegen linker Menueleiste. */
color: black; font-family: verdana, sans-serif; }* html #wrap { height: 1%; } /* für IE */
#left {
width:11.5em; /* Breite von 11.5em */
float:left; /* Textumfluss: Links */
margin-top: 0.5em; /* Oberer Rand: 0.5em */
margin-left:-11.5em; /* Versatz linker Rand */
overflow: hidden;
}* html #left {
position:relative; /* sichtbar machen */
display:inline; /* doubled float-margin */
margin-right:0; /* kein rechter Rand */
}#Inhalt { width:100%; margin-left:-1px; }
div#Inhalt {
padding: 1em;
margin: 0px 0em 0px -0.5em;
}* html #Inhalt { float:left; } /* für IE */
* html div#Inhalt { margin-left: -0.3em; } /* für IE */ul#left_navigation {
padding: 0.25em; /* Abstand: 0.25 em */
font-size: 0.7em; /* Schriftgroesse: 0,7em */
width: 14.8em; /* Breite: 14.8em */
}html ul#left_navigation {
padding-left: 0.25em; /* Abstand links: 0.25em */
width: 14.8em; /* Breite: 14.8em */
}/* Aufzaehlung linke Navigation */
ul#left_navigation li { margin: 0.25em; list-style-type: none; }/*Links in linker Navigation */
ul#left_navigation a {
padding: 0.5em; /* Abstand: 0.5em */
display: block; /* Display:block */
font-weight: bold; /* Fettschrift */
background-color: #e0e0e0; /* Hintergrund: grau */
text-decoration: none; /* Text-Dekoration: Ohne */
width: 13.1em; /* Breite: 13.1em */
}/* Top-Navigation */
ul#top_navigation {
border-width: 0px;
font-size: 0.7em; /* Schriftgroesse: 0.7em */
margin-right: 17.1em; /* rechter Rand: 17.1 em */
background-color: #205671; /* Hintergrund: blau */
text-align: center; /* Text zentriert */
}* html ul#top_navigation { margin-right: 18.3em; } /* für IE */
/* Link in Liste in der Top-Navigation */
ul#top_navigation a {
font-weight: bold; /* Schriftstil: fett */
color: white; /* Schriftfarbe weiss */
background-color: #205671; /* Hintergrund: blau */
text-decoration: none; /* Text-Dekoration: ohne */
}div#micronavi { font-size: 0.7em; }
div#content { font-size: 0.8em; padding-right: 1em; }
a:hover { background: #eeeeee; } /* GRUND FÜR IE-HOVER-VERSCHIEBUNG RECHTSLOGO ?! */
H2 { padding-top:1em; }#link_logo_rechts {
right: 8px; top: 8px; position: absolute; }ul#mehrsprachigkeit {
padding-left: 0.6em;
font-size: 0.7em;
right: 0.6em;
width: 13.9em;
position: absolute;
margin-top: -1.15em;
height: 1.15em;
background-color: #c0c0c0;
text-align: center;
}* html ul#mehrsprachigkeit { padding-left: 0.4em; }
html ul#mehrsprachigkeit { width: 13.75em; }
ul#mehrsprachigkeit li { list-style-type: none; }
ul#mehrsprachigkeit a { border: 0px; }
TD { BORDER: #000 1px solid; }#logo_links { width:11em; height:8.1em; }
#top_grafik { width:14.2em; height:6.6em; }
#logo_rechts { width:10.4em; height:6em; }
#spr { width:3em; height:1em; }
</style>
</head><body>
<div id="wrap">
<div id="left" >
<img src="./logo1.gif" id="logo_links"></img>
<ul id="left_navigation" >
<li><a href="#Link1">Menuepunkt 1</a></li>
</ul>
</div> <!-- div LEFT --><div id="Inhalt" >
<div id="top" ><img src="./top1.jpg" id="top_grafik"></img>
<a href="www.x.de" id="link_logo_rechts">
<img src="./rechts1.gif" id="logo_rechts" title="Rechtslogo1"></img>
</a><ul id="top_navigation">
<a href="x" class="top">Dies ist der ERSTE Link</a>
</ul><ul id="mehrsprachigkeit">
<li><a href="x"><img src="./de1.gif" id="spr" title="Rechtslogo2"></img></a></li>
</ul></div> <!--- div TOP -->
<br /><div id="micronavi">
<a href="x" class="micronavi" >Dies ist der ZWEITE Link</a>
</div> <!-- div MICRONAVI --><div id="content">
<h2>Ergebnistabelle:</h2>
<table>
<tr>
<td>Spalte01Spalte01</td> <td>Spalte02Spalte02</td>
<td>Spalte03Spalte03</td> <td>Spalte04Spalte04</td>
<td>Spalte05Spalte05</td> <td>Spalte06Spalte06</td>
<td>Spalte07Spalte07</td> <td>Spalte08Spalte08</td>
<td>Spalte09Spalte09</td>
</tr>
</table></div> <!-- div CONTENT -->
</div> <!-- div INHALT -->
</div> <!-- div WRAP -->
</body>
</html>Nochmals vielen Dank im Voraus für jede Anregeung.
Viele Grüße,
Galdran-
hi,
Aber ich habe den Code von HTM-Seite und Stylesheet jetzt zusammengefasst, man muss also nur noch diesen gesamten Code kopieren und als HTM-Datei speichern.
Also ohne erst mal die syntaktischen Fehler zu beseitigen, sehe ich in einer weiteren Suche nach der Ursache von Darstellungsfehlern wenig Sinn.
Also jetzt der Gesamtcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
Warum XHTML 1.1, warum kein XHTML 1.0?
Warum keine vollständige DTD, um den IE nicht in den Quirks Mode zu schicken?<head>
<html> fehlt vorher.
<ul id="top_navigation">
<a href="x" class="top">Dies ist der ERSTE Link</a>
</ul>A darf kein Kind von UL sein, es fehlt LI.
Das sind erst mal die paar wichtigen, die der http://validator.w3.org/ bei Upload der Datei findet.
Und der vorliegende Aufbau erscheint mir auch nicht sonderlich konsistent und strukturell sinnvoll. bspw. mehrere Listen mit nur einem Listenelement; Rechtslogo2 ist ein Listenelement, Rechtslogo1 ist keins, etc.
Aber das mag ja u.U. an der Reduzierung auf einen einfacheren Testfall liegen.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
danke für deine Antwort.
Stimmt, das HTML am Beginn ist beim Copy wohl rausgefallen - aber die Seite ist trotzdem aufrufbar.Warum XHTML 1.1, warum kein XHTML 1.0?
ist uns leider vorgegeben. Ich weiß, dass noch ein zwei Dinge drin sind, die XHTML 1.0, aber nicht 1.1 erfüllen - die aber auch nicht ohne Weiteres zu ersetzen sind ... :( Ist aber auch nicht entscheidend - mit Spezifikation 1.0 kommt das Problem genauso.
A darf kein Kind von UL sein, es fehlt LI.
Ja, ich weiß, da ist normalerweise ein LI drin - ich wollte den Code hier nicht zu lang machen und habe versucht alles rauszuwerfen, was für das Problem und den Seitenaufbau nicht unbedingt nötig ist. Das LI hat mit dem eigentlichen Problem aber nichts zu tun.
Und, ja, auch die anderen von dir festgestellten Dinge liegen an der Reduzierung auf einen einfacheren Testfall.
Ich denke aber auch nicht, dass die gesamte Seite unbedingt im Detail untersucht werden muss. Ich hoffte, dass jemand sich grundsätzlich mit den seltsamen Hoverbugs des IE auskennt, da ähnliche Fragen schon öfter in Foren gestellt wurden (wenn auch in anders gelagerten Fällen), und mir schon nach dem Aufruf der Seite und Austesten des Verhaltens vielleicht etwas sagen kann.
Danke trotzdem für deine bisherige Mühe.
Gruß Landoran-
Hallo,
so, jetzt ist die Testseite aber geprüft und als XHTML 1.1 valid erkannt !
Das Problem besteht jedoch unverändert - was nicht überrascht, schliesslich ist der Bug des IE 6 immer noch existent :)Also hier die 100% valide Testseite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>Mustertabelle</title>
<style type="text/css">
* { margin:0; padding:0; }
html, body { height:100%; }body { padding-left: 12em;
color: black; font-family: verdana, sans-serif; }#Inhalt { width:100%; margin-left:-1px; }
div#Inhalt {
padding: 1em;
margin: 0px 0em 0px -0.5em;
}/* Top-Navigation */
ul#top_navigation {
border-width: 0px;
font-size: 0.7em;
margin-right: 17.1em;
background-color: #205671;
text-align: center;
}/* Link in Liste in der Top-Navigation */
ul#top_navigation a {
font-weight: bold;
color: white;
background-color: #205671;
text-decoration: none;
}div#micronavi { font-size: 0.7em; }
div#content { font-size: 0.8em; padding-right: 1em; }
a:hover { background: #eeeeee; }
H2 { padding-top:1em; }#link_logo_rechts {
right: 8px; top: 8px; position: absolute; }ul#mehrsprachigkeit {
padding-left: 0.6em;
font-size: 0.7em;
right: 0.6em;
width: 13.9em;
position: absolute;
margin-top: -1.15em;
height: 1.15em;
background-color: #c0c0c0;
text-align: center;
}* html ul#mehrsprachigkeit { padding-left: 0.4em; }
html ul#mehrsprachigkeit { width: 13.75em; }
ul#mehrsprachigkeit li { list-style-type: none; }
ul#mehrsprachigkeit a { border: 0px; }
TD { BORDER: #000 1px solid; }#logo_links { width:11em; height:8.1em; }
#top_grafik { width:14.2em; height:6.6em; }
#logo_rechts { width:10.4em; height:6em; }
#spr { width:3em; height:1em; }
</style>
</head><body>
<div id="wrap">
<div id="Inhalt" >
<div id="top" ><img src="./top1.jpg" id="top_grafik" alt="grafik"></img>
<a href="www.x.de" id="link_logo_rechts">
<img src="./rechts1.gif" id="logo_rechts" title="Rechtslogo1" alt="rechtslogo1"></img>
</a><ul id="top_navigation">
<li><a href="x" class="top">Dies ist der ERSTE Link</a></li>
</ul><ul id="mehrsprachigkeit">
<li><a href="x">
<img src="./de1.gif" id="spr" title="Rechtslogo2" alt="rechtslogo2"></img>
</a>
</li>
</ul></div> <!--- div TOP -->
<br /><div id="micronavi">
<a href="x" class="micronavi" >Dies ist der ZWEITE Link</a>
</div> <!-- div MICRONAVI --><div id="content">
<h2>Ergebnistabelle:</h2>
<table>
<tr>
<td>Spalte01Spalte01</td> <td>Spalte02Spalte02</td>
<td>Spalte03Spalte03</td> <td>Spalte04Spalte04</td>
<td>Spalte05Spalte05</td> <td>Spalte06Spalte06</td>
<td>Spalte07Spalte07</td> <td>Spalte08Spalte08</td>
<td>Spalte09Spalte09</td>
</tr>
</table></div> <!-- div CONTENT -->
</div> <!-- div INHALT -->
</div> <!-- div WRAP -->
</body>
</html>Wenn jemand eine Idee hat, wie das Repositionieren der rechts oben gelegenen Grafiken (ja ich weiß, Bilder sind nicht dabei, aber der leeren Grafikrahmen!) verhindern kann, wäre ich sehr dankbar.
Viele herzliche Grüße,
Landoran -
Hallo Landoran
Ja, ich weiß, da ist normalerweise ein LI drin - ich wollte den Code hier nicht zu lang machen und habe versucht alles rauszuwerfen, was für das Problem und den Seitenaufbau nicht unbedingt nötig ist. Das LI hat mit dem eigentlichen Problem aber nichts zu tun.
Die Bugs des IE treten oft nur bei einer ganz bestimmten Kombination aus HTML und CSS auf, oftmals sogar bei einer kleinen Änderung am anderen Ende der Seite, selbst die Größe des Inhalts im Verhältnis zur Fenstergröße oder ein HTML-Kommentar mehr oder weniger kann darauf Einfluss haben.
... Ich hoffte, dass jemand sich grundsätzlich mit den seltsamen Hoverbugs des IE auskennt, da ähnliche Fragen schon öfter in Foren gestellt wurden (wenn auch in anders gelagerten Fällen), und mir schon nach dem Aufruf der Seite und Austesten des Verhaltens vielleicht etwas sagen kann.
Wirklich auskennen? Naja, die Bugs des IE sind unerforschlich. ;)
Das problematische Element ist absolut rechts positioniert. Die Positionierung bezieht sich auf das erste Vorfahrenelement, welches nicht static positioniert ist, also bei dir der Viewport.
Der IE positioniert also an der rechten Seite des Browserfensters, dann folgen Elemente, die breiter sind, er rendert aber erstmal (auch beim Scrollen) nicht alles neu. Wenn der Link jetzt gehovert wird, muss er etwas ändern, also rendert er die Seite neu. Dabei positioniert er das Element wieder rechts, es springt.Der Effekt tritt nur bei absolut positionierten Elementen auf.
Wenn du die Änderung beim hovern der Links entfernst oder die Elemente mittels float und clear statt position:absolute anordnest, springt nichts.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
Hi,
Warum keine vollständige DTD, um den IE nicht in den Quirks Mode zu schicken?
ab HTML 4.01 Strict geht der IE doch auch ohne DTD nicht mehr in den quirks mode.
freundliche Grüße
Ingo
-
-
-