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>
<ul id="left_navigation" >
[*]Menuepunkt 1
[/list]
</div>
<div id="Inhalt" >
<div id="top" >
</img>
<a href="http://www.x.de" id="link_logo_rechts">
</img>
</a>
<ul id="top_navigation">
Dies ist der ERSTE Link
[/list]
<ul id="mehrsprachigkeit">
[*]
</img>
[/list]
</div>
<div id="micronavi">
Dies ist der ZWEITE Link
</div>
<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>
</div>
</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; }
(sorry, das Attachement hinzufügen ging irgendwie nicht, darum habe ich css-Inhalt & html-Seite direkt hierher kopiert).
Ich danke euch vielmals im Voraus für eure Hilfe !
Viele Grüße,
Landoran
...
... mit float hab ich es bisher nicht richtig hinbekommen. Aber wenn ich nicht herausfinde, wie der Effekt trotz absolute verschwindet, werde ich es wohl in der Richtung versuchen müssen ...