CSS Buttons im Internet Explorer

Kyunho · #1 (**permalink**) 07.04.2013, 18:33

Hallo liebe Community,

ich versuche es jetzt schon seit Tagen und bin auch fleißig am googlen. Über die Google-Suche habe ich einen Beitrag gefunden, wo gesagt wird, dass man für den Internet Explorer besser "Image-Buttons" erstellen sollte.

Weiterhin wär mir einfach über CSS natürlich lieber. Woran könnte es liegen, dass die Gradient Funktion meiner Buttons auf Forex Broker Vergleich - Home für den Internet Explorer nicht funktioniert? Ich habe die neueste Version vom Internet Explorer heruntergeladen und getestet.

Hier der Code in HTML:

HTML-Code:

<div class="newsletterbox">
<form...
/* Unnötiger Inhalt /*
...
<button class="newsletterbutton" name="" type="submit" value="">Eintragen</button></form></div>

Hier der Code in CSS:

Code:

button.newsletterbutton {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #fef4e9;
	padding: 5px 18px;
	margin-top:10px;
	background: -moz-linear-gradient(
		top,
		#007CB8 0%,
		#134991);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#007CB8),
		to(#134991));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007CB8', endColorstr='#134991');
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 30px;
	border: 0px solid #da7c0c;
	-moz-box-shadow: 0px 0px 3px #ffffff;
-webkit-box-shadow: 0px 0px 3px #ffffff;
box-shadow: 0px 0px 3px #ffffff;
	text-shadow:
		0px 0px 0px rgba(255,255,255,0.4),
		0px 0px 0px rgba(255,255,255,0.3);
}
.newsletterbutton:hover {
	background: -webkit-gradient(linear, left top, left bottom, from(#134991), to(#007CB8));
	background: -moz-linear-gradient(top,  #134991,  #007CB8);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#134991', endColorstr='#007CB8');
}

Wichtig ist, dass dies nicht nur für "submit"-Button, sondern auch für href-Verlinkungen funktionieren soll.

Über eure Hilfe wäre ich dankbar.

Mit freundlichen Grüßen,
Kyunho

fricca · #2 (**permalink**) 07.04.2013, 18:55

Zitat:

Zitat von Kyunho

Über die Google-Suche habe ich einen Beitrag gefunden, wo gesagt wird, dass man für den Internet Explorer besser "Image-Buttons" erstellen sollte.

Von wann ist dieser Beitrag?

Zitat:

Woran könnte es liegen, dass die Gradient Funktion meiner Buttons auf Forex Broker Vergleich - Home für den Internet Explorer nicht funktioniert?

Weil du die Gradients nur mit -moz- und -webkit-Prefixes angibst (und für Webkits nur die längst veraltete Syntax). IE10 unterstützt die prefix-freie Notation, die fehlt komplett bei dir.
Welche Quelle hast du benutzt, um deine Gradients zu notieren?

Kyunho · #3 (**permalink**) 07.04.2013, 19:12

Hallo fricca,

Danke für die schnelle Antwort!

Ich wollte mir eine grafisch schöne CSS Box erstellen und habe über diese Seite vollautomatisch den Code kreieren lassen: CSS3 Generator - By Peter Funk & Eric Hoffman

Eingefügt und in HTML in eine <div class=""> gesetzt. Hat natürlich super funktioniert (Ich benutze Google Chrome). Mit meinem iPhone (Mobile Safari) und der neuesten Version von Mozille Firefox ausprobiert: Check - Funktioniert auch.

Bin CSS-technisch mit dem Code so fortgefahren und für 1 weitere Box und 4 Buttons den Background-Gradient und den Box-Shadow CSS-Code der Seite benutzt.

Beim Eintragen in Webkatalogen meiner Seite gab's irgendwann ein Preview meiner Seite und mir ist aufgefallen, dort sieht man gar nicht meine Buttons. Fix Internet-Explorer heruntergeladen, installiert und getestet und siehe da: Kein Button-Style.

Du scheinst in der Materie zu sein, hast du vielleicht einen möglichst einfachen Lösungsansatz für mich? Bin für jeden Lösungsvorschlag offen.

Mit freundlichen Grüßen,
Kyunho

Edit: Das mit den Image-Buttons finde ich nicht mehr.

fricca · #4 (**permalink**) 07.04.2013, 19:23

Wenn ich deinen Generator benutze wird wesentlich mehr ausgegeben als nur das wenige, was in deinem Code steht. Aber der Code ist trotzdem veraltet, nicht verwenden.
Der hier sollte besser sein: Ultimate CSS Gradient Generator - ColorZilla.com

Bei Gradients hat sich viel verändert und die Syntax ist alles andere als angenehm zu verwenden. Da hilft nur, sich damit auseinanderzusetzen. Lesestoff z.B. beim MDN: https://developer.mozilla.org/en-US/...inear-gradient

Kyunho · #5 (**permalink**) 07.04.2013, 20:09

Hallo fricca,

Du hattest recht damit, dass die Gradient-Funktionen veraltet waren. Immer schön beim Googlen auf das Datum achten.

Habe mich jetzt nicht weiter mit Gradient befasst aber hier ist eine sehr seriöse Lösung von Microsoft: CSS Gradient Background Maker

Mit freundlichen Grüßen,
Kyunho

P.S.: Problem gelöst, Thread kann geclosed werden.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
BSI warnt vor Nutzung des Internet Explorer	False Mirror	Offtopic	29	16.01.2010 20:06
CSS Border Problem Internet Explorer	elBoB	CSS	1	21.07.2008 14:35
Internet Explorer und Firefox Css??	p.rogge	CSS	4	24.06.2008 17:26
Internet Explorer 7 kümmert sich nicht um CSS height?	Someday87	CSS	11	30.03.2007 10:24
Float Layout Problem, Internet Explorer	Azzy	CSS	13	23.12.2005 16:19