nicht angemeldet
Elementmarkierung unschön
0 0 
Gunnar Bittersmann
0
Elementmarkierung unschön
Morgen!
Der Firefox (3.6.3) markiert mir im nachfolgenden Beispiel den Knopf nachdem ich draufklicke mit einem senkrechten Strich in der Mitte. Warum und wie kann ich das abstellen?
------------------------------------------------------------
<html><head><title>Test</title>
<style>
.klappButton {
width:17px; height:17px;
background-image:url(ausklappen.jpg); background-repeat:no-repeat; background-position:center center;
background-color:#FFFFFF;
cursor:pointer;
}
</style>
<script type="text/javascript">
function klapp(button) {
button.style.backgroundImage = "url(einklappen.jpg)";
}
</script>
</head><body>
<button type="button" class="klappButton" onclick="klapp(this);" >
</body></html>
------------------------------------------------------------
Paul
-
Hi,
Der Firefox (3.6.3) markiert mir im nachfolgenden Beispiel den Knopf nachdem ich draufklicke mit einem senkrechten Strich in der Mitte. Warum und wie kann ich das abstellen?
Schritt 1: Validiere den Code.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
@@Paul:
nuqneH
<button type="button" class="klappButton" onclick="klapp(this);" >
Invalides HTML; das
</button>-End-Tag fehlt.Dein 'button'-Element hat keinen Inhalt. Gib ihm mal welchen:
<button type="button" class="klappButton" onclick="klapp(this);">klapp</button>Dann siehst du, dass aus der Linie ein Rechteck wird. Fokussierte Buttons erhalten (wie fokussierte Links auch) 'outline', damit man auch bei Navigation mit anderen Eingabegeräten als der Maus (Tastatur bspw.) sieht, welches Element gerade den Fokus hat.
Darauf sollte man nicht verzicheten.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Invalides HTML; das
</button>-End-Tag fehlt.Das stimmt.
Dein 'button'-Element hat keinen Inhalt.
Stimmt auch. Allerdings bekommt der Button bei mir per css ein backgroundImage. Dann muss ich dieses Image wohl nicht als background sondern als Inhalt des Button setzen. Damit wird das ändern des Bildes aber etwas umständlicher. Vorher hab ich per js einfach den background gewechselt wenn man draufklickt. Jetzt muss ich wohl das child-Element des Buttons ändern.(?)
Paul
-
Mahlzeit Paul,
Dein 'button'-Element hat keinen Inhalt.
Stimmt auch. Allerdings bekommt der Button bei mir per css ein backgroundImage. Dann muss ich dieses Image wohl nicht als background sondern als Inhalt des Button setzen.Nein, solltest Du nicht. Bilder, die allein der Verzierung dienen, sollten immer Hintergrundbilder sein.
Schreib doch stattdessen das in den Inhalt des Buttons, was seiner Bedeutung am nächsten kommt (z.B. "Speichern" o.ä.) und blende diesen Text per CSS aus ... so sehen sehende Leute mit CSS-sprechenden Browsern hübsche Knöpfe und nicht-sehende Leute oder solche mit Browsern, die aus welchen Gründen auch immer kein CSS interpretieren, können mit den Knöpfen trotzdem etwas anfangen.
Außerdem würde sich so Dein vermutetes Problem ...
Damit wird das ändern des Bildes aber etwas umständlicher. Vorher hab ich per js einfach den background gewechselt wenn man draufklickt. Jetzt muss ich wohl das child-Element des Buttons ändern.(?)
... in Wohlgefallen auflösen.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
@@EKKi:
nuqneH
Nein, solltest Du nicht. Bilder, die allein der Verzierung dienen, sollten immer Hintergrundbilder sein.
Wenn das Bild die Funktion des Buttons beschreibt, dient es wohl kaum allein der Verzierung.
Ein 'img'-Element wäre schon angebracht. Mit sinnvollem @alt-Text.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Dann siehst du, dass aus der Linie ein Rechteck wird. Fokussierte Buttons erhalten (wie fokussierte Links auch) 'outline', damit man auch bei Navigation mit anderen Eingabegeräten als der Maus (Tastatur bspw.) sieht, welches Element gerade den Fokus hat.
Darauf sollte man nicht verzicheten.
Wenn man es dennoch los werden will kann man für den Feuerfuchs
outline:0angeben, dadurch haben Elemente mit dem Focus die gepunktete Linie nicht mehr.Ob das schön ist oder nicht, sinnvoll oder nicht, darüber lässt sich natürlich streiten.
--
for your security, this text has been encrypted by ROT13 twice.-
Moin,
wie Du schon sagst ist das nicht besonders benutzerfreundlich. Werd ich also nicht machen aber trotzdem Danke für den Hinweis.
-
-
-
Das Problem ist, dass der Button eine Größe von 17x17 px hat. Damit ist er für den FF zu klein zum ordentlichen markieren und so zeichnet der FF nur eine Linie auf den Knopf wenn dieser den focus hat.
Vergrößert man den Button auf z.B. 20x20 px dann kommt der FF langsam damit klar und fängt an die Markierung auch in die Breite zu ziehen.Paul