IE "hüpft" bei Hover-Effekt ???

AR · #1 (**permalink**) 01.02.2005, 11:08

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 · #2 (**permalink**) 01.02.2005, 11: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 · #3 (**permalink**) 01.02.2005, 11: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 · #4 (**permalink**) 01.02.2005, 11:27

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


</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 · #5 (**permalink**) 01.02.2005, 13: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 · #6 (**permalink**) 01.02.2005, 13: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 · #7 (**permalink**) 01.02.2005, 13: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 · #8 (**permalink**) 01.02.2005, 14: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 · #9 (**permalink**) 01.02.2005, 14: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

Code:

a:focus:hover {}

Das Element ist im Focus (im IE "active") und wird mit der Mouse überfahren, geht zB. im FF.

wahsaga · #10 (**permalink**) 01.02.2005, 14: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.)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe css Menu center	xXcyberXx	CSS	5	28.11.2010 19:51
Problem mit CSS Menü	SMundt	CSS	9	07.01.2009 19:12
CSS Navigation - Problem mit IE6	pcklinik	CSS	4	18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7	pcklinik	CSS	7	09.09.2007 17:25
CSS Einsteiger bittet um Hilfe	pcklinik	CSS	0	06.09.2007 14:40