IE "hüpft" bei Hover-Effekt ???
Hallo erst mal. Bin neu hier und stelle gerade meine Seite von Table-Layout auf CSS um ... und habe folgendes Problem: Habe eine Menüleiste mit Hover-Effekt, der in einer externen CSS-Datei definiert ist. Bei Opera + Firefox klappt das. Der IE macht Probleme. Die gesamte Seite "hüpft" ein Stück nach oben, sobald ich mit der Maus über einen nicht aktiven Link fahre. Klicke ich drauf, "rutscht" das ganze wieder nach unten. Seltsam so was. Hier mein CSS-Schnipsel:
.menue { margin-top: 0.5em; border-bottom: dotted 1px #ABABAB; border-top: dotted 1px #ABABAB; text-align: right; margin-bottom: 1em; } .menue a { text-decoration: none; color: #000000; padding-left:0.5em; padding-right: 0.5em; } .menue a:hover { border-top: solid 1px #ABABAB; border-bottom: solid 1px #ABABAB; background-color: #EDEDED; } .menue a:active { border-top: solid 1px #ABABAB; border-bottom: solid 1px #ABABAB; background-color: #EDEDED; } Vielen Dank schon mal für Eure Tipps. |
wenn dann den kompletten Code des .menue's auch mit dem HTML Anteil, so ist sonst nur Raten angesagt
ich tippe auf das Microsoft Layout-Problem :) |
Zuerst einmal musst Du eine bestimmte Reihenfolge in den CSS-Angaben für Links befolgen: a, a:link, a:visited, a:hover, a:focus, a:active.
Wenn Du zum Beispiel für :hover einen Border angibst, musst Du das auch für :link so machen, sonst wird es beim Überfahren des Links immer holpern. Für :link nimmst Du den Border einfach in der Hintergrundfarbe, dann sieht man ihn nicht! War das verständlich genug? |
Okay ...
... hier erst mal meine komplette CSS-Datei (ist noch in Bearbeitung):
html { height: 100%; font-family: Verdana,Arial,sans-serif; font-size: small; width: 100%; margin: 0; padding: 0; } body { text-align: center; padding-top: 5%; height: 90%; margin: auto; width: 90%; } .box /* Hauptrahmen, in dem sich alles andere abspielt */ { text-align: left; border: solid 1px #ABABAB; padding-top: 0.5em; padding-left: 1em; padding-right: 1em; padding-bottom: 1em; font-size: small; top: 1em; min-height: 80%; width: 52em; margin: auto; } .titel { padding-bottom: 0.5em; padding-left: 0.5em; padding-right: 0.5em; } .menue /* 1. Menueleiste; horizontal */ { margin-top: 0.5em; border-bottom: dotted 1px #ABABAB; border-top: dotted 1px #ABABAB; text-align: right; margin-bottom: 1em; } .menue a { text-decoration: none; color: #000000; padding-left:0.5em; padding-right: 0.5em; } .menue a:hover { border-top: solid 1px #ABABAB; border-bottom: solid 1px #ABABAB; background-color: #EDEDED; } .menue a:active { border-top: solid 1px #ABABAB; border-bottom: solid 1px #ABABAB; background-color: #EDEDED; } .lico /* Linker Div-Container, indem die zweite Menueleiste und eine Infobox steckt */ { padding: 0.5em; width: 15em; float: left; margin-right: 1em; margin-bottom: 1em; } .umenue /* 2. Menueleiste; vertikal */ { padding: 0.5em; border: solid 1px #ABABAB; } .umenue a { text-decoration: none; color: red; line-height: 1.5em; } .umenue a:hover { font-weight: bold; } .umenue a:active { font-weight: bold; } .info { margin-top: 2em; padding: 0.5em; border: solid 1px #ABABAB; } .main { margin-top: 1.5em; padding-left: 17em; margin-left: 0.5em; padding-right: 0.5em; } .ab { height: 1em; } Der HTML-Teil sieht folgendermaßen aus: <body> <!--[if gte IE 5.5]> <style type="text/css"> <!-- div.box{height:80%;} --> </style> <![endif]--> <div class="box"> <div class="menue"> Link 1 Link 2 Link 3 Link 4 Link 5 </div> ... usw </div> Und danke für die flotte Antwort (geht das bei Euch immer so schnell?) :) |
Hallo, AR!
Dann setz mal hier Code:
.menue a Code:
.menue a, .menue a:link Und denk dran, den Border für alle Klassen (link, visited, hover, etc.) anzugeben. Du kannst ja jedesmal eine andere Farbe nehmen! Aber immer die gleiche Breite! Hast Du das so verstanden? |
Zitat:
da aber mehrere pseudoformate, wie beispielsweise :hover und :visited, durchaus gleichzeitig zutreffen können, kann sich natürlich je nach reihenfolge ein anderer effekt ergeben. (da bei gleicher spezifität ja nun mal die reihenfolge entscheidet.) |
Zitat:
z.B. bei hover andere Rahmenfarbe als beim Rest |
Zitat:
Auszug aus http://www.w3.org/TR/CSS21/selector.html#q15 "Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. " die "Reihenfolge" a,link,visited,hover,active,focus wird so komplett übrigens nicht erwähnt oder zumindest hab ichs noch nicht gefunden...da hab ich doch bei css4you und selfhtml was anderes gelesen :?: |
Zitat:
Code:
a {}; Zitat:
Code:
a:focus:hover {} |
Zitat:
Zitat:
einer von diesen beiden zuständen, :link oder :visited, trifft für einen link immer zu. deshalb ist es in der tat unsinnig und nicht ziefführend, zuerst :hover und dann :link und :visited zu notieren, weil damit kein fall eintritt, in dem :hover anzuwenden wäre. a:link a:hover a:visited aber beispielsweise würde (ggf.) sinn ergeben - hier bekommen halt nur unbesuchte links auch einen hover-effekt, für bereits besuchte findet dieser nicht statt. (unter der voraussetzung, dass jeweils die selbe property mit anderen werten belegt wird.) |
Zitat:
|
@Wahsaga: wie kommst Du denn drauf, dass ein besuchter Link nicht mehr hovert, wenn er in der CSS nach :hover aufgeführt ist?
|
Zitat:
:hover und :visited haben die gleiche spezifität, also "gewinnt" die letzte definition, wenn beide zustände eintreten. (beachte aber bitte auch meine formulierung bzgl. des bezugs auf jeweils die selbe CSS-property.) @ulle: nein, und im moment auch keine möglichkeit dazu. werde ich später nachholen. |
@wahsaga: lies das, was mikey schreibt und was im verlinkten Artikel steht, noch mal - in aller Ruhe - durch!
Und schau auch mal bei http://www.css4you.de/ nach! |
Zitat:
nach W3C hat er allerdings Recht, das Einzige was mir nicht so ganz klar ist, warum anchor Links was anderes als Links sein sollen (also wieso man hier nicht erwarten würde dass die css Angaben greifen) ...mein Unverständnis kann aber auch daran liegen, dass ich grds. <a> als Link benutze und die Ziele immer h1 oder Ähnliches sind so wie ich das bisher verstehe, ist die "Reihenfolge" keine Folge der W3C Spezifikation - wenn man von logischen Bedingungen mal absieht - sondern Browser-gemacht |
Es hat doch niemand behauptet, dass die sinnvolle Reihenfolge der Pseudoklassen eine W3-Spezifikation ist!
Es ist allerdings eine Empfehlung aus der Praxis heraus, weil die Browser teilweise sehr empfindlich reagieren, wenn die Reihenfolge anders oder unvollständig ist! |
Zitat:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Habe es auch getestet; IE zeigt Effekt, FF1 nicht!
Und nun? |
Zitat:
|
Ulle, Pseudoklassen sind doch lediglich verschiedene Zustände des gleichen Elementes!
Deshalb wird doch dann auch aus "a:visited" beim Überfahren "a:hover"! Alle Pseudoklassen sind doch nur jeweils temporär gültige Zustände - oder sehe ich das falsch? |
Zitat:
Im Prinzip wie beim überschreiben von Selektoren (z.B. CLASSes) |
Hallo, AR!
Dich haben wir ganz vergessen - sorry! Versuch es mal so: Code:
.menue a, menue a:link { |
Zitat:
auf einen bereits besuchten link trifft :visited zu. wenn du ihn dann mit der maus überfährst, trifft :hover zusätzlich zu. Zitat:
:link trifft dauerhaft zu, sol lange bis der zustand zu :visited wechselt - was daraufhin dann wieder dauerhaft zutrifft, bis der UA wieder "vergisst", dass dieser link bereits besucht wurde. |
Ja, aus :link wird beim Überfahren :hover, aus :visited wird beim Überfahren :visited im Zustand :hover - das meinte ich mit temporär (zeitweilig).
|
Zitat:
|
@wahsaga: das habe ich doch geschrieben, siehe hier:
Zitat:
|
Zitat:
Zitat:
|
Meine Güte!
Selbstverständlich bleibt die Pseudoklasse ":link" von "a" bestehen, auch wenn sie sich im Zustand ":hover" befindet! Habe nicht geglaubt, dies ausdrücklich erwähnen zu müssen!? |
Trotzdem ist der :hover nichts mehr Wert falls der :visited nachfolgend deklariert (im CSS) und sich auch ereignet hat :!:
Das gleiche wie für :hover gilt auch für :focus / :active :!: Sollte dies auch für den IE5 zutreffen so ist die in einigen Foren / Workarounds gegebene Aussage (auch von mir) ein Mythos, bzw. eine falsche Interpretation gewesen. |
Ja, deshalb sollte man ja auch die Reihenfolge in der CSS beachten!
|
Alle Zeitangaben in WEZ +2. Es ist jetzt 12:28 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023