IE: Navigation verschiebt sich , wenn ich mit der Maus über eine andere Navi gehe

[nadjak]

Hallo,

ich habe eine Seite auf der oben von links nach rechts eine Navigation (menue) ist.
Auf den Utnerseiten gibt es teilweise links nochmal eine Navi (menue2). Wenn ich jetzt im IE mit der Maus über die "Unternavigation" (menue2) geh, verschiebt sich die obere Navigation nach links. BEi den anderen Browsern funktioniert es.
Kann es sein, daß irgendetwas in menue2 was überschreibt?

hier der Code der beiden Menüs:

/*Hauptmenüpunkte*/
ul.hauptmenue{
   padding-left: 20px;
}
li.menue{
  font-family: "Droid Serif", serif;
  font-size: 12pt;
  float: left;
  width: 70px;
  margin:20px;
  text-align: left;
  list-style-type:disc;
  color:  #999999;
}
li.menue a {
  text-decoration:none;
 /* font-weight: bold;  */
  display: block;
  width: 100%;
  color: #999999;
  font-size: 12px;
}
li.menue  a:hover{   
  list-style-type:disc;
  color:#b2cc4b;
}

li.menue:hover{   
  list-style-type:disc;
  color:#b2cc4b;
}

/*Unternavigation*/ 
ul, li.menue2 { margin: 0; padding: 0; list-style-type: none;}
li.menue2{
   font-family: "Droid Serif", serif;
   color: #666666;
   line-height: 30px;
   text-align: left; 
   
}
li.menue2 a {
   padding-left: 15px;
  text-decoration:none;
  color: #666666;
  font-size: 14px;
}
li.menue2  a:hover{  
  font-weight: bold; 
   background: url(images/halbkreis.gif) 0px 0px no-repeat;
}

.menue2aktiv{
   background: url(images/halbkreis.gif) 0px 3px no-repeat;
   font-family: "Droid Serif", serif;
   color: #666666;
   font-size: 12pt;
   line-height: 30px;
   text-align: left; 
   font-weight: bold;
   padding-left: 15px;
}

und meine HTML-Seite:

<ul class="hauptmenue">
             <li class="menue"><a href="index.html">Home</a></li>
             <li class="aktivlink"><a href="#">Massagen</a></li>
             <li class="menue"><a href="reiki.html">Reiki</a></li>
             <li class="menue"><a href="fusspflege.html">Fu&szlig;pflege</a></li>
             <li class="menue"><a href="uebermich.html">&Uuml;ber mich</a></li>
             <li class="menue"><a href="kontakt.html">Kontakt</a></li>
             <li class="menue"><a href="impressum.html">Impressum</a></li>
          </ul>
          
          <div class="unternavi">
             <ul>
                <li class="menue2aktiv">Mobile Massage</li>
                <li class="menue2"><a href="aromaoelmassage.html">Aroma&ouml;lmassagen</a></li>
                <li class="menue2"><a href="fussreflexzonen.html">Fu&szlig;reflexzonenmassage</a></li>
                <li class="menue2"><a href="kleinemassagen.html">Kleine Massagen</a></li>
                <li class="menue2"><a href="bueromassagen.html">B&uuml;romassagen</a></li>
             </ul>
             <img src="images/mobile-massage.jpg" class="bild" alt="Bild Mobile Massage" title="Mobile massage" border="0" height="227" width="227">
          </div> <!-- ende unternavi-->

Vielleicht kann mir jemand von euch helfen.
Vielen Dank Nadja

 

[ans316]

AW: IE: Navigation verschiebt sich , wenn ich mit der Maus über eine andere Navi gehe

hallo,
das wird ein typisches box problem vom ie sein und du benötigst ein ie-hack

 

[nadjak]

AW: IE: Navigation verschiebt sich , wenn ich mit der Maus über eine andere Navi gehe

Vielen Dank für die Antwort. Ich mach mich mal schlau
lg Nadja

 

[Myhar]

AW: IE: Navigation verschiebt sich , wenn ich mit der Maus über eine andere Navi gehe

Eine sehr gute Antwort, die dem Threadersteller wohl genau gar nicht weiterhilft. Auch, weil es ja nicht nur einen IE Hack gibt.
Um mal zu versuchen, wenigstens etwas zu helfen: In welchen IE Versionen tritt der Fehler denn auf? Auch in der aktuellsten Version 9?
In einem Punkt hat ans316 wohl Recht, es hat wohl etwas mit dem Box Modell zu tun. Mutmaßlich damit, dass du deine lis zwar floatest, jedoch kein clear verwendest. Versuche, dem ul.hauptmenue ein height:100% zu geben, das kann auch helfen.

PS:
1. Wieso gibst du jedem LI eine eigene Klasse? Du kannst diese einfach mit .hauptmenue li bzw. .unternavi li ansprechen. Dann sparst du dir einiges an redundantem HTML Code.

2. Bei einem Alternativbild muss man im Alternativtext in der Regel nicht angeben, dass es sich um ein Bild handelt. Ausnahmen wären unter Umständen, wenn es sich um ein Bild eines Malers handelt.

L. G.

 

[nadjak]

AW: IE: Navigation verschiebt sich , wenn ich mit der Maus über eine andere Navi gehe

Vielen Dank Myhar, das ul height:100% hat geholfen. Aber kannst du mir erklären warum?
Und dann hätte ich noch eine Frage: ich hab doch bei ul ein clearfix angebeben. REicht das nicht? Muß das nach jedem li? Oder wie hattest du das gemeint?

Das mit den Bildtexten stimmt, das hat der Editor automatisch so reingesetzt, muß ich noch ändern.

Vielen Dank für die Hilfe
lg Nadja

 

[Myhar]

AW: IE: Navigation verschiebt sich , wenn ich mit der Maus über eine andere Navi gehe

Kurz gesagt: Das hat mit dem floating zu tun.
Am Besten sieht man es, wenn man sich die betreffenden Elemente mit der IE Developer Toolbar ansieht (in neuen IEs einfach auf F12 drücken)
Angenommen es gibt folgendes Markup:

<ul>
<li style="float:left">blabla</li>
<li style="float:left">blabla</li> [etc.]
</ul>

Dann hat die Liste keine Höhe. Man könnte danach ein Element mit clear="left" einfügen, aber es reicht in den meisten Fällen aus, dem Element ein height 100% zu geben. Dann wird der gewünschte Effekt ohne zusätzliches Markup erreicht.

Wo hast du bei deinem ul ein clearfix angegeben? Da weiß ich leider nicht, auf welchen Teil meiner Antwort du dich beziehst, bzw. was du mir damit genau sagen willst.

L. G.

 

[nadjak]

AW: IE: Navigation verschiebt sich , wenn ich mit der Maus über eine andere Navi gehe

Erstmal vielen Dank für deine Erklärung.
Entschuldige bitte, das mit der clearfix-Klasse ist eine Ebene drüber gewesen.
lg Nadja