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


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:17 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019