Antworten auf deine Fragen:
Neues Thema erstellen

CSS Listennavigation mit Hover im IE 7

U

unicorn75

Noch nicht viel geschrieben

Hallo,

ich habe mir eine Navigation in Form einer unsortierten Liste mit einem Submenü erstellt. Die Unterpunkte sind standartmäßig ausgeblendet und sollen bei Mouseover der Hauptpunkte eingeblendet werden.
Im FF klappt alles prima, die entsprechenden Hacks für IE unter Version 8 sind eingebaut aber es funktioniert bei mir mit dem IE 7 nicht.

Ich habe alles in einer Datei, ist rein erstmal zum experimentieren (bitte an den vielen Kommentierungen nicht stören, hilft mir mich zurecht zufinden).

Code: 
                                 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>testseite</title>
    <style type="text/css">

 /* ################ Grunddesign ######################### */


 /* gestaltet kompletten Body Bereich */
        body
        {
            position:absolute;
            background:#000000; /* schwarz*/
            behavior: url("Stylesheet/csshover3-source.htc");/* hier eher unnötig?*/
        }
        html, body
        {
            top:0; left:0; right:0;
            min-height:100%;
            margin:0;
            padding:0;
            width:100%;
            font: 85% arial, hevetica, sans-serif; /* Textformat */
            color: blue;  /* Textfarbe */
            background-image: url(Stylesheet/1.gif); /* hintergrundbild */
            scrollbar-3dlight-color:#C69437;   /* Pfeilschatten */
            scrollbar-arrow-color:#C69437;  /* Pfleilspitze */
            scrollbar-base-color:#C69437;
            scrollbar-darkshadow-color:##A87D2F; /* Balkenrand unten, rechts */
            scrollbar-face-color:#E8D38E;  /* Balkenfarbe */
            scrollbar-highlight-color:#E8D38E;  /* Balkenuntergrund */
            scrollbar-shadow-color:#C69437;  /*  */   -->
            overflow:hidden;/* keine scrollbalken */
        }

 h2 {   /* gestaltet Überschrift 2 */
       font-family:Arial,Roman,Impact,Bookman Old Style,Arial,Times New Roman ;
       font-size: large;
       text-align: center;
       color: #D6B03F;
   }
   h3 {   /* gestaltet Überschrift 3 */
        font-family:Arial,Roman,Impact,Bookman Old Style,Arial,Times New Roman;
        font-size: medium;
        text-align: center;
        color: #000000;
   }
   table { /* gestaltet Tabellen */
        font-family: Verdana;
        font-size: small;
        text-align: left;
     }

/* ################ Kopfbereich ######################### */


        #header_container
        {
            position:fixed;
            top:0; left:0; right:0;
            text-align:center;
            margin:0;
            height:3em;
            z-index:3;
        }

        #header
        {
            position:absolute;
            top:0; left:0; right:0; bottom:0;
            height:100%;
            background:#efefef;
            z-index:3;
            margin:0;
            padding:0.2em;
        }

/* ################ Menü ######################### */

        #Navigation
        {
            position:fixed;
            top:5em;
            left:.5em;
            width:40mm;
            padding:.5em;
            background-color: #FBF2B7;   /* Hintergrundfarbe der Navi */
        }
             /* Einstellungen für die unsortierte Liste */
            ul#Navigation
            {
                width:35mm; /*     Breite  */
                margin: .3em; padding: .7em;   /* Abstand der Navi links und rechts*/
                border: 0px;       /* Randstärke der Navi */
                background-color: #FBF2B7;   /* Hintergrundfarbe der Navi */
                z-index:1;
            }
            ul#Navigation li
            {
                position:relative;
                list-style: none;   /* Liste ohne Punkt */
                margin: 0.5em; padding: 0.05em;      /* Abstand der Listeneinträge */
            }
            ul#Navigation li ul
            {
                position: absolute;
                top: 5px;
                left: 5em;
                display:none;
                z-index:2;
            }


/*--nur für IE 7 erkennbar--*/
        * + html #Navigation ul li
        {
            float: left;
            width: 100%;

        }

 /*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
        * html #Navigation ul li
        {
            float: left;
            width: 100%;
        }

/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/

        *html body
        {
             behavior: url("Stylesheet/csshover3-source.htc");
             font-size: 100%;
        }
            *html #Navigation ul li a
            {
                    height: 1%;
            }


            ul#Navigation li:hover ul, li:active, li:focus
             {
                 display:block;
             }

            ul#Navigation li ul li
            {
                margin: 0.1em 0;            /* Abstand der Unterpunkte */
            }

            /* Korrekturen fuer IE 5.x */
            * html ul#Navigation
            {
                width: 40mm;
                w\idth: 40mm;
                padding-left: 0;
                padd\ing-left: 0.3em;
            }
            * html ul#Navigation li ul li
            {
                margin-left: 0.1em;
                ma\rgin-left: 0;
            }

             /*Einstellungen der Hyperlinks - Button*/
            ul#Navigation a, ul#Navigation span
            {
                display:block; /* der gesamte Bereich als Hyperlink */
                width: 100%;  /* gesamte Breite nutzen */
                padding: 0.1em; /*  Größe des Bereichs außerhalb der Schrift */
                text-decoration: none; /*     keine Linkunterstreichung*/
                font: 1em;
                font-weight:bold;  /*   fette Schrift */
                border: 1px solid #A28520; /*   Umrandung */
                border-left-color: #D9B742; border-top-color: #D9B742; /* links u. oben Randfarbe */
                color: black; background-color: #FDFCCE;  /*  Schrift- und Hintergrundfarbe */
            }

            /*Einstellungen der Hyperlinks bei Mouseover*/
             ul#Navigation a:hover, ul#Navigation span
              {
                    border-color: white;   /* Linkfarbe Mouseover */
                    border-left-color: #F8CF7C; border-top-color: #F8CF7C;
                     /* Randfarbe links und oben Mouseover */
                    color: #D69714; background-color: #FDFCCE;
                    /* Schrift- und Hintergrundfarbe Mouseover */
              }


/* ################ Inhaltsbereich ######################### */


        #content
        {
            margin:0;
            padding-top:4.85em;
            padding-left:15em;
            padding-bottom:3em;
            z-index:2;
            overflow:auto  /* scrollbalken wenn benötigt */
        }

/* ################ Fußdesign ######################### */

        #footer_container
        {
            position:fixed;
            bottom:0; left:0; right:0;
            text-align:center;
            margin:0;
            height:2em;
            z-index:3;
        }
        #footer
        {
            position:absolute;
            top:0; left:0; right:0; bottom:0;
            background:#efefef;
            z-index:3;
        }


/*  ################ Nur für den MS Internet Explorer ######################### */

        * html, * html body
        {
            overflow:hidden;
            bottom:0;
            height:100%;
        }
        * html #header_container, * html #footer_container
        {
            position:absolute;
            width:100%;
            padding-right:16px;
        }
        * html #Navigation
        {
            position:absolute;
        }
        * html #header,* html #footer
        {
            height:100%;
            position:static;
        }
        * html #content
        {
            position:absolute;
            top:0; bottom:0; left:0; right:0;
            height:100%;
            width:100%;
            overflow:auto;
            margin:0;
        }
         * html #Navigation
        {
            margin:0;
            width:10.5em;
            /* Der IE soll das Element breiter darstellen,
            da margin und padding hier von der Breite abgezogen wird! */
        }

  /* #################### zusätzliche Designs für Überschriften und Links ############### */



  h2 {   /* gestaltet Überschrift 2 */
       font-family:Arial,Roman,Impact,Bookman Old Style,Arial,Times New Roman ;
       font-size: large;
       text-align: center;
       color: #D6B03F;
   }
   h3 {   /* gestaltet Überschrift 3 */
        font-family:Arial,Roman,Impact,Bookman Old Style,Arial,Times New Roman;
        font-size: medium;
        text-align: center;
        color: #000000;
   }
   table { /* gestaltet Tabellen */
        font-family: Verdana;
        font-size: small;
        text-align: left;
     }

     a {  /* gestaltet Hyperlinks */
      font-size: medium;
      font-weight: bold;
      color: #ECAF33;
      hover: #ECAF33;
      text-decoration:none;
     }
     a:link {/*Link geklickt*/
      font-size: medium;
      color: #ECAF33;
      hover: #ECAF33;
      text-decoration:none;
     }
     a:visited {/*Link besucht*/
      font-size: medium;
      color: #ECAF33;
      hover: #ECAF33;
      text-decoration:none;
     }
     a:hover{/*Link Mouseover*/
             font-size: medium;
             color: #F0C264;
             background: #FFFFCC;
             text-decoration:none;
     }


    </style>
</head>
<body>
<!-- ######## Inhalte der einzelnen Bereiche #########-->

<!-- Kopfbereich -->
    <div id="header_container">
        <h1 id="header">Kopfzeile</h1>

    </div>

<!-- eigentliches Navi in Form einer unsortierten Liste mit der ID "Navigation" -->



<ul id="Navigation">
    <li><a href="aktu.html" target="mitte">Aktuelles</a></li><br>
    <li><a href="index.html" target="mitte">Home</a>
        <ul>
            <li><a href="haus.html" target="mitte">unser Haus</a></li>
            <li><a href="geschichte.html" target="mitte">Geschichte</a></li>
            <li><a href="futter.html" target="mitte">Futterstellen</a></li>
            <li><a href="chronik.html" target="mitte">Kurzchronik</a></li>
        </ul>
    </li>
    <li><a href="vermitt.html" target="mitte">Vermittlung</a>
        <ul>
            <li><a href="neuzu.html" target="mitte">Neuzugänge</a></li>
            <li><a href="sorgen.html" target="mitte">Sorgenkinder</a></li>
            <li><a href="tipps.html" target="mitte">Tipps</a></li>
            <li><a href="suche.html" target="mitte">Vermisst</a></li>
        </ul>
    </li>
    <li><a href="uns.html" target="mitte">um uns gehts</a>
        <ul>
           <li><a href="schick.html" target="mitte">Schicksale</a></li>
           <li><a href="foto.html" target="mitte">Fotoalbum</a></li>
           <li><a href="gedenken.html" target="mitte">in Gedenken</a></li>
        </ul>
    </li>
    <li><a href="verein.html" target="mitte">Verein</a>
        <ul>
            <li><a href="vorstand.html" target="mitte">Vorstand</a></li>
            <li><a href="mitglied.html" target="mitte">Mitgliedschaft</a></li>
            <li><a href="satzung.html" target="mitte">Satzung</a></li>
            <li><a href="beitraege.html" target="mitte">Beiträge</a></li>
        </ul>
    </li>
    <li><a href="sponsoring.html" target="mitte">Sponsoring</a>
        <ul>
            <li><a href="aktionen.html" target="mitte">Aktionen</a></li>
        </ul>
    </li>
    <li><a href="kontakt.html" target="mitte">Kontakt</a>
        <ul>
            <li><a href="lageplan.html" target="mitte">Lageplan</a></li>
            <li><a href="impressum.html" target="mitte">Impressum</a></li>
        </ul>
    </li>
</ul>



<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->



     <!-- Inhalt -->

    <div id="content">

        <p>erster text</p>

        <a href="futter.html">futter.html</a>

        <p>zweiter text</p>

    </div>

    <div id="footer_container">
        <div id="footer">
            <b>Fußzeile</b>

        </div>
    </div>

</body>
</html>
 

W

Wlad1989

Guest

AW: CSS Listennavigation mit Hover im IE 7

Hey,
mit dem IE hab ich auch hin und wieder mal meine Probleme, bin auch wirklich kein fan von dem ding.
Du könntest das Problem beheben indem du die Menüfunktionen über Javascript machst ( Man könnte es ganz auf die schnelle programmieren ) .
Du setz per CSS für die Untermenüs "display" auf "none" und dann schreibst du eine Funktion mit JS die über den "mouseover" Attribut des Listenpunktes ausgeführt wird und die "display" Eigenschaft auf "block" setzt.
Du darfst nicht vergessen einen Befehl dazu zu programmieren, der die Untermenüs dann wieder ausblendet.

Das wär ne Lösung die mir so auf die schnelle einfällt. Es müsste dann in allen Browsern laufen.
Einzigster Nachteil ist das sobald js deaktiviert ist, das Menü nicht mehr richtig funktioniert.

Hoffentlich hilft dir das ;-)

MfG Wlad
 
U

unicorn75

Noch nicht viel geschrieben

AW: CSS Listennavigation mit Hover im IE 7

Danke für die Antwort, jepp wenn ihr/ich keine andere Lösung finde werde ich so herangehen.

Ich habe meine Navi aus verschiedenen Tutorials im I-Net zusammengestellt, darin wird immer auf die Star Hacks zurückgegriffen. Wenn ich deren reinen Code nehme funktionierte es ja auch, daher vermute ich bei mir einen Fehler aber finde ich ihn einfach nicht.

Code: 
/*--nur für IE 7 erkennbar--*/
        * + html #Navigation ul li
        {
            float: left;
            width: 100%;

        }

 /*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
        * html #Navigation ul li
        {
            float: left;
            width: 100%;
        }

/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/

        *html body
        {
             behavior: url("Stylesheet/csshover3-source.htc");
             font-size: 100%;
        }
            *html #Navigation ul li a
            {
                    height: 1%;
            }

Dieser Bereich ist unverändert und bietet bei den Tutorials immer die Lösung, bei mir eben nicht. Ich habe versucht immer Teile auszukommentieren aber bisher erfolglos, ihr Profies seid meine letzte Rettung.
 
U

unicorn75

Noch nicht viel geschrieben

AW: CSS Listennavigation mit Hover im IE 7

Hmm, sieht ja gar nicht gut aus. Bitte sagt, wenn ihr nicht weiterhelfen könnt und ich würde es in einem anderen Forum probieren. Ich bin nur kein Fan davon, in mehreren Foren gleichzeitig dasselbe Problem zu posten und bisher hatte ich hier immer Erfolg.
 
U

unicorn75

Noch nicht viel geschrieben

AW: CSS Listennavigation mit Hover im IE 7

Danke für deine Antwort Chriko.

Unter anderem aus diesen Beispielen habe ich meine Navi entwickelt (nur eben vertikal mit vertikalem Submenü). Daher denke ich, dass irgendwo ein kleiner Fehler drin ist, welchen ich einfach übersehe. Eben weil er so simpel ist oder mein IE 7 spinnt einfach, vielleicht kann es jemand einfach mal bei sich testen?
 
C

Chriko

Aktives Mitglied

AW: CSS Listennavigation mit Hover im IE 7

Hab mir deinen Code mal angesehen und getestet. Bin aber nicht ganz durchgestiegen und das lässt sich auch mit weniger Zeilen erledigen.
Schau dir diesen Link nochmal an. Da ist ein vertikales CSS Menü. Funktioniert auch im IE.


Ich hoffe das hilft dir weiter
 
U

unicorn75

Noch nicht viel geschrieben

Habe durch Zufall eine Teillösung des Problems gefunden, das war echt peinlich :uhm:.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

statt einfach nur
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

aber jetzt ist ein neues Problem aufgetaucht, das Submenü versteckt sich beim Aufklappen hinter den Hauptmenü (allerdings nur bei den nicht aktiven Punkten.
Punkt 1
(Unterpunkt 1) ausgeblendet
Punkt 2
Unterpunkt 2
Punkt 3 -> liegt über Unterpunkt 2

Absichtlich gehen die Submenüs leicht nach unten versetzt auf, die Überdeckung ist wieder nur im IE vorhanden. Ich habe versucht per z-index dies zu lösen aber das war nicht erfolgreich.

Ich habe den Code noch einmal deutlich gerafft, damit es übersichtlicher wird. Das Problem mit dem IE Fehler betreffs des Mouseover Effektes ist gelöst (siehe oben). Aber es bleibt diese Überlappung der erste Navigationsebene über die Zweite.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Feststehende Kopf- und Fußzeile</title>
    <style type="text/css">

 /* ############# Grunddesign ############### */


 /* gestaltet kompletten Body Bereich */
        body
        {
            position:absolute;
            background:#000000; /* schwarz*/
            behavior: url("Stylesheet/csshover3-source.htc");
        }
        html, body
        {
            top:0; left:0; right:0;
            min-height:100%;
            margin:0;
            padding:0;
            width:100%;
            font: 85% arial, hevetica, sans-serif; /* Textformat */
            color: blue;  /* Textfarbe */
            background-image: url(Stylesheet/1.gif); /* hintergrundbild */
            overflow:auto;/* scrollbalken wenn benötigt */
        }

/* ############# Inhaltsbereich ############# */

        #content
        {
            margin:0;
            padding-top:4.85em;
            padding-left:15em;
            padding-bottom:3em;
            z-index:0;  /* als unterste Ebene deklariert */
            overflow:auto  /* scrollbalken wenn benötigt */
        }


 /* ################ Menü ################# */

        #Navigation
        {
            position:fixed;
            top:5em;
            left:.5em;
            width:40mm;
            padding:.5em;
            background-color: #FBF2B7;   /* Hintergrundfarbe der Navi */
        }
             /* Einstellungen für die unsortierte Liste */
            ul#Navigation
            {
                width:35mm; /*     Breite  */
                margin: .3em; padding: .7em;   /* Abstand der Navi links und rechts*/
                border: 0px;       /* Randstärke der Navi */
                background-color: #FBF2B7;   /* Hintergrundfarbe der Navi */
                z-index:10;
            }
             /* Einstellungen für die Listeneinträge */
            ul#Navigation li
            {
                position:relative;
                list-style: none;   /* Liste ohne Punkt */
                margin: 0.5em; padding: 0.05em;      /* Abstand der Listeneinträge */
            }
             /* Einstellungen für die Unterpunkte*/
            ul#Navigation li ul
            {
                position: absolute;
                top: 5px;
                left: 5em;
                display:none; /* Submenü ausblenden */
                z-index:50;
            }
             /* Einstellungen für die Listeneinträge bei Mouseover */
            ul#Navigation li:hover ul, li:active, li:focus
             {
                 display:block;  /* Submenü einblenden */
                  z-index:50;
             }
             /* Einstellungen für die Zweite Ebene */
            ul#Navigation li ul li
            {
                margin: 0.1em 0;            /* Abstand der Unterpunkte */
            }
             /*Einstellungen der Hyperlinks - Button*/
            ul#Navigation a, ul#Navigation span
            {
                display:block; /* der gesamte Bereich als Hyperlink */
                width: 100%;  /* gesamte Breite nutzen */
                padding: 0.1em; /*  Größe des Bereichs außerhalb der Schrift */
                text-decoration: none; /*     keine Linkunterstreichung*/
                font: 1em;
                font-weight:bold;  /*   fette Schrift */
                border: 1px solid #A28520; /*   Umrandung */
                border-left-color: #D9B742; border-top-color: #D9B742; /* links u. oben Randfarbe */
                color: black; background-color: #FDFCCE;  /*  Schrift- und Hintergrundfarbe */
            }
            /*Einstellungen der Hyperlinks bei Mouseover*/
             ul#Navigation a:hover, ul#Navigation span
              {
                    border-color: white;   /* Linkfarbe Mouseover */
                    border-left-color: #F8CF7C; border-top-color: #F8CF7C;
                     /* Randfarbe links und oben Mouseover */
                    color: #D69714; background-color: #FDFCCE;
                    /* Schrift- und Hintergrundfarbe Mouseover */
              }


/*  +++++ Einstellungen für den IE unter Version 8 ++++  */

                 /* Der IE soll das Element breiter darstellen,*/
                 /*   da margin und padding hier von der Breite abgezogen wird! */
                 * html #Navigation
                {
                    margin:0;
                    width:10.5em;
                }
                * html #Navigation
                {
                    position:absolute;
                }

                /*--nur für IE 7 erkennbar -> +* -*/
                * + html #Navigation ul li
                {
                    float: left;
                    width: 100%;
                }

                /*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
                * html #Navigation ul li
                {
                    float: left;
                    width: 100%;
                }

                /*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
                *html body
                {
                     behavior: url("Stylesheet/csshover3-source.htc");
                     font-size: 100%;
                }
                *html #Navigation ul li a
                {
                    height: 1%;
                }

                /* Korrekturen fuer IE 5.x */
                * html ul#Navigation
                {
                    width: 40mm;
                    w\idth: 40mm;
                    padding-left: 0;
                    padd\ing-left: 0.3em;
                }
                * html ul#Navigation li ul li
                {
                    margin-left: 0.1em;
                    ma\rgin-left: 0;
                }

/* ######### Nur für den MS Internet Explorer ############ */

        * html, * html body
        {
            overflow:hidden;
            bottom:0;
            height:100%;
        }

        * html #content
        {
            position:absolute;
            top:0; bottom:0; left:0; right:0;
            height:100%;
            width:100%;
            overflow:auto;
            margin:0;
        }


    </style>
</head>
<body>
<!-- ######## Inhalte der einzelnen Bereiche #########-->
<!-- eigentliches Navi in Form einer unsortierten Liste mit der ID "Navigation" -->

<ul id="Navigation">
    <li><a href="aktu.html" target="mitte">Aktuelles</a></li><br>
    <li><a href="index.html" target="mitte">Home</a>
        <ul>
            <li><a href="haus.html" target="mitte">unser Haus</a></li>
            <li><a href="geschichte.html" target="mitte">Geschichte</a></li>
            <li><a href="futter.html" target="mitte">Futterstellen</a></li>
            <li><a href="chronik.html" target="mitte">Kurzchronik</a></li>
        </ul>
    </li>
    <li><a href="vermitt.html" target="mitte">Vermittlung</a>
        <ul>
            <li><a href="neuzu.html" target="mitte">Neuzugänge</a></li>
            <li><a href="sorgen.html" target="mitte">Sorgenkinder</a></li>
            <li><a href="tipps.html" target="mitte">Tipps</a></li>
            <li><a href="suche.html" target="mitte">Vermisst</a></li>
        </ul>
    </li>
    <li><a href="uns.html" target="mitte">um uns gehts</a>
        <ul>
           <li><a href="schick.html" target="mitte">Schicksale</a></li>
           <li><a href="foto.html" target="mitte">Fotoalbum</a></li>
           <li><a href="gedenken.html" target="mitte">in Gedenken</a></li>
        </ul>
    </li>
</ul>



<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->

     <!-- Inhalt -->

    <div id="content">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
W

wuestenwind

Guest

AW: CSS Listennavigation mit Hover im IE 7

Ich hab mir jetzt deinen Code nicht so genau angeschaut, aber du solltest beachten, dass du z-index nur auf positionierte Elemente anwenden kannst.
 
U

unicorn75

Noch nicht viel geschrieben

AW: CSS Listennavigation mit Hover im IE 7

Das müsste der Fall sein, die Position der eigentlichen Navi ist fixiert und einzelnen Elemente der Navi sind mit position:absolut bzw. relativ versehen.
 
U

unicorn75

Noch nicht viel geschrieben

AW: CSS Listennavigation mit Hover im IE 7

Hat jemand eine Idee? Ich habe den z-index verändert, die Positionsangabe ebenso aber jedesmal das gleiche Problem.
 
W

wuestenwind

Guest

AW: CSS Listennavigation mit Hover im IE 7

Vielleicht solltest du probieren das li/a Element in der ul mit einem höherem z-index und der entsprechenden position-angabe zu verehen
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 263 (Mitglieder: 8, Gäste: 255)
Robots: 614

Statistik des Forums

Themen
118.636
Beiträge
1.538.496
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben