nicht angemeldet
Firefox-Prob: Button lässt sich nicht drücken
0 0 0 0 0 0 0 0 0 0 
Der Martin
Firefox-Prob: Button lässt sich nicht drücken
Hi,
Ich werd noch verrückt, da ich es nicht schaffe den Übeltäter auszumachen. Ich verwende XHTML1.0 + CSS. Folgende Problematik: Ich habe einen submit-Button per CSS etwas formatiert: background-color, einen 1px-Rahmen per border und noch eine Höhe von 24 und eine Länge von 98 Pixel. Die Buttons werden in allen aktuellen Browser korrekt dargestellt (IE6, Opera8, Firefox1.04), nur im Firefox verändert sich nicht mehr die Herrabsetzung der Schrift um einen 3D-Drück-Effekt zu simulieren. Die gepunktete Focus-Linie ist da und das Formular kann man auch abschicken. Der Button verhält sich wie ein Bild, also es ändert sich nix wenn man draufklickt. Sind in dieser Richtung mit versch. Code-Konstallationen Probleme bekannt?
eumil
-
Hallo eumil.
Der Button verhält sich wie ein Bild, also es ändert sich nix wenn man draufklickt.
Du hast etwas entsprechendes für
input:active{}definiert?Einen schönen Mittwoch noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Hi,
Du hast etwas entsprechendes für
input:active{}definiert?Nein. Überhaupt muss ich mich bei dir entschuldigen: Das Problem ist behoben (Habe ein padding zuviel definiert). Na wie dem auch sei. Noch etwas das mich wahnsinnig macht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"><head> <title>Button</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> html, body { background-color: #C6E8D3; } .button { background-color: #83CE9E; border-top: 1px solid white; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid white;} </style> </head><body> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><input type="submit" name="submit" value="Abschicken" class="button" /></td> <td valign="top" style="background-image:url(1.gif);"><img src="4.gif" alt="" width="4" height="4" /></td> </tr> <tr> <td valign="top" style="background-image:url(2.gif);"><img src="3.gif" alt="" width="4" height="4" /></td> <td valign="top"><img src="5.gif" alt="" width="4" height="4" /></td> </tr> </table> </body></html>Ich versuche per Tabelle um einen Button einen Schatten aufzubauen (Technik ist ja allseits bekannt). Soweit so gut. Nur stellt Opera & Firefox das ganze Konstrukt nicht richtig (besser: anders) dar.
So solls sein (Ansicht IE):
So siehts im Opera & FF aus:
Laut W3C-Validator ist das Dokument valide.
So, entweder bin ich zu blöd um das Problem zu sehen, oder es ist tatsächlich ein Bug.
Danke euch!
eumil-
Hallo eumil.
Ich versuche per Tabelle um einen Button einen Schatten aufzubauen (Technik ist ja allseits bekannt).
Nein, mir nicht. Ich würde--wenn der Schatteneffekt unbedingt sein muss--ein span-Element um das input-Element packen.
Die Tabelle ist hier absolut sinnfrei.So solls sein (Ansicht IE):
Tut mir leid, aber bei mir sieht die Ansicht im IE, FF und Opera (fast) identisch aus.
Und in keinem wird ein Schatten erzeugt. Lade am Besten ein Beispieldokument hoch und verlinke es.So siehts im Opera & FF aus:
Da ich vermute, dass du mit dem
background-image:url(2.gif);den Schatten erzeugst, kann ich dir hier nicht viel weiterhelfen.Warum erzeugst du den Schatten nicht mit der border-Eigenschaft? (Siehe hierzu auch meinen span-Tipp oben.)
Einen schönen Mittwoch noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Hi,
Nein, mir nicht. Ich würde--wenn der Schatteneffekt unbedingt sein muss--ein span-Element um das input-Element packen.
Das ist aber nicht so flexibel. Ich will z.B. die Buttongröße jederzeit ändern können. So passt sich dann der Schatten immer an. Mit border ist ein weicher Schatten nicht möglich:
Und mit span? Als ich kann mir nicht vorstellen dass das mit einem einzigen span möglich wäre. Und wenn ich mehrere nehme, ist das fast genauso verzwickt (= unübersichtlich) wie mit der Tabelle.
Und in keinem wird ein Schatten erzeugt. Lade am Besten ein Beispieldokument hoch und verlinke es.
Sehr gerne. Weißt du wo man HTML-Seiten kostenlos hosten kann (also sowas wie imageshack.us). Die Bilder kann ich dann absolut über imageshack verlinken. Leider habe ich derzeit keinen eigenen Webspace und anmelden für einen kostenlosen möchte ich mich deswegen nicht unbedingt.
Da ich vermute, dass du mit dem
background-image:url(2.gif);den Schatten erzeugstJa, das stimmt natürlich.
eumil
-
Hallo eumil.
Das ist aber nicht so flexibel. Ich will z.B. die Buttongröße jederzeit ändern können. So passt sich dann der Schatten immer an.
Der Schatten passt sich an? Ein Bild?
Mit border ist ein weicher Schatten nicht möglich:
Nein, natürlich nicht. Doch könntest du dem span das Hintergrundbild verpassen.
Und mit span? Als ich kann mir nicht vorstellen dass das mit einem einzigen span möglich wäre.
Was mir vorschwebte:
span{border-right:2px solid #333;border-bottom:2px solid #333;}
Da du aber einen weichen Schatten möchtest, fällt dies weg.
Sehr gerne. Weißt du wo man HTML-Seiten kostenlos hosten kann (also sowas wie imageshack.us).
Hierfür gibt es genügend Abieter. Such' dir einen aus.
Leider habe ich derzeit keinen eigenen Webspace und anmelden für einen kostenlosen möchte ich mich deswegen nicht unbedingt.
Warum nicht? Früher oder später brauchst du sowieso Webspace, wenn du nicht gerade einen eigenen Server betreiben möchtest.
Einen schönen Mittwoch noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Hi,
Der Schatten passt sich an? Ein Bild?
Nein, es sind 5 Bilder. ;)
Nein, natürlich nicht. Doch könntest du dem span das Hintergrundbild verpassen.
Stimmt, allerdings nur 1 Bild, welches ja eine feste Größe hat.
Was mir vorschwebte:
span{border-right:2px solid #333;border-bottom:2px solid #333;}
Da du aber einen weichen Schatten möchtest, fällt dies weg.
Genau.
Warum nicht? Früher oder später brauchst du sowieso Webspace, wenn du nicht gerade einen eigenen Server betreiben möchtest.
Richtig, ich bin aber noch am Suchen nach nem guten Anbieter. Ich war früher bei Hosteurope, aber die haben sich sehr verschlechtert. Ich hab mich schnell bei ohost angemeldet. Guck mal:
http://self.se.ohost.de/
eumil
-
Hallo eumil.
Richtig, ich bin aber noch am Suchen nach nem guten Anbieter. Ich war früher bei Hosteurope, aber die haben sich sehr verschlechtert. Ich hab mich schnell bei ohost angemeldet.
Geht doch. ;-)
Guck mal:
Ich denke, du musst im Prinzip nur das Beispiel für abgerundete Ecken (Es gibt noch mehr.) etwas umstricken, damit es in allen mehr oder weniger modernen Browsern funktioniert.
Einen schönen Mittwoch noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Hi,
Ich denke, du musst im Prinzip nur das Beispiel für abgerundete Ecken (Es gibt noch mehr.) etwas umstricken, damit es in allen mehr oder weniger modernen Browsern funktioniert.
Diese Möglichkeit mit CSS ist mir bekannt, ich hab hier aber von Anfang an eine Tabelle benutzt, bei der sich einige merkwürdige Problem auf tun.
Hier der Button im Benutzermodus von Opera:
Wieso ist die Zelle unter dem Button so groß? Warum sind die kleinen Eckbilder nicht oben (valign=top ist ja definiert)? Der Code ist doch fehlerfrei?! Ich verstehe das einfach nicht und möchte das erstmal gelöst haben. Vor Problemen weglaufen mache ich nicht besonders gern. ;)
Also mit CSS werde ich das auf jeden Fall auch mal probieren, dafür möchte ich dir auch danken. :)
Bis dann, eumil
-
Hallo eumil.
Hier der Button im Benutzermodus von Opera:
Wieso ist die Zelle unter dem Button so groß? Warum sind die kleinen Eckbilder nicht oben (valign=top ist ja definiert)?
Ich vermute, dass der Platz für die Unterlängen der Buchstaben (j, g, p, ...) reserviert wird. (Aber warum gleich so viel, ist mir momentan schleierhaft.)
Der Code ist doch fehlerfrei?! Ich verstehe das einfach nicht und möchte das erstmal gelöst haben. Vor Problemen weglaufen mache ich nicht besonders gern. ;)
Zumindest die mehrmaligen Wiederholungen könntest du mit background-repeat unterbinden.
Einen schönen Mittwoch noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Hi,
Ich vermute, dass der Platz für die Unterlängen der Buchstaben (j, g, p, ...) reserviert wird.
Kann ich mir nicht vorstellen. Das würde auch meinen ganzen Erfahrungen in Sachen Tabellen widersprechen. Die Tabelle müsste sich den Elementen anpassen. D. h. die Zelle mit dem Button so groß wie der Button (ist ja auch der Fall), die Zeile unten 4 Pixel hoch und die rechte Spalte ebenfalls 4 Pixel breit. Allerdings ist da noch das Problem mit den Eckgrafiken, die einfach nicht oben sind (trotz valign=top).
Sowas Merkwürdiges ist mir bis jetzt noch untergekommen...
(Aber warum gleich so viel, ist mir momentan schleierhaft.)
Solltest du in dieser Richtung etwas hören oder sollte es dir doch einfallen, bitte unbedingt schreiben (ich behalten den Thread noch ne Weile im Auge).
Zumindest die mehrmaligen Wiederholungen könntest du mit background-repeat unterbinden.
Schon geschehen. Leider bleibt die untere Zelle immer noch so hoch. Na jedenfalls ist die aktuallisierte Version der HTML-Datei online, so kannst du jederzeit reingucken.
Danke für deine ganzen Antworten!
eumil
-
Hallo alle zusammen,
es ist geschafft: Endlich funktionierts. Das Problem waren die Bilder in den Tabellenzellen. Tja, wer hätte das gedacht? Ich verstehe es trotzdem immer noch nicht...
Also, hier endlich die Buttons mit schönen weichen Schatten. Habe zwei Beispiele gemacht:
Ich lass das eine Zeit lang auf dem Server, vielleicht kann es ja jemand gebrauchen.
Viel Spaß!
eumil
-
Hallo eumil.
Es sieht zwar recht schick aus, ist aber aufgrund des Tabellenmissbrauchs für mich nicht brauchbar.
Naja, warte ich eben auf CSS4. ;-)
Einen schönen Donnerstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Hi Ashura,
Es sieht zwar recht schick aus, ist aber aufgrund des Tabellenmissbrauchs für mich nicht brauchbar. Naja, warte ich eben auf CSS4. ;-)
Ich glaube das brauchst du nicht. ;)
Wie versprochen habe ich das Ganze nun auch in CSS nachgebaut. Hat mich zwar einige Nerven gekostet, aber es ist vollbracht:
http://self.se.ohost.de/divschatten/
Bis dann,
eumil ^^
-
-
-
-
Hallo Freunde,
Hier der Button im Benutzermodus von Opera:
Wenn der Button bei euch auch so aussieht wie bei mir (61k PNG), dann würde ich dem Provider schleunigst wieder einen Tritt in den Hintern verpassen.
Der "Schutz" von Inhalten durch Referrer-Auswertung ist meiner Ansicht nach so ziemlich das letzte, was ein seriöser Webspace-Anbieter tun sollte.So long,
Martin
-
Hallo Martin,
schuligung, hab das ganz vergessen. Hier bitteschön:
eumil
-
-
-
-
-
-
-
-
-
