XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   IE "hüpft" bei Hover-Effekt ??? (http://xhtmlforum.de/showthread.php?t=34254)

AR 01.02.2005 12:08

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.

mikey 01.02.2005 12:12

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

:)

Dieter 01.02.2005 12:20

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?

AR 01.02.2005 12:27

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?) :)

Dieter 01.02.2005 14:43

Hallo, AR!

Dann setz mal hier
Code:

.menue a
noch das folgende dazu:
Code:

.menue a, .menue a:link
Dann musst Du auch noch die Eigenschaften und Werte für :visited definieren. Die meisten Browser mucken nämlich, wenn Du die vorgebene Reihenfolge nicht oder nicht komplett einhältst!

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?

wahsaga 01.02.2005 14:58

Zitat:

Zitat von Dieter Krautkraemer
Dann musst Du auch noch die Eigenschaften und Werte für :visited definieren. Die meisten Browser mucken nämlich, wenn Du die vorgebene Reihenfolge nicht oder nicht komplett einhältst!

es gibt keine "vorgegebene" reihenfolge.

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.)

mikey 01.02.2005 14:59

Zitat:

Zitat von Dieter Krautkraemer
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!

nein es reicht die Angabe der Eigenschaften für a allein, dieselben Eigenschaften nochmal für die Pseudo-Elemente zu definieren ist nur nötig, wenn man sie ändern will

z.B. bei hover andere Rahmenfarbe als beim Rest

mikey 01.02.2005 15:04

Zitat:

Zitat von wahsaga
es gibt keine "vorgegebene" reihenfolge.

Mitnichten :)

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 :?:

ulle 01.02.2005 15:07

Zitat:

es gibt keine "vorgegebene" reihenfolge.
Es gibt ältere Browser (evtl. IE5, weiß nicht mehr genau) die diese Reihenfolge benötigen
Code:

a {};
a:visited {};
a:hover {};
a:focus {};
a:active {};

Alle Eigenschaften sollten/müssen nur im Selector [a] angegeben werden. Nur die Änderungen müssen im :Pseudo-Event überschrieben werden.

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.)
Dafür hat das W3C entsprechend vorgesorgt :arrow:
Code:

a:focus:hover {}
Das Element ist im Focus (im IE "active") und wird mit der Mouse überfahren, geht zB. im FF.

wahsaga 01.02.2005 15:15

Zitat:

Zitat von mikey
nein es reicht die Angabe der Eigenschaften für a allein, dieselben Eigenschaften nochmal für die Pseudo-Elemente zu definieren ist nur nötig, wenn man sie ändern will

"reicht" ja, kann aber u.U. auch mehr bewirken als gewünscht - wenn du mit <a name="xyz"> realisierte anchors im dokument hast, trifft a { ... } auch auf diese zu.


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. "
das ist in diesem falle m.E. auf genau dieses beispiel beschränkt, bzw. da ist von :link und :visited die rede.
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.)

ulle 01.02.2005 15:17

Zitat:

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.)
Interessant, hast DU es CROSS-Browser getestet ??

Dieter 01.02.2005 15:23

@Wahsaga: wie kommst Du denn drauf, dass ein besuchter Link nicht mehr hovert, wenn er in der CSS nach :hover aufgeführt ist?

wahsaga 01.02.2005 15:26

Zitat:

Zitat von Dieter Krautkraemer
@Wahsaga: wie kommst Du denn drauf, dass ein besuchter Link nicht mehr hovert, wenn er in der CSS nach :hover aufgeführt ist?

weil gerade das die "problematik" ist, um die es an der von mikey verlinkten stelle geht.
: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.

Dieter 01.02.2005 15:33

@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!

mikey 01.02.2005 15:37

Zitat:

Zitat von Dieter Krautkraemer
@wahsaga: lies das, was mikey schreibt und was im verlinkten Artikel steht, noch mal - in aller Ruhe - durch!

Und schau auch mal bei CSS4U nach!

..stopp ! (oder meine Mami schießt ?) wenn er Unrecht hätte, hätt ich wohl schon reagiert :D

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

Dieter 01.02.2005 15:40

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!

ulle 01.02.2005 15:45

Zitat:

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.)
Stimmt was er sagt :!: :!:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/

html,body       
                {
                margin: 0;
                padding: 3px;
                background-color: #FF9922;
                color: #000000;
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: 100.01%;
                }

div                {
                margin: .5em 0;
                border: 1% solid #000000;
                padding: 1em;
               
                background-color: #FFFFFF;
               
                font-size: 0.8em;
                }

               
a                {
                display: block;
               
                margin: 1em;
               
                background-color: #FFFF00;
                }
/*               
a:visited
                {
                background-color: #FFEE00;               
                }
*/               
a:hover,
a:focus,
a:active
                {
                background-color: #FF9922;               
                }

a:visited
                {
                background-color: #FFEE00;               
                }

               
a:focus:hover                       
                {
                background-color: #33FF33;               
                }


/*]]>*/
</style>

</head>
<body>

<div>
        LINK_1
        LINK_2
</div>


</body>
</html>

Zumindest im IE6 / FF1 haben ich in gezeigtem Beispiel kein :hover/:focus/active - Event, sobald der LINK besucht ist.

Dieter 01.02.2005 15:48

Habe es auch getestet; IE zeigt Effekt, FF1 nicht!

Und nun?

ulle 01.02.2005 15:50

Zitat:

Und nun?
Probier mein Beispiel

Dieter 01.02.2005 16:04

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?

ulle 01.02.2005 16:11

Zitat:

Zitat von wahsaga
:hover und :visited haben die gleiche spezifität, also "gewinnt" die letzte definition,

Da hat er wohl recht.

Im Prinzip wie beim überschreiben von Selektoren (z.B. CLASSes)

Dieter 01.02.2005 16:13

Hallo, AR!

Dich haben wir ganz vergessen - sorry!

Versuch es mal so:
Code:

.menue a, menue a:link {
        color: #000000;
        text-decoration: none;
        padding-left:0.5em;
        padding-right: 0.5em;
        border-top: solid 1px #FFFFFF;
        border-bottom: solid 1px #FFFFFF;
}
.menue a:visited {
        color: #FF0033;
}
.menue a:hover {
        background: #EDEDED;
        border-top: solid 1px #ABABAB;
        border-bottom: solid 1px #ABABAB;
}
.menue a:active {
        background: #EDEDED;
}

Das Hüpfen sollte dann weg sein!

wahsaga 01.02.2005 16:30

Zitat:

Zitat von Dieter Krautkraemer
Ulle, Pseudoklassen sind doch lediglich verschiedene Zustände des gleichen Elementes!

Deshalb wird doch dann auch aus "a:visited" beim Überfahren "a:hover"!

nein.
auf einen bereits besuchten link trifft :visited zu.
wenn du ihn dann mit der maus überfährst, trifft :hover zusätzlich zu.

Zitat:

Alle Pseudoklassen sind doch nur jeweils temporär gültige Zustände
wie definierst du "temporär"?

: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.

Dieter 01.02.2005 16:38

Ja, aus :link wird beim Überfahren :hover, aus :visited wird beim Überfahren :visited im Zustand :hover - das meinte ich mit temporär (zeitweilig).

wahsaga 01.02.2005 16:48

Zitat:

Zitat von Dieter Krautkraemer
Ja, aus :link wird beim Überfahren :hover, aus :visited wird beim Überfahren :visited im Zustand :hover - das meinte ich mit temporär (zeitweilig).

nein, es "wird" nichts anderes daraus - es treffen zwei zustände gleichzeitig zu.

Dieter 01.02.2005 16:59

@wahsaga: das habe ich doch geschrieben, siehe hier:
Zitat:

aus :visited wird beim Überfahren :visited im Zustand :hover
- damit weist dann "a" zwei Zustände gleichzeitig auf!

wahsaga 01.02.2005 17:00

Zitat:

Zitat von Dieter Krautkraemer
@wahsaga: das habe ich doch geschrieben

du schriebst aber ebenfalls
Zitat:

aus :link wird beim Überfahren :hover
nein, da wird nicht irgendwas aus irgendwas, sondern es treffen zwei gleichzeitig zu.

Dieter 01.02.2005 17:06

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!?

ulle 01.02.2005 17:13

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.

Dieter 01.02.2005 17:18

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