Ergebnis 1 bis 5 von 5

Thema: Navi-Leiste stylen mit Hover-Effekt funktioniert bei Firefox aber nicht bei IE.v.10

  1. #1
    Youngster
    Registriert seit
    08.06.2015
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Navi-Leiste stylen mit Hover-Effekt funktioniert bei Firefox aber nicht bei IE.v.10

    Hallo, folgender HTML-Code:


    HTML-Code:
    <link rel="stylesheet" href="css/main.css" type="text/css"/>
    
     <div id="dNav"> <!-- Container für Navigationsleiste -->
                  <nav>  
                      <ul>
                         <li><a href="test1.php" class="cNav">test1</a></li>
                         <li><a href="test2.php" class="cNav">test2</a></li>
                         <li><a href="test3.php" class="cNav">test3</a></li>
                      </ul>
                  </nav> 
              </div> 
    Styling-Sheet main.css
    Code:
    /* ###### einbinden weiterer Stylesheets ######*/
    @import url(navi.css); /* Styling der Navigationsleiste */   
    
    body
    {
    font-family: Arial;
    background-image: url(../images/background.png) 
    }
    Das eigentliche Styling für die Navileiste wird in der navi.css gemacht. Bei Firefox
    klappt dies alles super. Bei IE.v10 sehen die Links allerdings so aus als würde
    gar kein Stylesheet existieren/aufgerufen.

    Styling-Sheet: navi.css
    Code:
    nav {
        width: 900px;   /* Breite der Navileiste festlegen */
    }
    nav ul {
        padding: 0px;
        margin: 0px;
    
        /* Box-shadow fügt den <ul> Menüs einen kleinen Schatten hinzu  */
        box-shadow: 2px 2px 2px #dfdfdf; /* Schatten links 2px, oben 2px, Unschärfe 2px, Farbe */
        -moz-box-shadow: 2px 2px 2px #dfdfdf;
        -webkit-box-shadow: 2px 2px 2px #dfdfdf;
    }
    
    nav ul:after {      /* nachfolgende Elemente nach ul (untergeodnete Listenelemente) */
        clear: both;
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        visibility: hidden; /* dadurch werden Listen der zweiten Ebene versteckt */
    }
    
    nav ul,nav ul li{
        background-color: #FAFAFA; /* FAFAFA Hintergrundfarbe der Navigationsleiste */
    }
    nav ul li {
        list-style: none; /* bei z.B. Style "decimal" erhalten Navi-Elemente eine Aufzählung vor dem Namen */
        float:left;      /* Anordnung der Navi-Elemente von links nach rechts */
    
        border-right: 1px solid #dfdfdf;
    }
    nav ul li a {
        text-decoration: none; /* Anzeigeart des Textes z.B. bei line-through wird Text durchgestrichen angezeigt */
        display: block;
        color: #333; /* Schriftfarbe des Textes der Navi-Elemente*/
        padding: 10px 24px 10px 24px; /* Abstand Text nach oben, Abstand Text nach rechts, Abstand Text nach unten, Abstand Text nach links */
    
        /* Bei Mouse hover wird per  transition: background ein leichter Fade Effekt auf die Hintergrundfarbe
           der Einträge gelegt. 0.3s gibt die Länge der Animation an und  ease-out führt zu einem schnellen 
           Start der Animation, um das Menü nicht träge zu machen. Der Transition Effekt wird ausgeführt sobald
           sich die entsprechende Eigenschaft ändert, in unserem Fall bei nav ul li.cat*:hover. */
        transition: background 0.3s ease-out; /* explorer 10 */
        -webkit-transition: background 0.3s ease-out; /* chrome & safari */
        -moz-transition: background 0.3 ease-out; /* firefox */
        -o-transition: background 0.3 ease-out; /* opera */
    }
       
    nav ul li:hover > a {
        color: #FFFFFF;  /* Schriftfarbe wenn man mit der Maus drüber fährt */
        background-color: #808080; /* Hintergrundfarbe wenn man mit der Maus drüber fährt */ 
    }
    
    nav ul li:hover > ul {
        visibility: visible;  /* wenn Maus über Navigationselemente bewegt wird, werden nachfolgende Listenelemente wieder sichtbar eingeblendet*/
    }
    
    nav ul li ul{
        display: inline;
        visibility: hidden; /* bei hidden wird Größe des kompletten Listenelements (inkl. Unterlisten)) nicht angezeigt */
        position: absolute; 
        padding:5px;       /* legt äüßeren Rahmen bei Unterlisten-Elementen fest */
    }
    nav ul li ul li{
        float: none;  /* Festlegung wie Unterlistenelemente angezeigt werden. z.B. left = von links nach rechts in einer Zeile */
    }
    nav ul li ul li a {
        color: #FAFAFA; /* legt Schriftfarbe der Unterlistenelemente fest */
    }
    nav ul li ul li a:hover{
        color: #333;  /* Schriftfarbe der Unterlistenelemente bei Auswahl des Elements per Maus */
        background-color: #FAFAFA !important; /* #FAFAFA Hintergrundfarbe der Unterlistenelemente bei Auswahl des Elementes per Maus */
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Navi-Leiste stylen mit Hover-Effekt funktioniert bei Firefox aber nicht bei IE.v.

    Versuch mal noch ein -ms- Präfix für die CSS3 Regeln

  3. #3
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Navi-Leiste stylen mit Hover-Effekt funktioniert bei Firefox aber nicht bei IE.v.

    Hallo,

    deine hier veröffentlichen Quellcodeschnipsel funktionieren, auch im IE 9 und 10. Ein Link zu der Seite sinnvoller, da sich das Problem dort verbergen muss.

    Gruss

    MrMurphy
    Geändert von MrMurphy (09.06.2015 um 15:23 Uhr)

  4. #4
    Youngster
    Themenstarter

    Registriert seit
    08.06.2015
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Navi-Leiste stylen mit Hover-Effekt funktioniert bei Firefox aber nicht bei IE.v.

    Hallo MrMurphy,

    die Seite habe ich nur offline. Ich habe jetzt nur mal den Part rausgenommen und das ganze mit einer HTML-Datei für
    das Menü und einer Datei für das Styling:

    navi.html
    HTML-Code:
    link rel="stylesheet" href="style.css" type="text/css"/>
    
    <body>
     <div id="dNav"> <!-- Container für Navigationsleiste -->
                  <nav>  
                      <ul>
                         <li><a href="test1.php" class="cNav">test1</a></li>
                         <li><a href="test2.php" class="cNav">test2</a></li>
                         <li><a href="test3.php" class="cNav">test3</a></li>
                      </ul>
                  </nav> 
              </div> 
    </body>
    Code: style.css

    Code:
    body{
        background-color:green;
    }
    
    nav {
        width: 900px;   /* Breite der Navileiste festlegen */
    }
    nav ul {
        padding: 0px;
        margin: 0px;
    
        /* Box-shadow fügt den <ul> Menüs einen kleinen Schatten hinzu  */
        box-shadow: 2px 2px 2px #dfdfdf; /* Schatten links 2px, oben 2px, Unschärfe 2px, Farbe */
        -moz-box-shadow: 2px 2px 2px #dfdfdf;
        -webkit-box-shadow: 2px 2px 2px #dfdfdf;
    }
    
    nav ul:after {      /* nachfolgende Elemente nach ul (untergeodnete Listenelemente) */
        clear: both;
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        visibility: hidden; /* dadurch werden Listen der zweiten Ebene versteckt */
    }
    
    nav ul,nav ul li{
        background-color: #FAFAFA; /* FAFAFA Hintergrundfarbe der Navigationsleiste */
    }
    nav ul li {
        list-style: none; /* bei z.B. Style "decimal" erhalten Navi-Elemente eine Aufzählung vor dem Namen */
        float:left;      /* Anordnung der Navi-Elemente von links nach rechts */
    
        border-right: 1px solid #dfdfdf;
    }
    nav ul li a {
        text-decoration: none; /* Anzeigeart des Textes z.B. bei line-through wird Text durchgestrichen angezeigt */
        display: block;
        color: #333; /* Schriftfarbe des Textes der Navi-Elemente*/
         padding: 10px 24px 10px 24px; /* Abstand Text nach oben, Abstand Text  nach rechts, Abstand Text nach unten, Abstand Text nach links */
    
        /* Bei Mouse hover wird per  transition: background ein leichter Fade Effekt auf die Hintergrundfarbe
           der Einträge gelegt. 0.3s gibt die Länge der Animation an und  ease-out führt zu einem schnellen 
           Start der Animation, um das Menü nicht träge zu machen. Der Transition Effekt wird ausgeführt sobald
           sich die entsprechende Eigenschaft ändert, in unserem Fall bei nav ul li.cat*:hover. */
        transition: background 0.3s ease-out; /* explorer 10 */
        -webkit-transition: background 0.3s ease-out; /* chrome & safari */
        -moz-transition: background 0.3 ease-out; /* firefox */
        -o-transition: background 0.3 ease-out; /* opera */
    }
       
    nav ul li:hover > a {
        color: #FFFFFF;  /* Schriftfarbe wenn man mit der Maus drüber fährt */
        background-color: #808080; /* Hintergrundfarbe wenn man mit der Maus drüber fährt */ 
    }
    
    nav ul li:hover > ul {
         visibility: visible;  /* wenn Maus über Navigationselemente bewegt  wird, werden nachfolgende Listenelemente wieder sichtbar eingeblendet*/
    }
    
    nav ul li ul{
        display: inline;
        visibility: hidden; /* bei hidden wird Größe des kompletten Listenelements (inkl. Unterlisten)) nicht angezeigt */
        position: absolute; 
        padding:5px;       /* legt äüßeren Rahmen bei Unterlisten-Elementen fest */
    }
    nav ul li ul li{
        float: none;  /* Festlegung wie Unterlistenelemente angezeigt werden. z.B. left = von links nach rechts in einer Zeile */
    }
    nav ul li ul li a {
        color: #FAFAFA; /* legt Schriftfarbe der Unterlistenelemente fest */
    }
    nav ul li ul li a:hover{
        color: #333;  /* Schriftfarbe der Unterlistenelemente bei Auswahl des Elements per Maus */
         background-color: #FAFAFA !important; /* #FAFAFA Hintergrundfarbe der  Unterlistenelemente bei Auswahl des Elementes per Maus */
    }
    Wie gesagt im Firefox sieht alles supi aus. Im IE macht er nur den Hintergrund grün, die Links bleiben unverändert... IE Version 10.0.9200.17357. Kann das noch eine Einstellung im IE direkt sein, die das verhindert?

  5. #5
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.150
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Navi-Leiste stylen mit Hover-Effekt funktioniert bei Firefox aber nicht bei IE.v.

    Stell das doch mal Online. Es gibt massenhaft kostenlosen Webspace.
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

Ähnliche Themen

  1. Hover funktioniert nicht wie ich es will ;-)
    Von Idrilian im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.10.2009, 09:34
  2. zurück button funktioniert in firefox, in IE aber nicht
    Von momosophie im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 25.09.2007, 11:45
  3. Großes Problem Hover effekt Nav Leiste
    Von pitcher37 im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 07.01.2007, 17:45
  4. hover effekt firefox problem
    Von mop im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 03.08.2006, 23:35
  5. Submit-Button funktioniert nicht im IE, aber in Firefox.
    Von hhjjppww im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 26.07.2005, 00:15

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •