• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

:hover-Problem IE7

P

pax

Guest
Hallo an alle,

habe mal wieder ein schwierig zu beschreibendes Problem.
Gegeben ist ein recht normales Klappmenü das mit :hover ausklappt und auch einwandfrei funktioniert. Im IE7 (und auch nur dort) gibt es allerdings einen seltsamen Effekt. Dazu folgende Screenshots:
Maus_auf_Hotel.jpg

Soweit alles normal. Wenn ich nun aber mit der Maus das Menü nach rechts verlasse, also nicht über das Untermenü der 3. Ebene fahre und auch nicht über Pensionen etc., dann passiert folgendes, wenn ich danach wieder mit der Maus über Unterkünfte fahre:
Maus_auf_Unterkünfte.jpg

Ich habe keine Idee, wieso das passiert und was ich dagegen tun kann. Seltsam ist das vor allem, weil die :hover-klasse an die < ul > gehangen ist, und der Text darin sehr wohl ausblendet, die ul aber nicht. Ich halte das für einen IE-Bug.

Kennt jemand vielleicht dieses Problem und weiß einen Workaround oder hat jemand eine Idee ?

Danke.
 
Ein paar Informationen über die Navigation wären hilfreich. Selbstgebaut oder aus dem Internet, wenn Internet, dann woher? Noch besser wäre natürlich ein Link zu deinem (Test-)Server ...
Der Fehlerursache mit den Entwicklertools (F12 in einem aktuelleren IE drücken, dort dann den IE7 wählen) auf die Spur zu kommen, hast du sicher schon versucht ...?
B.
 
Ohne Quellcode kann man hier nur raten. Natürlich hat der IE7 einige Macken was CSS angeht. In den meisten Fällen hatte ich damit Probleme, wenn der IE6/7 dieses merkwürdige hasLayout brauchte. Oft half es bereits entweder die betroffenen Elemente relativ zu positionieren, oder mit der nicht CSS-validen Eigenschaft "zoom: 1" zu versehen, oder eine Höhe anzugeben (beim Menü "height: 1%;" für die <li>'s).
 
Einen Link darf ich leider nicht angeben, das ist einer unserer Entwicklungsserver. Den Code der Navi kann ich gerne hier reinkopieren, aber das sind ca 900 tags. Im Prinzip immer das gleiche:
Code: 
<div class="navTabLeftInt">
                <ul>
 <li class="first node">
<div class="posWrap">
<a href="oberwiesenthal-umgebung/"  >Oberwiesenthal &amp; Umgebung</a>
<ul>
<li class="first">
<div class="posWrap">
<a href="oberwiesenthal-umgebung/ortsportrait/"  >Ortsportrait</a>
</div>
</li>
<li class="node">
<div class="posWrap">
<a href="oberwiesenthal-umgebung/lage/"  >Lage</a>

usw..

im css gibts auch nichts besonderes:
Code: 
#horizontalNav li:hover > div > ul {
    display: block;
}

... ansonsten nur Optik und Positionierung

zoom: 1 hab ich gleich als erstes versucht, erfolglos.
 
Zuletzt bearbeitet von einem Moderator:
Sieh dir mal hier die Ziffer 7 an:
Da sind einige Spezialangaben genannt, die der IE 7 für ein Klappmenue benötigt.
 
Das Whitespaceproblem hatte ich gelöst. Die csshover3-source.htc einzubinden war einen Versuch wert, danke für den Tip, hat aber auch nicht geholfen.
 
Ok, wenns hilft:
Basic.css
Code: 
/*Horizontales Menü*/
#horizontalNav{
    position: absolute;
    top: -60px;
    width: 100%  
}
.horNavLeft{
    width:50%;
    height: 60px;
    float: left;
    position: relative;
    z-index: 100;
}

.horNavRight{
    width:50%;
    float: right;
    height: 60px;
    position: relative;
}

#horizontalNav>div>.navTabLeft {
    position: absolute;
    background-color: rgba(240,241,242,0.9);
    left: 0;
    right: -320px;
    height: 60px;
}

#horizontalNav>div>.navTabRight {
    left: 326px;
    right: 0;
    height: 60px;
    position: absolute;
    background-color: rgba(240,241,242,0.9);
}

#horizontalNav>div>.navTabRight>.navTabRightInt,
#horizontalNav>div>.navTabLeft>.navTabLeftInt {
    display: table;
}

#horizontalNav>div>.navTabLeft>.navTabLeftInt {
    width: 814px;
    float: right;
}


#horizontalNav>.horNavRight>.navTabRight>.navTabRightInt>ul>li,
#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul>li{
    display: table-cell;
}
#horizontalNav>.horNavRight>.navTabRight>.navTabRightInt>ul,
#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul{
    display: table-row;
}

#horizontalNav ul {
    display: block;

}
#horizontalNav li {
    display: block;
    position: relative;
    height: 56px;
}



#horizontalNav>.horNavRight>.navTabRight>.navTabRightInt>ul>li:hover>div>a,
#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul>li:hover>div>a,
#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul>li.active>div>a,
#horizontalNav>.horNavRight>.navTabRight>.navTabRightInt>ul>li:active>div>a{
    color: G(DUNKELROT);
}

#horizontalNav>.horNavRight>.navTabRight>.navTabRightInt>ul>li:hover,
#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul>li:hover,
#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul>li.active,
#horizontalNav>.horNavRight>.navTabRight>.navTabRightInt>ul>li:active{
    border-bottom: 4px solid G(DUNKELROT);

}

#horizontalNav li:hover > div > ul {
    display: block;
}
#horizontalNav ul ul li {
    float: none;
    height: auto;
    margin: 0;
    border-bottom: 1px solid rgb(216, 220, 222);
    border-bottom: 1px solid rgba(216, 220, 222, .95);
    background-color: rgba(51,66,71, .95);
    width: 249px;
    padding-top: 5px;
    padding-bottom: 4px;
    z-index: 1000;
}

#horizontalNav>.horNavRight>.navTabRight ul ul ul, 
#horizontalNav>.horNavLeft>.navTabLeft ul li.last ul ul{
    position: absolute;
    left:-250px;
    top: 0px;
}

#horizontalNav>.horNavRight>.navTabRight ul>li>div>ul ul, 
#horizontalNav>.horNavLeft>.navTabLeft ul>li.last>div>ul ul{
    border-right: 1px solid rgb(216, 220, 222);
    border-right: 1px solid rgba(216, 220, 222, .95);
    border-left: medium none;
}

#horizontalNav ul ul li.last {
    border-bottom: none;
}

#horizontalNav ul ul {
    display: none;
    height: auto;
    top: 47px;
    left: -1px;
    position: absolute;
}

#horizontalNav .navTabLeftInt>ul>li.first>div>ul {
    left: 7px;
}

#horizontalNav .horNavRight ul ul {
    left: 0px;
    top: 60px;
}


#horizontalNav ul>li>div>ul ul {
    border-left: 1px solid rgb(216, 220, 222);
    border-left: 1px solid rgba(216, 220, 222, .95);

}

#horizontalNav ul>li>div>ul ul{
    left: 249px;
    top: 0px;

}


#horizontalNav ul ul li a {
    display: block;
    height: auto;
    overflow: hidden;
    text-align: left;
    width: auto;
}

#horizontalNav ul ul li:hover {
    color: white;
    background-color: G(DUNKELROT);
}
#horizontalNav ul ul li:hover>div>a {
      font-weight: bold;
}

#horizontalNav>.horNavRight>.navTabRight>.navTabRightInt>ul>li>div>a,
#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul>li>div>a{
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 5px;
    margin-top: 13px;
    margin-bottom: 9px;
    font-family: "Trebuchet MS";
    font-size: 15px;
    font-weight: bold;
    color: G(BLAUGRAU);
    line-height: 30px;
    display: block;
}

#horizontalNav>.horNavRight>.navTabRight>.navTabRightInt>ul>li>div>ul>li a,
#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul>li>div>ul>li a{
    font-size: 15px;
    font-family: "Trebuchet MS";
    color: white;
    padding-left: 10px;
}


#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul>li.first>div {
    text-align: left;
    border: none;
    margin-left: -7px;
}

#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul>li>div  {
    border-left: 1px G(GRAU1) solid;
    position: relative;
}

#horizontalNav ul>li>div>ul li.node {
    background-image: url(/fileadmin/img/layout/arrow-white-right-alpha.png);
    background-repeat: no-repeat;
    background-position: 230px center;
}

#horizontalNav>.horNavRight ul>li>div>ul li.node, 
#horizontalNav>.horNavLeft ul>li.last>div>ul li.node {
    background-image: url(/fileadmin/img/layout/arrow-white-left-alpha.png);
    background-position: 10px center;
}

#horizontalNav>.horNavRight>.navTabRight>.navTabRightInt>ul>li>div>ul>li>div>a,
#horizontalNav>.horNavLeft>.navTabLeft>.navTabLeftInt>ul>li.last>div>ul>li>div>a{
    margin-left: 20px;
}

HorNavleft usw.. sind einfach divs zur Positionierung, ist etwas tricky bei der seite, weil das Menü quasi aus zwei Menüs besteht, mit einem Spalt der relativ zur Mitte positioniert ist.

IE_Special.css:
Code: 
.navTabLeft,
.navTabRight {
       background-color: transparent;
       background:transparent;
}
.horNavBG {
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6F0F1F2,endColorstr=#E6F0F1F2); 
       zoom: 1;
       position: absolute;
       height: 100%;
       width: 100%;
}
.horNavLeft,
.horNavRight {
    width: 49.99%;
}
#horizontalNav > .horNavRight > .navTabRight > .navTabRightInt > ul > li, 
#horizontalNav > .horNavLeft > .navTabLeft > .navTabLeftInt > ul > li {
    display: block;
    float: left;
}
#horizontalNav > .horNavRight > .navTabRight > .navTabRightInt > ul > li > div > a, 
#horizontalNav > .horNavLeft > .navTabLeft > .navTabLeftInt > ul > li > div > a {
    margin-bottom: 0px;
}


#horizontalNav ul ul{
    top: 43px;
}

#horizontalNav .horNavRight ul ul{
    top: 61px;
}

#horizontalNav ul>li>div>ul ul{
    top: 1px;
}
#horizontalNav .horNavRight .navTabRight ul>li>div>ul ul,
#horizontalNav .horNavLeft .navTabLeft ul>li.last>div>ul ul{
    top: 1px;
}
#horizontalNav ul ul li{
    margin-top: -1px;
}

#horizontalNav ul>li>div>ul>li a {
    display: inline;
}

#horizontalNav {
    z-index: 1000;
}
 
Kann es sein, dass der Link (also dieser #horizontalNav ul ul li a) manchmal unter dem z-index des li-Tags verschwindet? Weise dem Link doch mal einen noch höheren z-index als 1000 zu, und versuch es dann nochmal...
 
Eigendlich eine gute Idee, die früheren IEs hatten so ihre Probleme mit Z-Index. Das hätte ein Grund sein können, warum der Text scheinbar "enthovert" und das li nicht. Habs gleich probiert, wars aber leider nicht.

Das Hauptproblem ist aber auch nicht, dass der Text weg ist, sondern dass die 3. Ebene noch da ist, obwohl ich mit der Maus nur auf der 1. bin.
 
Notfalls wirds so werden. Allerdings steht er in den Anforderungen für das Projekt drin, also werd ich alles versuchen, das irgendwie hinzukriegen.
 
Das ist nur die allerletzte Option. Das Menue nur für den IE7 neu zu bauen bezahlt leider niemand :). Das muss ich davon abhängig machen, ob ganz am Ende noch Projektzeit dafür übrig ist.

Außerdem interessiert mich auch theoretisch, wie es zu so einem Fehler kommt. Ich würde das gern verstehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben