Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „gradient wird im IE als hover nicht angezeigt“

Grete

Noch nicht viel geschrieben

Hallo Forum,

ich habe ein Problem mit einer Navi und ich komme dabei einfach nicht weiter.
Ich habe eine Liste erstellt und diese per CSS horizontal dargestellt und mit einem Verlauf versehen (kein Bild). Soweit klappt alles.
Jetzt möchte ich aber, dass deim hover eines Menüpunktes sein Verlauf umgedreht angezeigt wird. Das funktioniert in Firefox, Opera und Safari, nur nicht im Internet Explorer (da gibt es nur eine einfache Hintergrundfarbe).

Mein HTML:

Code:
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenannt</title>
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
 
    <div id="path">
    </div>
 
    <div id="navibar">
          <ul>
                 <li>Prozesse</li>
                 <li>Informationen</li>
                 <li>Bereiche</li>
                 <li>Zoom</li>
                 <li>Feedback</li>
                 <li>Hyperlinks </li>
                 <li>Drucken </li>
                 <li>Sprache</li>
                 <li><input name="Suche" type="text" size="17" maxlength="50" height="5" value="Suche" class="formsuche"> </li>
                 <li>Hilfe</li>
       </ul> 
   </div>
 
    <div id="left_part">
    <p>blabla</p>    
    </div>
 
</body>
</html>

Mein CSS:
Code:
/* --------------------- general ----------------------- */
 
/* general settings */
html{                                
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 0.8em;
    color: black;
    margin: 0;
    padding: 0;
    height: 100%;
}
 
/* default settings for links */
html a{                               
    text-decoration: none;
    outline: none;
}
 
body{
    height: 100%;
    margin: 0;
    padding: 0;
}
 
/*--------------------  navigation -------------------*/
#navibar{                          /* gradient and border for the navigation bar */
    margin-top: 20px; 
    background: #dee9f5;      /* Old browsers */
    background: -moz-linear-gradient(top, #f4f9ff 0%, #dbe7f5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f9ff), color-stop(100%,#dbe7f5));      /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f4f9ff 0%,#dbe7f5 100%);                 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f4f9ff 0%,#dbe7f5 100%);                  /* Opera11.10+ */
    background: -ms-linear-gradient(top, #f4f9ff 0%,#dbe7f5 100%);                  /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f9ff', endColorstr='#dbe7f5',GradientType=0 );    /* IE6-9 */
    background: linear-gradient(top, #f4f9ff 0%,#dbe7f5 100%);                   /* W3C */
 
    border-bottom: #c2d4e9 1px solid;
    border-top: #e1e9f1 1px solid; 
    border-left: #c2d4e9 1px solid;
    border-right: #c2d4e9 1px solid; 
}
 
#navibar ul{                /* size and margin of the navigation bar */
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0;
}
 
#navibar ul li{             /* style of each navigation element */                      
    list-style-type: none;
    display: inline;
    margin: 0 auto;        /* for consistant distance of each navigation    point to his border */
    padding: 0 20px 0 20px !important;  /* distance of the text to the border */                  
}
 
#navibar ul li{ color:#000; padding-right: 5px; padding-left: 5px; cursor: pointer;}
#navibar ul li:visited{ color:#000; padding-right: 5px; padding-left: 5px;}
#navibar ul li:hover{
    color:#000;
    background: #c2d4e9;             /* Old browsers */
    background: -moz-linear-gradient(top, #f7fbfe 0%, #bfd2e8 100%);                 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7fbfe), color-stop(100%,#bfd2e8));      /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f7fbfe 0%,#bfd2e8 100%);                 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f7fbfe 0%,#bfd2e8 100%);                  /* Opera11.10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#dce7f6, endColorstr=#f4f9ff);     /* Internet Explorer 5.5 - 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,    startColorstr=#dce7f6, endColorstr=#f4f9ff)";   /* Internet Explorer 8 */
    background: -ms-linear-gradient(top, #f7fbfe 0%,#bfd2e8 100%);  /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbfe', endColorstr='#bfd2e8',GradientType=0 );    /* IE6-9 */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    background: linear-gradient(top, #f7fbfe 0%,#bfd2e8 100%);      /* W3C */
 
    border: 2px #c2d4e9 solid;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-right: 18px !important;
    padding-left: 18px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
 }
 
#navibar ul li:active{ color:#000; background-color: #D6D7D8; padding-top: 5px; padding-bottom: 5px;}
 
#navibar ul li img{
    vertical-align: middle;
    margin-left: 5px;
    border: none; 
}
 
#navibar ul li input{
    margin: 0;
    padding: 0;
}

Ich wäre wirklich dankbar, wenn mir jemand dabei helfen kann.
 
Zuletzt bearbeitet:

Grete

Noch nicht viel geschrieben

AW: gradient wird im IE als hover nicht angezeigt

Nachdem ich den Code getestet habe, den ich hier eingefügt habe, geht noch nicht einmal mehr der normale Verlauf der Navi im IE.
 

Myhar

Hat es drauf

AW: gradient wird im IE als hover nicht angezeigt

Dein CSS für den Gradient für den IE ist fehlerhaft. Bzw. nicht direkt fehlerhaft, sondern einfach nur unvollständig. Die Schreibweise für Gradients ist nicht für IE6-9 gleich. Wie man kann, musst du dein CSS erweitern:
Code:
/* For Internet Explorer 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
		/* For Internet Explorer 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";

Beim hover hast du die zusätzliche Deklaration zwar gemacht, jedoch gibt es auch dort ein paar merkwürdige definitionen:
Code:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#dce7f6, endColorstr=#f4f9ff);     /* Internet Explorer 5.5 - 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,    startColorstr=#dce7f6, endColorstr=#f4f9ff)";   /* Internet Explorer 8 */
    background: -ms-linear-gradient(top, #f7fbfe 0%,#bfd2e8 100%);  /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbfe', endColorstr='#bfd2e8',GradientType=0 );    /* IE6-9 */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');

Wieso wird dort der filter mehrmals definiert?

L. G.
 

Grete

Noch nicht viel geschrieben

AW: gradient wird im IE als hover nicht angezeigt

Vielen Dank für den Hinweis. Ich hab´s geändert.
Ich hab den Filter mehrmals definiert, weil ich es bei der <ul> irgendwann mal da stehen hatte und dann für den hover des <li> übernommen hab. Danach scheint es bei der <ul> irgendwie abhanden gekommen zu sein.

Also, mit deinen Tipps funktionieren bei mir jetzt Hintergrundfarbe und der border beim hover. Aber der Gradient ist immer noch nicht zu sehen. Aber so ist es schon mal besser.
 

Myhar

Hat es drauf

AW: gradient wird im IE als hover nicht angezeigt

Ich gehe einfach einmal davon aus, dass der gradient jetzt für alle IE Versionen korrekt definiert ist.
Du kannst im IE F12 drücken, dann hast du die Entwicklerwerkzeuge, mit denen du nachvollziehen kannst, welcher Style auf einem Element wirkt und welcher nicht.
Vielleicht ist ja ein Schreibfehler oder ähnliches doch noch vorhanden? Hast du einmal versucht, alle Styles für das Element aus dem CSS zu löschen und nur den Gradient für das Element zu erstellen? Wenn das geklappt hat, natürlich die restlichen Styles wieder hinzufügen.

L. G.
 

Grete

Noch nicht viel geschrieben

AW: gradient wird im IE als hover nicht angezeigt

Mit F12 seh ich die hover-Zustände nicht. Also, auf jeden Fall steht da kein gradient.
Wenn ich alle Eigenschaften des hover-Elements bis auf den gradient weg nehme, sehe ich den gradient im IE. Ich bin mir sicher, dass es das display:inline ist, das Probleme verursacht. Ich habe es mit table versucht:

#navibar ul{
display: inline-table;
padding-top: 5px;
padding-bottom: 5px;
margin: 0;
}

#navibar ul li{
list-style-type: none;
display: table-cell;
margin: 0 auto;
padding: 0 20px 0 20px !important;
}

Aber dann zeigt er die Rahmen nicht mehr an.
 

Grete

Noch nicht viel geschrieben

AW: gradient wird im IE als hover nicht angezeigt

Vielen Dank für den Link. Leider will der Safari genau das nicht, was der IE braucht. Deswegen werde ich das jetzt mit einem CSS-Hack lösen müssen. Vielen Dank für deine Hilfe und viele Grüße.
 

Grete

Noch nicht viel geschrieben

AW: gradient wird im IE als hover nicht angezeigt

So, nach einigen anderen Problemen bin ich mit folgender CSS fast an mein Ziel gekommen:

Code:
#navibar ul li:nth-child(1):hover, #navibar ul li:nth-child(2):hover, #navibar ul li:nth-child(3):hover, #navibar ul li:nth-child(4):hover, #navibar ul li:nth-child(5):hover, #navibar ul li:nth-child(6):hover, #navibar ul li:nth-child(7):hover, #navibar ul li:nth-child(8):hover, #navibar ul li:nth-child(10):hover{ 
margin: -1px 0;
display: inline;
background-image: url(../images/bla.svg);
background-image: linear-gradient(top, #f4f9ff 0%, #bacee6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr='#f4f9ff', EndColorStr='#bacee6');
 
padding-right: 18px !important;
padding-left: 18px !important;
padding-top: 5px !important;
padding-bottom: 6px !important;
margin: -5px 0 -5px 0;
 
border: 2px #c2d4e9 solid;
-moz-border-radius: 5px;
border-radius: 5px;
line-height: 0.9;
}

Im IE9 wird das fast richtig dargestellt, allerdings hat jedes hover-Kästchen unten einen 1px-Rand. Weiß jemand, wie ich den wegbekomme?

Das größere Problem ist aber noch, dass jetzt im IE7 und IE8 gar kein hover-Effekt mehr angezeigt wird. Kennt jemand vielleicht die Lösung für dieses Problem?
Ich hab mich schon doof gegoogelt und in der Forumssuche konnte ich auch nichts entsprechendes finden.
 

Myhar

Hat es drauf

AW: gradient wird im IE als hover nicht angezeigt

Vielen Dank für den Link. Leider will der Safari genau das nicht, was der IE braucht. Deswegen werde ich das jetzt mit einem CSS-Hack lösen müssen. Vielen Dank für deine Hilfe und viele Grüße.

Wieso einen CSS Hack, warum nicht mit Conditional Comments ? (Ich habe leider auf die schnelle nur etwas für veraltete IE Versionen gefunden, aber es sollte kein Problem darstellen, das für andere Versionen zu adaptieren)

Zu deinem Hover-Problem
Der IE versteht erst ab Version 9 nth-child.

L. G.
 

Grete

Noch nicht viel geschrieben

AW: gradient wird im IE als hover nicht angezeigt

Ich hab vorhin gelesen, dass es nicht so gut sein soll, CC zu benutzen, da mit jeder neuen Browserversion auch die Fehler beseitigt werden können, auf denen die CC basieren, so dass danach alles zerschossen wird.
 

Myhar

Hat es drauf

AW: gradient wird im IE als hover nicht angezeigt

Schöner wäre es natürlich, wenn man keine CC brauchen würde.
Aber es kommt nur darauf an, wie man die CC verwendet:
Code:
<link rel="stylesheet" href="basis.css" type="text/css" media="all" />
<!--[if IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="screen"/><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="ie7e.css" type="text/css" media="screen"/><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="ie8.css" type="text/css" media="screen"/><![endif]-->

Damit hast du für 3 IE Versionen ein CSS und du zerschießt dir nichts, wenn eine neue IE Version raus kommt. In diese CSS Files schreibst du allerdings wirklich nur die Sachen rein, die für die IE Version zwingend nötig sind. Styles, welche IE, Firefox, Opera, etc. benötigen, schreibst du wie gewohnt in die basis.css (oder wie die CSS Datei bei dir auch immer heißt).

L. G.
 

Grete

Noch nicht viel geschrieben

AW: gradient wird im IE als hover nicht angezeigt

Ich glaub, ich bin verwirrt. Das mit dem externen Stylesheet sind ja CC und keine CSS-Hacks.
Ja, vielen Dank. Das ist klasse.
Ich weiß, du hast mir schon viel geholfen, aber kennst du vielleicht einen Lösungsansatz für das 1px-Rand-Problem?
 

Grete

Noch nicht viel geschrieben

AW: gradient wird im IE als hover nicht angezeigt

Irgendetwas von dem, was ich getan habe, um die vielen kleinen Probleme zu lösen, hat den weißen Rand beseitigt.
Ich weiß jetzt, wie die Syntax für eine Navi mit gradient und abgerundeten Ecken für den IE und die anderen Browser lautet.
Das ist jedenfalls die für den IE:

Code:
#navibar ul li:hover{              
    margin: -1px 0;
    display: inline;
    background-image: url(../images/hover.svg);
    background-image: linear-gradient(top, #f4f9ff 0%, #bacee6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr='#f4f9ff', EndColorStr='#bacee6');
 
    padding: 6px 12px 8px 12px !important;
    margin: -5px 0 -5px 0;
 
    border: 2px #c2d4e9 solid;
    -moz-border-radius: 5px;
     border-radius: 5px;
}
 
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

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben