• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Gradient unter IE8 funktioniert wegen display:inline nicht

M

mWolf

New member
Hallo Zusammen,

ich habe eine waagerechte Menüleise mit ul/li/a zusammengebaut.
Bei a:hover soll nun ein linear-gradient ausgelöst werden. Im FF funktioniert das super nur nicht im IE8.
So wie ich herausgefunden habe, liegt das am display:inline. Meine tests haben ergeben, wenn ich display:inline-block setze funktioniert das ganze im IE8.
Blöd nur das es dann mein Layout zerreist (Höhen und Abstände werden stark vergrößert, wenn ich inline-block setze).
Habt ihr eine Idee, wie ich mit wenig Aufwand das Problem beheben kann ohne mein Layout komplett neu zu überarbeiten?
Hier mal das Layout zu meinem Menü:

Code: 
#mainNavigation {
	overflow: hidden;
	border-top: 1px solid #00FF00;
	border-bottom: 1px solid #00FF00;
	background-color: #f5fffa;
	margin-top: 10px;
	padding: 5px 10px 5px 10px;
}

#mainNavigation li {
	display: inline;
	margin: 0 10px 0 0;
}


#mainNavigation a, #mainNavigation a:link,#mainNavigation a:visited {
	text-decoration: none;
	color: #a9a9a9;
	font-family: Calibri, Arial;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.2em;
	padding-top: 8px;
	padding-bottom:8px;
	padding-left: 9px;
	padding-right: 6px;
}

#mainNavigation a:hover, #mainNavigation a.parent:hover, #mainNavigation a.current:hover {
	background: #8DFC8D;
	background: -webkit-linear-gradient(top, #00FF00 0, #8DFC8D 63%, #5A98C7 100%) no-repeat;  /* Chrome10+,Safari5.1+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00FF00), color-stop(63%,#8DFC8D), color-stop(100%,#CBFFCB)); /* Chrome,Safari4+ */
	background: -moz-linear-gradient(top, #00FF00 0, #8DFC8D 63%, #CBFFCB 100%) no-repeat; /* FF3.6+ */
	background: -o-linear-gradient(top, #00FF00 0, #8DFC8D 63%, #CBFFCB 100%) no-repeat; /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #00FF00 0, #8DFC8D 63%, #CBFFCB 100%) no-repeat; /* IE10+ */
	background: linear-gradient(top, #00FF00 0, #8DFC8D 63%, #CBFFCB 100%) no-repeat; /* W3C */
	-svg-background: linear-gradient(top, #00FF00 0, #8DFC8D 63%, #CBFFCB 100%) no-repeat;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00FF00', endColorstr='#CBFFCB',GradientType=0 ); /* IE5.5-7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FF00, endColorstr=#CBFFCB)"; /*IE8*/
	
	border: 1px solid #CBFFCB;
	padding-top: 8px;
	padding-bottom:8px;
	padding-left: 8px;
	padding-right: 5px;
	margin: 0;
}

Danke und Viele Grüße
mWolf
 
Anbei habe ich mal eine leicht abgeänderte und abgespeckte Version meines Menüs angehangen.
Trotz abgespeckter Version, stellt es mein Problem dar.
Im FF15 funktioniert es im IE8 nicht.
 

Anhänge

  • test.html.txt
    2,4 KB · Aufrufe: 3
Hallo Zusammen,

ich habe mich jetzt dazu entschieden "display:inline-block" für meine Navi einzuführen.
Dies bewirkt, das mein Hover Effekt funktioniert.
Allerdings musste ich einige Layoutanpassungen machen - bis ich das soweit hatte.... und das nur wegen dem IE (Sollte man abschaffen).

Anbei hänge ich mal die abgeänderte Version, damit ihr sehen könnt, was ich alles geändert habe.

Viele Grüße
mWolf
 

Anhänge

  • test_new.html.txt
    2,4 KB · Aufrufe: 2
@mWolf (auch wenn das ätten hier nicht funzt) :D

ich habe eben beide Dateien ausprobiert. Im IE8 sehe ich dein Problem nicht. Bei mir funzt es. Soll beim Hovern ein Untermenü erscheinen?

Du kannst, sofern Du das liest und das Problem nochmal angehen willst, folgendes machen:

Baue in den <head> folgendes ein: <meta http-equiv="X-UA-Compatible" content="IE=8">

Du lädst dir Download PIE – CSS3 PIE: CSS3 decorations for IE runter. Damit kannst Du diverse Styles (Borderradius und Co.) auch für IE6, 7, 8 erzwingen.

Nutze ich selber und finde es gut.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben