XHTMLforum - CSS Buttons im Internet Explorer

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - CSS Buttons im Internet Explorer (http://xhtmlforum.de/showthread.php?t=69224)

CSS Buttons im Internet Explorer

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

Zitat:

Zitat von Kyunho (Beitrag 528270)

Ü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?

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.

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

Problem gelöst! Danke fricca

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.