Klappmenü im IE verschoben

T

teamfake

Mitglied
Hallo zusammen,
ich stehe gerade (seit 2 Tagen :P ) vor einem Problem. Ich habe mir ein Klappmenü gebastelt, aber beim Internet Explorer, wie schon so oft, ist das Menü um eins nach rechts verschoben.

Zum besseren Verständnis kommen nun noch Bilder aus dem FF und IE. Beides mal wurde über den gleichen Button gefahren.

http://www.abload.de/image.php?img=ffesub.jpg <-- Firefox

http://www.abload.de/image.php?img=ieeq4a.jpg <-- Internet Explorer

Noch als kleinen Anhang der Code :P :

CSS:
Code: 
    <style type="text/css">

    body { behavior: url("csshover.htc"); }   

    td#menu ul ul,
    td#menu ul li:hover ul ul,
    td#menu ul ul li:hover ul ul
      {display: none;}

    td#menu ul li:hover ul,
    td#menu ul ul li:hover ul,
    td#menu ul ul ul li:hover ul
      {display: block; }

    #menu li {position: relative; font-size:0;margin: 0;
padding: 0; }

    #menu ul ul { position: absolute; z-index: 500; }

    #menu ul {
        list-style-type:none;margin: 0 0 0 .5em;padding: 0 0 0 .5em; 
    }

    </style>

HTML Code von Menü:
HTML: 
          <td id="menu" colspan = "2" width= "750" height = "28" border = "0" background = "navi_ganz.jpg" style = "background-repeat: no-repeat;" align="center">
              <div style="float: left;">
              <ul>
                                  
                  <li><a><img src="button_home.jpg"></a>
                      
                      <ul>
                          
                          <li>
                              <a> <img src="button_normal.jpg"></a>
                          </li>
                          <li>
                              <a><img src="button_normal.jpg"></a>
                          </li>
                          <li>
                              <a><img src="button_normal.jpg"></a>
                          </li>
                          
                      </ul>

                      
                  </li>
                  
              </ul></div>
                 <div style="float: left;"> <ul>

                  <li><a><img src="button_home.jpg"></a>

                      <ul>

                          <li>
                              <a> <img src="button_normal.jpg"></a>
                          </li>
                          <li>
                              <a><img src="button_normal.jpg"></a>
                          </li>
                          <li>
                              <a><img src="button_normal.jpg"></a>
                          </li>

                      </ul>


                  </li>

              </ul></div>

                               <div style="float: left;"> <ul>

                  <li><a><img src="button_home.jpg"></a>

                      <ul>

                          <li>
                              <a> <img src="button_normal.jpg"></a>
                          </li>
                          <li>
                              <a><img src="button_normal.jpg"></a>
                          </li>
                          <li>
                              <a><img src="button_normal.jpg"></a>
                          </li>

                      </ul>


                  </li>

              </ul></div>

                               <div style="float: left;"> <ul>

                  <li><a><img src="button_home.jpg"></a>

                      <ul>

                          <li>
                              <a> <img src="button_normal.jpg"></a>
                          </li>
                          <li>
                              <a><img src="button_normal.jpg"></a>
                          </li>
                          <li>
                              <a><img src="button_normal.jpg"></a>
                          </li>

                      </ul>


                  </li>

              </ul></div>

                               <div style="float: left;"> <ul>

                  <li><a><img src="button_home.jpg"></a>

                      <ul>

                          <li>
                              <a> <img src="button_normal.jpg"></a>
                          </li>
                          <li>
                              <a><img src="button_normal.jpg"></a>
                          </li>
                          <li>
                              <a><img src="button_normal.jpg"></a>
                          </li>

                      </ul>


                  </li>

              </ul></div>
              
            
          </td>

Vielen Dank schonmal!

Grüße
 
Hi.
teamfake hat gesagt.:
beim Internet Explorer, wie schon so oft, ist das Menü um eins nach rechts verschoben.
Zum Vergrößern anklicken....

Da stellen sich mir, wie schon so oft, mal wieder die Fragen, von welcher IE-Version hier wohl die Rede ist, und in welchem Darstellungsmodus sich alle Browser befinden ("Standards Mode" vs. "Quirks Mode"), wenn sie das (X)HTML-Dokument geladen haben, denn deine allgemein gehaltene Aussage trifft hier nicht mehr auf den aktuellen IE8 zu.

Deinem genutzten "csshover.htc"-Hack zufolge vielleicht vom IE6, denn seine Nachfolger IE7 und IE8 haben den überhaupt nicht nötig, da sie der CSS-Spezifikation folgen, und wie die übrigen Browser den Selektor li:hover zum Einblenden des versteckten Untermenüs interpretieren.

Dabei bitte ich hier im CSS-Board in meinem zweiten "Sticky-Thread" von oben darum:


Lösung: entweder die Startpositionen top und left des absolut positionierten Untermenüs definieren, oder die absolute Positionierung in eine relative umwandeln.

mfg Maik
 
Hallo,
vielen Dank für die schnelle Antwort.

Das mit der Angabe des IE tut mir leid, ich hatte normalerweise nur mit php Problemen zu tun :-( Naja aber leiber zu spät als nie :) : Ich benutze Internet Explorer 8.

Zu deinem Lösungsvorschlag: Das position: relative; funktioniert nicht, weil der Text dann nach unten rutscht. Deine zweite Möglichkeit habe ich auch ausprobiert, top und left zu definieren und es klappt :) Jedoch habe ich nun das Problem, dass der Button beim drüberfahren mit unsichtbar wird :( Hättest du/ihr vielleicht dabei auch noch Abhilfe?

Der CSS Code sieht nun so aus:
Code: 
        <style type="text/css">

            body { behavior: url("csshover.htc"); }

            td#menu ul ul,
            td#menu ul li:hover ul ul,
            td#menu ul ul li:hover ul ul
            { display: none;}

            td#menu ul li:hover ul,
            td#menu ul ul li:hover ul,
            td#menu ul ul ul li:hover ul
            { display: block; }

            #menu li {
                position: relative; font-size:0;margin: 0;padding: 0;
            }

            #menu ul ul {
                position: absolute; z-index: 500; top:0px;left:0px; 
            }

            #menu ul {
                list-style-type:none;margin: 0 0 0 .5em;padding: 0 0 0 .5em;
            }

        </style>

Vielen Dank!

Grüße
 
Dann übergib mal deine HTML-Seite mit dem richtigen Doctype den Browsern im standardkonformen Modus, und IE8 interpretiert dein eingangs gezeigtes CSS wie gewünscht.


In top müsste der Wert der Bildhöhe (button_home.jpg) eingetragen werden, damit das Untermenü darunter erscheint, und nicht das Bild überdeckt.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück