✔ Falsche Anzeige von select und option mit css im IE

[gruebel-gruebel]

Habe da noch ein Problem,

Habe 2 Bilder angehängt.
Bild 1:
Wenn der Zeiger auf Suchen steht öffnet sich das Suchen Feld RICHTIG
Bild 2:
Wenn der Zeiger vom Suchen weggeht bleibt da der Rest vom Suchen stehen FALSCH
Dieses passiert nur im IE Browser im Firefox funktioniert es perfekt.
Könnte mir jemand sagen wo der Fehler liegt.
Die CSS Formatierung für dieses Feld:

.suchen{
        DISPLAY: block; background: #FF9900;
        margin-left: 1px; padding:3px;
        FONT-SIZE: 14px; FONT-FAMILY: arial, sans-serif; color:#009933;
        border-color:#FFFF99;
        border-width:2px;
        border-style:dotted;
}

Gruß
grübel grübel

 

[Maik]

Hi,

kannst du bitte auch den übrigen relevanten HTML- und CSS-Code posten, denn mit dem Auszug aus dem Stylesheet lässt sich derzeit nicht nachvollziehen, was den IE zu dem Fehlverhalten bewegt.

 

[gruebel-gruebel]

Hier ist der Anfang vom Menü

echo "<div class=\"menu\">";
echo "<ul class=\"menu\">

<li><a href=\"$_SERVER[PHP_SELF]\">Zurück</a></li>
<li><a href=\"../angebote-1.php\">ANGEBOTE</a></li>
<li><a href=\"$_SERVER[PHP_SELF]\">Tauschlisten</a></li>";


echo"<li><a class=\"hide\" href=\"$_SERVER[PHP_SELF]\">S U C H E N</a>";

echo"<!--[if lte IE 6]>
<li><a href=\"$_SERVER[PHP_SELF]\">S U C H E N
               <TABLE><TBODY><TR><TD>
     <![endif]-->
";

       echo"<ul>";
          echo"<li>";
            echo "<form action=\"../index1.php\" method=\"GET\" >";

echo"<table class=\"suchen\">
   <tr>
     <td width=\"33%\">Land:</td>
     <td width=\"*%\"colspan=\"2\">

         <select name=\"land\"size=\"4\">";

                 $arr_land = array('BRD','Berlin','DDR','Österreich','Frankreich','Schweiz');
                      foreach($arr_land as $str_land){
                 echo '<option value="'.$str_land.'"';
                      if (isset($_GET['land']) and $_GET['land'] == $str_land)
                 {
                         echo 'selected';
                 }
                         echo '>'.$str_land.'</option>';
                 }

    echo"</select>
     </td>
     </tr>
     <tr>
       <td width=\"33%\">MiNr:</td>
       <td width=\"25%\">
          <input type=\"Text\" name=\"minr\" size=\"3\" value=\"".$_GET["minr"]."\"></td>
       <td width=\"*%\" align=\"center\">
          <input type=\"submit\" name=\"suchen\" value=\"suchen\"></td>";
echo "</tr>
  </table>";
echo" </form>";

       $_SESSION["suchen"] = $_GET["suchen"];
               $suchen = $_SESSION["suchen"];

       $_SESSION['minr'] = $_GET["minr"];     // z.B. 442
       $_SESSION['land'] = $_GET['land'];     // z.B Berlin



echo"</li>";
echo"</ul>";

echo"<!--[if lte IE 6]></TD></TR></TBODY></TABLE></A> <![endif]-->";

echo"</li>";

Hier beginnt die CSS Datei für den IE Browser und das Menü

.menu UL LI A.hide {
        DISPLAY: none;
}
.menu UL LI A.hide:visited {
        DISPLAY: none
}
.menu UL LI A:hover UL LI A.hide {
        DISPLAY: none
}
.menu UL LI A.hide UL LI A.hide:visited {
        DISPLAY: none
}
.menu UL LI A:hover UL LI A:hover UL LI A.hide {
        DISPLAY: none
}
.menu UL LI A.hide UL LI A.hide UL LI A.hide:visited {
        DISPLAY: none
}
.menu UL LI A:hover UL LI A:hover UL LI A:hover UL LI A.hide {
        DISPLAY: none
}


.menu UL li A{
        DISPLAY: block; position:relative;
        left:3px; top:2px;
        border:2px;
        }

.menu UL LI A:hover {
        /*....1ste Ebene beim Überfahren */
        FONT-SIZE: 12px;
        BACKGROUND: #FF0099;
        COLOR: #ffffff;
        font-weight:bold;
        DISPLAY: block; position:relative;
        z-index:2;

}
.menu UL LI A:hover UL {
        /* Anzeigen der 2ten Ebene */
        DISPLAY: block;
        POSITION: absolute;
        left:160px;
        TEXT-ALIGN: center;
        width:150px; TOP: 5px;
        z-index:2;

}
.menu UL LI A:hover UL LI A {

        /* Beim überfahren der 1sten Ebene und anzeigen der 2ten Ebene */
        DISPLAY: block;
        POSITION: relative;
        FONT-SIZE: 13px;
        TEXT-ALIGN: center;
        BACKGROUND: #33FF33;
        width: 185px;
        margin-left: 0px;
        COLOR: #000000;
        z-index:3;

}

.menu UL LI A:hover UL LI A:hover {
        /*....2ste Ebene beim Überfahren */
        DISPLAY: block; POSITION: relative;
        FONT-SIZE: 12px;
        BACKGROUND: #ffff00;
        COLOR: #2f2f2f; font-weight:bold; width:185px;
}

Gruß
grübel grübel

 

[Maik]

Fehlt da nicht noch irgendwas, denn das Formular ist von Beginn an in allen Browsern sichtbar, und erscheint im IE doppelt, wenn man über den Link "Suchen" fährt?

Welches CSS-Dropdownmenü von Stu Nicholls hat denn da als Vorlage gedient?

 

[gruebel-gruebel]

welche Vorlage weis ich nicht mehr ist schon eine Weile her. Es war nur eine Vorlage für ein Menü was ich etwas umgearbeitet habe, dass es für mein Menü passt. Das Suchen teil habe ich selber reingebastelt.
Wenn der IE es doppelt anzeigt müsste der es nur einmal anzeigt so wie im menu mit
class=hide. Nur wo und wie ich weis es nicht.

 

[Maik]

Ich hab das jetzt mal mit dem Menü http://www.cssplay.co.uk/menus/flyoutt.html überprüft, im HTML-Code lediglich das Formular anstelle eines Submenüs eingesetzt, und dort tritt der von dir beschreibene Fehler ebenfalls auf.

Scheint also vermutlich ein Bug im IE6 zu sein, denn es bleibt nur das select-Element stehen, das Eingabefeld und der Submit-Button hingegen werden wieder ordnungsgemäß ausgeblendet.

 

[gruebel-gruebel]

gibt es für dieses Problem eine Lösung
oder soll ich mein SUCHEN im IE vergessen.

 

[Maik]

Vielleicht solltest du dich mit der Frage über die Comment-Funktion direkt an den Autor wenden, denn mir fällt momentan leider kein probates Gegenmittel ein.

 

[gruebel-gruebel]

danke für dein bemühen.
jetzt hab ich noch mal ne Frage.
Was ich auch nicht hin bekomme ist das z-index im IE im Firefox überlappt die 2te Ebene etwas die 1ste Ebene siehe Bild 1
Das Menü siehe oben für IE wird nur der erste Punkt im 2ten Menü richtig dargestellt
aber der 2te Punkt wird schon wieder vom der 1ten Ebene überlappt.
Den Fehler finde ich auch nicht
grübel grübel

 

[Maik]

Verwende hierfür doch direkt http://www.cssplay.co.uk/menus/flyout_4level.html oder http://www.cssplay.co.uk/menus/flyout5.html