zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden IE "hüpft" bei Hover-Effekt ???

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.02.2005, 12:08
AR AR ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2005
Beiträge: 2
AR befindet sich auf einem aufstrebenden Ast
Standard 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.
__________________
Wer früher stirbt, lebt länger ewig
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.02.2005, 12:12
Benutzer
neuer user
 
Registriert seit: 15.12.2004
Beiträge: 83
mikey befindet sich auf einem aufstrebenden Ast
Standard

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

Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.02.2005, 12:20
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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?
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #4 (permalink)  
Alt 01.02.2005, 12:27
AR AR ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2005
Beiträge: 2
AR befindet sich auf einem aufstrebenden Ast
Standard 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?)
__________________
Wer früher stirbt, lebt länger ewig
Mit Zitat antworten
  #5 (permalink)  
Alt 01.02.2005, 14:43
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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?
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #6 (permalink)  
Alt 01.02.2005, 14:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

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.)
Mit Zitat antworten
  #7 (permalink)  
Alt 01.02.2005, 14:59
Benutzer
neuer user
 
Registriert seit: 15.12.2004
Beiträge: 83
mikey befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 01.02.2005, 15:04
Benutzer
neuer user
 
Registriert seit: 15.12.2004
Beiträge: 83
mikey befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 01.02.2005, 15:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.02.2005, 15:15
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

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.)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:06 Uhr.