HTML/CSS Probleme mit Buttons

[Drrichardfahrer]

Ich habe zur Zeit so große Probleme mit Buttons in den unterschiedlichen Browsern.
Zunächst hatte ich ja diese 0815-<input type='submit'>-Buttons, die ich nun grafisch mit CSS aufpeppen wollte.
Bei Klamm sind ja nun auch Bilder davor - und dies hatte ich nun auch mit <button type='submit'> bzw. <button type='button'> (bei Links) probiert.
Nun regen sich aber viele Kunden auf, dass Sie die Buttons nicht klicken können, etc...

Wie löst ihr dieses Problem? Wie hat Klamm es gelöst?

Liebe Grüße,
Drrichardfahrer

PS: Ich verwende JQuery 1.8 und habe außerdem das Problem, dass er beim IE < 9 Fehlermeldungen ausspuckt und nach excanvas fragt... Irgendwas mach ich falsch Im FF funktioniert alles tadellos und ohne Probleme (genauso in Chrome).

 

[theHacker]

Nun regen sich aber viele Kunden auf, dass Sie die Buttons nicht klicken können, etc...

Wieso sollte ein Button nicht klickbar sein, wenn CSS eingesetzt wird? Hast du ein Beispiel für so einen "nicht-klickbaren Button"?

Zum Canvas:
https://caniuse.com/#feat=canvas

 

[GatheringXP]

Soweit ich das richtig verstanden habe suchst du hiernach:

<input type="image" src="absenden.png" alt="Absenden">

Andernfalls (bei Links z.B.) müsste auch das gehen:

<a href="#" onclick="this.form.submit();">Absenden</a>

<a href="#" onclick="this.form.submit();"><img src="absenden.png" alt="Absenden"></a>

Ansonsten bitte nochmal eine genauere Fragestellung

MfG,
GatheringXP

 

[Drrichardfahrer]

Wieso sollte ein Button nicht klickbar sein, wenn CSS eingesetzt wird? Hast du ein Beispiel für so einen "nicht-klickbaren Button"?

echo "<form action='index.php?action=fehlstunden' method='post'><button type='submit' class='button' name='generate_pdf' value='generate_pdf'><img src='img/buttons_icons/page_white_text.png' alt=''/> Entschuldigungszettel generieren</button></form>";

 

[GatheringXP]

Du willst einen Button und dahinter ein Bild? Oder meinst du vllt eher:

echo "<form action='index.php?action=fehlstunden' method='post'><input type='image' class='button' name='generate_pdf' value='generate_pdf' src='img/buttons_icons/page_white_text.png' alt=''/> Entschuldigungszettel generieren</form>";

 

[Drrichardfahrer]

Ich will, so wie bei Klamm es üblich ist, einen Button, in dem sich ein Bild befindet.

 

[GatheringXP]

Gib mir mal bitte einen Link zu einem solchen Button .. Ich bin jetzt noch nicht soooo lange dabei, aber ich hab noch nirgends Buttons gesehen, mit Bild drin..

 

[Drrichardfahrer]

Eh auf fast jeder Klammseite.

Zum Beispiel beim PopUp für die Vergütung...da sind ja lauter Buttons...

Oder hier:
https://www.klamm.de/partner/start_win.php?step=5

 

[GatheringXP]

Okay, unbewusst übersehen. Ich entschuldige mich vielmals

Habe dein Script jetzt mal getestet und die Bild-URL getauscht .. Funktioniert wunderbar. Was steht denn in deiner class button und inwiefern spielt jQuery hier hinein?

Ansonsten poste doch bitte einfach mal den Link zum Test-Server, kannst den ja später wieder rausnehmen

<?php
    echo "<form action='index.php?action=fehlstunden' method='post'><button type='submit' class='button' name='generate_pdf' value='generate_pdf'><img src='https://img4.klamm.de/logos/klamm/logo_refresh.gif' alt=''/> Entschuldigungszettel generieren</button></form>";
?>

 

[Drrichardfahrer]

In der class hab ich folgendes:

div.button_entschuldigung {
    width: 253px;
    height: 31px;
    background-image:url(https://www.............at/img/buttons_icons/button_entschuldigung.jpg);
}

div.button_entschuldigung:hover {
    background-position: -253px 0px;
    cursor: pointer;
}

Link kann ich dir aus datenschutzrechtlichen Gründen keinen geben, da es sich hier um eine Schulklassenwebsite handelt.
Beim Entschuldigungsbutton handelt es sich um ein Sprite quasi.

JQuery hat damit eh nichts zu tun. Jedenfalls klagen einige Eltern (von meinen Schüler/n/innen), dass sie diese Buttons nicht klicken können...und dies ist erst seit ich umgestellt habe vom normalen <input type='submit'> auf diese Button-Sache mit den Bildern...
Aber wenns bei Klamm geht (der ja sicher auch für IE 7 gerüstet ist), dann muss es doch auch bei mir gehen...oder was macht er anders?

 

[Genius74]

Fehlt da nicht ein display: block ; ?

 

[GatheringXP]

Zu erst einmal mixxt du die Klassen "button" (im Beispiel) und "button_entschuldigung" (in der CSS) ..
Anwendung findet die Klasse also so oder so nicht

Herr Klamm ruft ein JavaScript-Snippet damit auf .. Aber das sollte nicht der ausschlaggebende Punkt sein. Mit jQuery kannst du ebenfalls einen Listener setzen, der den Klick dann weiterleitet. Hierzu sei an die offizielle Dokumentation verwiesen:

https://api.jquery.com/click/

So kann ich mir das aber auch erstmal nicht erklären. Ich denk mal drüber nach

 

[Drrichardfahrer]

Entschuldige, ich habe auch das falsche verlinkt...hier ist die Button-class:

.button {
    background-color:#e5e5e5;
    border:1px solid #9e9e9e;
    border-top:1px solid #eee;
    border-left:1px solid #eee;   
    font-family:Tahoma, Arial, Verdana, sans-serif;
    font-size:12px;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */ 
}

.button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
} 

.button img {
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

.button:hover {
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}

Aber so wie ich das sehe, umschließt Meister Klamm diesen Button ja auch noch mit einem div...

<div class="centerX buttons mt10 mb3"><button class="c" name="absbutton1" type="submit" accesskey="s"><img src="https://img4.klamm.de/icons/database_edit.png" width="16" height="16" alt="">speichern & aktivieren</button></div>

Wird da jetzt eigentlich der Button geklickt oder das <div>?

Vielleicht ist das <div> die Lösung und meine Rettung?

 

[theHacker]

Jedenfalls klagen einige Eltern (von meinen Schüler/n/innen), dass sie diese Buttons nicht klicken können...und dies ist erst seit ich umgestellt habe vom normalen <input type='submit'> auf diese Button-Sache mit den Bildern...

Das is doch auch richtig so! Von einem

<button [B]type="submit"[/B]>

hab ich noch nie gehört. Die Browser wahrscheinlich auch nicht.

Wenn du ein Formular submitten willst, musst du auch

<[B]input [/B]type="submit">

verwenden.

 

[GatheringXP]

Wenn du ein Formular submitten willst, musst du auch

<[B]input [/B]type="submit">

verwenden.

Muss er das?
https://www.w3schools.com/tags/att_button_type.asp

<div class="centerX buttons mt10 mb3"><button class="c" name="absbutton1" type="submit" accesskey="s"><img src="https://img4.klamm.de/icons/database_edit.png" width="16" height="16" alt="">speichern & aktivieren</button></div>

Wird da jetzt eigentlich der Button geklickt oder das <div>?

Vielleicht ist das <div> die Lösung und meine Rettung?

Es wird der Button geklickt. Vermute ich zumindest, habe mir jetzt nicht den gesamten Klamm-Code durchgeschaut. Wäre zwar möglich einen event listener auf die div zu legen, aber daran glaube ich nicht so wirklich. Nehmen wir also den Button als geklicktes Objekt an, ist einfach wahrscheinlicher

Die Fehlersuche geht also weiter. Für mich aber erst in ein paar Stunden, vielleicht find ich dann ja was. Gute Nacht Community!