✔ Falsche Anzeige von select und option mit css im IE

gruebel-gruebel · 3. Januar 2008

sorry,
ich habe mir das alles schon tausend mal angeschaut und finde den Fehler nicht deshalb habe ich gefragt.

Maik · 3. Januar 2008

Da dein gezeigter CSS-Code scheinbar nur ein Auszug aus dem Stylesheet ist, habe ich mal die folgenden fehlenden Selektoren aus dem Menü http://www.cssplay.co.uk/menus/flyout5.html übernommen und kann da im IE keine Probleme mit der Schichtpositionierung z-index feststellen:

Code:

.menu {
position:relative;
z-index:1000;
font-size:90%;
height:235px;
margin:25px 0 0 15px; /* this page only */
}

.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
position:relative;
border:1px solid #888;
border-width:1px 1px 0 1px;
background:#ff0000;
}


/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
position:absolute;
top:-1px;
left:100px;
background:#ffff00;
}

gruebel-gruebel · 3. Januar 2008

danke für die Mühe,

Ich habe zwei css Dateien eine für IE und eine für den Rest.
In der Datei für den Rest steht unter anderen dieses:

PHP:

.menu {
      POSITION: absolute;
      HEIGHT: 0px; WIDTH: 160px; top: 60px;
      FONT-FAMILY: arial, FONT-SIZE: 11px; sans-serif;
      font-variant:small-caps;list-style-type:none;
      border:2px;
      z-index:100;

}

.menu UL {
      PADDING-RIGHT: 0px;
      PADDING-LEFT: 0px;
      PADDING-BOTTOM: 0px;
      PADDING-TOP: 0px;
      MARGIN: 0px;
      LIST-STYLE-TYPE: none
}
.menu UL LI {
      FLOAT: left; MARGIN-RIGHT: 1px; POSITION: relative
}

und in der Datei für den IE steht dieser Teil nicht da ich die Datei für den IE erst ab

.menu ul li a:hover brauche.

Das css von oben ganz oben ist aus der Datei für den IE

Maik · 3. Januar 2008

Wie gesagt, mit den von mir hinzugefügten Selektoren gibt es im IE keine Probleme bei der Schichtpositionierung des Submenüs.

Entweder übernimmst du den CSS-Code aus einem der beiden empfohlenen Menüs, und passt ihn auf deine Seitenverhältnisse an (Dimensionen, Farben, etc.), oder du zeigst hier den vollständigen Quellcode deiner beiden Stylesheets, damit man sich das genauer anschauen kann.

gruebel-gruebel · 4. Januar 2008

Moin,

Hier der Inhalt aus der Datei für den Rest

PHP:

.menu {
      POSITION: absolute;
      HEIGHT: 0px; WIDTH: 160px; top: 60px;
      FONT-FAMILY: arial, FONT-SIZE: 11px; sans-serif;
      font-variant:small-caps;list-style-type:none;
      border:2px;
      z-index:100;

}

.menu UL {
      PADDING-RIGHT: 0px;
      PADDING-LEFT: 0px;
      PADDING-BOTTOM: 0px;
      PADDING-TOP: 0px;
      MARGIN: 0px;
      LIST-STYLE-TYPE: none
}
.menu UL LI {
      FLOAT: left; MARGIN-RIGHT: 1px; POSITION: relative
}

.menu UL LI A {
      DISPLAY: block;
      BACKGROUND: #efefef;
      border: 2px dotted #FFD700;
      FONT-SIZE: 11px; font-variant:small-caps; COLOR: #6F6F6F; LINE-HEIGHT: 21px;
      TEXT-DECORATION: none;
      WIDTH: 160px;
      HEIGHT: 20px;
      TEXT-ALIGN: center;
      list-style-type:none;
      margin-top:-2px;
      z-index:10;
}
.menu UL LI A:visited {
      DISPLAY: block;
      border: 2px dotted #FFD700;
      font-variant:small-caps; TEXT-ALIGN: center;
      FONT-SIZE: 11px; TEXT-DECORATION: none  list-style-type:none;
      COLOR: #6f6f6f; WIDTH: 160px;  LINE-HEIGHT: 21px; HEIGHT: 20px;
}

.menu UL LI:hover A {
         /*..... auf der 1sten Ebene ....*/
      DISPLAY: block;
      FONT-SIZE: 14px; COLOR: #FF007F; font-weight:bold;
      BACKGROUND: #DFDFDF;
      border: 2px dotted #FFD700;
      -moz-opacity:0.9;
}

.menu UL LI UL {
        /*...2te Ebene nicht zeigen...*/
        DISPLAY: none
}

.menu UL LI:hover UL {
      /*....zeigt die 2te Ebene ....*/
        DISPLAY: block; BACKGROUND: #CCFFFF;
        FONT-SIZE: 11px; z-index: 2;
        LEFT: 150px; POSITION: absolute; width:165px; TOP: 5px;

}

.menu UL LI:hover UL LI A {
        /*..... 2te Ebene zeigen ....*/
        DISPLAY: block; FONT-SIZE: 13px; font-variant:small-caps;
        BACKGROUND: red;  LEFT: 10px; WIDTH: 165px; COLOR: #fff
}
.menu UL LI:hover UL LI A:hover {
         /*..... 2te Ebene beim überfahren.....*/
        DISPLAY: block; FONT-SIZE: 14px;
        BACKGROUND: #CCFFCC; width:165px; COLOR: #000000; font-weight:bold;
}
.menu UL LI:hover UL LI:hover UL {
         /*.... zeigt die 3te Ebene1....*/
        DISPLAY: block;   FONT-SIZE: 11px; z-index:3; BACKGROUND: #CCCCFF;
        LEFT: 150px; POSITION: absolute; width:165px; TOP: 5px
}
.menu UL LI:hover UL LI:hover UL LI A {
         /*..... zeigt die 3te Ebene2....*/
        DISPLAY: block; FONT-SIZE: 12px;
        BACKGROUND: #CCCCFF; COLOR: #A00020;
}

.menu UL LI:hover UL LI A.hide {
        /* zeigt die 2te Ebene */
        BACKGROUND: #ff8; COLOR: #000
}
.menu UL LI:hover UL LI:hover A.hide {
        /*... auf die 2te Ebene fahren ...*/
        BACKGROUND: #ff8;
        WIDTH: 165px
}
.menu UL LI:hover UL LI UL {
        /*.... keine Anzeige der 3ten Ebene ....*/
        DISPLAY: none
}


.menu UL LI:hover UL LI:hover UL LI A:hover  {
         /*..... über die 3te Ebene fahren.....*/
        DISPLAY: block; FONT-SIZE: 13px;
        BACKGROUND: #EFEFEF; COLOR: #6f6f6f
}

.menu UL LI:hover UL LI:hover UL LI UL {
        /*.... keine Anzeige der 4ten Ebene ....*/
        DISPLAY: none
}

Hier der Inhalt aus der Datei für den IE

PHP:

.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;
}
.menu UL LI A:hover UL {
        /* Anzeigen der 2ten Ebene */
        DISPLAY: block;
        POSITION: absolute;
        left:150px; width:150px; TOP: 5px;
        TEXT-ALIGN: center;
        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;
}

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

.menu UL LI A:hover UL LI A:hover UL {
        /*..... 3te Ebene anzeigen....*/
        DISPLAY: block;
        FONT-SIZE: 11px;
        VISIBILITY: visible;
        COLOR: #00E090;
        POSITION:absolute;
        z-index:3;
}

.menu UL LI A:hover UL LI A:hover UL LI A {
        /*..... 3te Ebene anzeigen (öffnen)....*/
        DISPLAY: block; FONT-SIZE: 11px; left:24px;
        BACKGROUND: #33FFCC; WIDTH: 180px; COLOR: #000
}

.menu UL LI A:hover UL LI A:hover UL LI A:hover {
        /* Wenn auf der 3ten Ebene die Maus ist */
        DISPLAY: block; FONT-SIZE: 13px;
        BACKGROUND: #FF0033; COLOR: #fff;
        }

Gruß
grübel grübel

Maik · 4. Januar 2008

Hi,

bevor wir jetzt die Stecknadel im Heuhaufen suchen, empfehle ich dir, einfach den Original-CSS-Code von einem der beiden Menüs zu verwenden, denn dein separates Stylesheet für den IE kommt mir dann doch etwas spanisch vor.

gruebel-gruebel · 4. Januar 2008

ich bin eine Nervensäge,

habe jetzt das neue css für den IE in die Datei IE eingefügt verändert habe ich nicht.
Da die Formatierung nicht wichtig ist Hauptsache es funktioniert.
Nur jetzt geht das Menü nicht mehr auf.

PHP:

.menu {
        FONT-SIZE: 90%; MARGIN: 25px 0px 50px 15px; HEIGHT: 150px
}
.menu UL {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 500; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: relative
}
.menu LI {
        BACKGROUND: url(shade.gif) #d4d8bd; FLOAT: left; HEIGHT: 26px
}

.menu TABLE {
        FONT-SIZE: 1em; Z-INDEX: 100; LEFT: 0px; POSITION: absolute; TOP: 0px; BORDER-COLLAPSE: collapse
}
.menu A {
        BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 0px solid; DISPLAY: block; BORDER-LEFT: #fff 1px solid; WIDTH: 149px; COLOR: #000; TEXT-INDENT: 5px; LINE-HEIGHT: 25px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 25px; TEXT-DECORATION: none
}
.menu A:visited {
        BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 0px solid; DISPLAY: block; BORDER-LEFT: #fff 1px solid; WIDTH: 149px; COLOR: #000; TEXT-INDENT: 5px; LINE-HEIGHT: 25px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 25px; TEXT-DECORATION: none
}
 HTML .menu A {
        WIDTH: 149px
}
 HTML .menu A:visited {
        WIDTH: 149px
}
 HTML .menu A:hover {
        BACKGROUND: #aa7; COLOR: #efa; POSITION: relative
}
.menu LI:hover {
        POSITION: relative
}
.menu A:active {
        BACKGROUND: #aa7; COLOR: #efa
}
.menu A:unknown {
        BACKGROUND: #aa7; COLOR: #efa
}

.menu LI UL {
        PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: url(transparent.gif); LEFT: 100px; VISIBILITY: hidden; PADDING-BOTTOM: 30px; PADDING-TOP: 30px; POSITION: absolute; TOP: -30px
}

.menu UL A:hover UL UL {
        VISIBILITY: hidden
}
.menu UL A:hover UL A:hover UL UL {
        VISIBILITY: hidden
}
.menu UL A:hover UL A:hover UL A:hover UL UL {
        VISIBILITY: hidden
}
.menu UL A:hover UL {
        VISIBILITY: visible
}
.menu UL A:hover UL A:hover UL {
        VISIBILITY: visible
}
.menu UL A:hover UL A:hover UL A:hover UL {
        VISIBILITY: visible
}
.menu UL A:hover UL A:hover UL A:hover UL A:hover UL {
        VISIBILITY: visible
}

Maik · 4. Januar 2008

Du musst schon den vollständigen Quellcode übernehmen:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_4level.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menu {
height:150px;
font-size:90%;
margin:25px 0 50px 15px; /* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background:#d4d8bd url(shade.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background:#d4d8bd url(sub.gif) no-repeat right center;}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color:#efa; background:#aa7; position:relative;}

.menu li:hover {position:relative;}

/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color:#efa; background:#aa7;}

/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#efa; background:#aa7;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}

/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}


/* for IE5.5 and IE6 you need to style each level hover */

/* keep the third level+ hidden when you hover on first level link */
.menu ul a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
.menu ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
.menu ul a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}

/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
/* make the third level visible when you hover over second level link */
.menu ul a:hover ul a:hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level link */
.menu ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
-->
</style>

</head>
<body>

<?php
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 class=\"sub\"><a href=\"$_SERVER[PHP_SELF]\">S U C H E N<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><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></table></a><![endif]-->";

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

</body>
</html>

Nun wird bei mir auch das select-Element im IE beim Verlassen des Menüpunktes "Suchen" wieder ausgeblendet.

gruebel-gruebel · 4. Januar 2008

vielen Dank für dein Bemühen,

bei mir klappt es nicht.
Habe das css in IE kopiert GEHT nicht.
Habe das css in den Kopf der Datei kopiert GEHT nicht.
Habe 2x Suchen im Menü stehen und auf geht es auch nicht.
Ich lasse es halt so wie es ist.
gruß
grübel grübel

gruebel-gruebel · 4. Januar 2008

habe trotz allen weiter probiert,

es funktioniert zwar so wie du es zuletzt geschrieben hast.

Wenn ich ich das css in die IE Datei einfüge zeigt er ein geschlossenes Menü an Mist siehe Bild und Suchen doppelt.

✔ Falsche Anzeige von select und option mit css im IE

gruebel-gruebel

Erfahrenes Mitglied

Maik

gruebel-gruebel

Erfahrenes Mitglied

Maik

gruebel-gruebel

Erfahrenes Mitglied

Maik

gruebel-gruebel

Erfahrenes Mitglied

Maik

gruebel-gruebel

Erfahrenes Mitglied

gruebel-gruebel

Erfahrenes Mitglied

Neue Beiträge