Breite von Submit-Button bei Verwendung von "border"

[gooxsy]

Hi,

wenn in einem Formular sowohl die Input-Felder, als auch die Textareas und der Submit-Bottom uA. ein display:block;, ein width:40em; und ein border:none; bekommen, dann sind sie wirklich _pixelgenau_ alle gleich breit.

Sobald man jetzt genannten 3 Elementen zB. ein border:1px solid blue; gibt, ist die Breite des Submit-Buttons im Firefox (Firefox Portable, Version 2.0.0.14) plötzlich um exakt 2px _kleiner_.

Ist das bekannt? Gibt es Lösungswege, um auch _mit_ einer Borderangabe sowohl die Inputfelder, als auch die Textarea _und_ den Submit-Button _gleich_ breit hinzubekommen?

2 Stunden Googeln hat mir nicht weitergeholfen.

mfG

gooxsy

[gooxsy]

Hi,

ich habe mein Problem zwischenzeitlich selbst gelöst, in dem ich erstmals labels und input-Felder seperat in ein div gegeben habe, was auch den Vorteil hat, daß der html-Quelltext sich jetzt für die verschiedensten Layouts anbietet.

Das, was ich jedenfalls wollte, nämlich _exakt gleich breite_ Input-Felder, Textareas _und_ Buttons, habe ich erreicht. Und es ist glaub ich ganz gut gelungen.

mfG

gooxsy

PS: Daß das Ganze auch noch valide ist und aufgrund der Verwendung realtiver Längenangaben _völlig frei_ skalierbar ist, brauch ich ja nicht extra erwähnen. ;-)

[Malcolm Beck´s]

hi,

Das, was ich jedenfalls wollte, nämlich _exakt gleich breite_ Input-Felder, Textareas _und_ Buttons, habe ich erreicht. Und es ist glaub ich ganz gut gelungen.

Das sieht schon ganz gut aus, aber...
eine Divsuppe hättest du wirklich nicht gebraucht.
Ich hab mir auch meine Gedanken zu einem Flexiblen Formular gemacht, bin dann über diesen Artikel gestolpert und habe mir im Anschluss darauf dieses Formular gebaut.

Mein beispiel ist zwar fix, wenn man aber die breitenangabe vom umschließenden fieldset entfernt ist es vollkommen Flexibel.

Achja, Valide ist es eh. :)

grüße

[gooxsy]

Hi Malcolm,

eine Divsuppe hättest du wirklich nicht gebraucht.

Also unter einer "Divsuppe" verstehe ich ein Konstrukt, wo 4, 5 oder mehr divs ineinander verstrickt sind. Bei meiner Seite ist es _1_ div pro label und _1_ div pro input-Feld. Und diese 2 divs sind nichtmal ineinander verstrickt. Ich würde das also noch nicht als "Divsuppe" bezeichnen. Wenn Du Dir den Quellcode meiner Seite ansiehst, ist er wirklich schön schlank.

Mein beispiel ist zwar fix, wenn man aber die breitenangabe vom umschließenden fieldset entfernt ist es vollkommen Flexibel.

Also versuch mal ein Formular _ohne_ divs mit CSS so auszurichten, daß IE, Opera und Firefox für Input-Felder, Textarea _und_ Sendebuttons die _gleiche_ Breite haben. Das ist ein Ding der Unmöglichkeit.

Bin übrigens grad draufgekommen, daß ich mein Ziel eh nicht erreicht habe. Im Opera sind die Buttons bei meinem Beispiel jetzt wieder zu lang. :-(

Achja, Valide ist es eh. :)

_Das_ hätte ich _nie_ bezweifelt. :-)

mfG

gooxsy

[ChrisB]

Hi,

eine Divsuppe hättest du wirklich nicht gebraucht.

Also unter einer "Divsuppe" verstehe ich ein Konstrukt, wo 4, 5 oder mehr divs ineinander verstrickt sind.

Ich verstehe unter Div-Suppe jeden Fall von "x Divs mehr als notwendig", mit x >= 1.

Bei meiner Seite ist es _1_ div pro label und _1_ div pro input-Feld.

Labels um Formularfelder legen, Labels entsprechend formatieren - fertig, Divs gespart.

MfG ChrisB

[gooxsy]

Hi Chris,

Ich verstehe unter Div-Suppe jeden Fall von "x Divs mehr als notwendig", mit x >= 1.

OK, das ist eine gute Definition und ich brandmarke somit meinen Code als Div-Suppe. Die Frage ist halt, wie ich schon an anderer Stelle in diesem Thread gesagt habe, ob das, was ich erreichen will, gleich breite Inputs, Textareas und Buttons in IE, Opera und Firefox, wirklich ohne divs machbar ist.

Labels um Formularfelder legen, Labels entsprechend formatieren - fertig, Divs gespart.

Mein Formular _hat_ Labels.

mfG

gooxsy

[Malcolm Beck´s]

hi,

Labels um Formularfelder legen, Labels entsprechend formatieren - fertig, Divs gespart.

Mein Formular _hat_ Labels.

Deiner Antwort fehlt "entsprechend formatiert" - siehe oben mein Posting.

grüße

[gooxsy]

Hi Malcolm,

_ein mal_ hab ich es noch versucht und jetzt nach 3 Stunden den heiligen Gral gefunden.

Ein valides xhtml 1.0 strict Formular, zunächst ohne ein einziges div und ein einziges span. Nichts. Und dazu kommt _ein_ div. Mit etwas CSS-Spielerei ist es jetzt möglich: Inputs, Textareas _und_ die Buttons sind _pixelgenau_ gleich breit bei Verwendung von em als Längenangabe. Und das im IE, im Firefox _und_ im Opera!

Also es geht. Ich verrate Dir hier morgen die Lösung. Samt Onlinepeisiel und der Technik dahinter. Aber vielleicht kommst Du ja auch drauf bis morgen! Achtung ... Zeit rennt ... ab JETZT! :-)

mfG

gooxsy

[gooxsy]

Hi Malcolm,

hier also, wie gestern schon angekündigt, der heilige Gral:

Ich beschreibe jetzt Schritt für Schritt (mit jeweiligem Onlinebeispiel) den Weg zur Lösung:

Ich fange damit an, daß ich ein Formular entwickle, das eine valide xhtml 1.0 strict Datei ergibt. Ohne divs und ohne spans bei den Formularbestandteilen. Die einzigen "Besonderheiten" sind, daß 2 Pflichtfelder eine eigene Spanklasse zur späteren farblichen Formatierzung bekommen, der Absendebutton erhält außerdem die Klasse "button". Das ergibt dann Formular 1. Noch völlig _ohne_ CSS.

Ich verändere den Quellcode der Datei jetzt nicht mehr und füge eine seperate CSS-Datei hinzu, bei der ich alle Initialwerte auf 0 stelle, dem div, in dem das Formular ist, eine Breite gebe, den Inputs, der Textarea und der Klasse "button" eine Breite von 100% gebe (Das Formular ist das Elternelement), sie als Block darstellen lasse und ihnen ein border:none auf den Weg mitgebe. Fieldset und legend lasse ich ausblenden und jetzt färbe ich (zunächst mal) das komplette Formular grün und die 3 genannten Elemente orange ein, um eine weitere Analyse leichter zu machen. Es entsteht Formular 2.

Wie man sieht, sind die Inputs, die Textarea und der Button (orange) jetzt wirklich _pixelgenau_ gleich breit. Zunächst mal zumindestens. Denn jetzt kommt das, was ich in meiner Ursprungsfrage beschrieben habe. Ich verpasse den genannten 3 Elementen jetzt ein Border mit 1 Pixel Breite und (zur leichteren Analyse) färbe den blau ein. Es entsteht Formular 3 mit dem von mir beschriebenen Phänomen. Im Opera und im IE machen jetzt die Inputs und die Textarea noch immer 100% der Formularbreite aus, aber der Button ist kürzer. Im Firefox ist es genau umgekehrt. Der Button ist jetzt genau so breit wie die Breite des Formulars, dafür ragen aber alle Inputs und die Textarea rechts etwas aus dem Formular heraus, sind also breiter als die Formularbreite. In allen 3 genannten Browsern ist der Unterschied aber jeweils 2 Pixel.

Hier bin ich jetzt also 3 Tage gescheitert. Und gestern plötzlich fand ich den heiligen Gral, einen Workaround für _alle 3_ genannten Browser.

Mir ist nämlich _noch_ etwas aufgefallen beim Herumspielen: Wenn man jetzt genannten 3 Elementen ein Padding von 1 Pixel auf den Weg mitgibt (es entsteht Formular 4) dann _verstärken_ sich diese Effekte. Die Pixelunterschiede in allen 3 Browsern sind jetzt 4 Pixel. Und verändert man die Paddingangabe auf 3 Pixel (es entsteht Formular 5), dann ist der Unterschied 8 Pixel. Und schon erkennt man die mathematische Logik, die hinter dem Darstellungsfehler steckt. Egal, ob jetzt der Button zu schmal oder die Inputs und Textarea zu breit sind, der Breitenunterschied bei einem Padding von x Pixeln ist _immer_ 2*x+2. Es stellt sich also als nächstes die Frage, wie man diesem Unterschied jetzt entgegenwirken kann. Und jetzt kommt der Clou: Ich verändere den Quellcode und platziere _ein_ div _in_ das Formular. Und zwar kommt in dieses div der komplette Formularinalt _ausser_ dem Button. Dieses div bekommt die Klasse "gleichebreite". Und dieser Klasse weise ich die Eigenschaft padding-right zu. Und zwar genau so viele Pixel, wie wir Größenunterschied haben. In diesem Fall haben wir ein padding von 3 Pixel, ergo einen Unterschied von 8 pixel, ergo bekommt die Klasse "gleichebreite" jetzt ein padding-right:8px und wir bekommen Formular 6.

Und siehe da: In _allen 3_ Browsern sind jetzt die Inputs, die Textarea _und_ der Button _pixelgenau_ gleich breit. Im Firefox füllen jetzt alle 3 Elemente die Breite des Formulars aus, im IE und im Opera sind jetzt alle Elemente _gleich_ schmäler als das Formular. Das stört aber nicht, man kann die Farbe des Formulars ja aufheben und könnte, wenn man das Formular hervorheben will, ja das div nehmen, in dem das Formular liegt.

So, und wenn wir jetzt die häßlichen Farben, mit denen ich analysiert habe, weggeben und das CSS noch erweitern mit Schriftangeben, Angaben für obere und untere Abstände im Formular, Farben, Hintergrund, etc. - dann bekommt man endlich das, was ich von Anfang an wollte. Hier ist das Ergebnis.

Inputs, Textarea _und_ der Button sind _pixelgenau_ _gleich_ breit, und das im IE, im Firefox _und_ im Opera. _Und_ das Ganze ist auch noch flexibel skalierbar, da ich nur realative Längenangaben benutzt habe.

mfG

gooxsy

[Malcolm Beck´s]

hi gooxsy,

Also es geht. Ich verrate Dir hier morgen die Lösung. Samt Onlinepeisiel und der Technik dahinter. Aber vielleicht kommst Du ja auch drauf bis morgen! Achtung ... Zeit rennt ... ab JETZT! :-)

Ich hab doch gar keine Zeit, kann also nichts rennen.  ;-)

hier also, wie gestern schon angekündigt, der heilige Gral:

Schönes beispiel. Ich hätte es natürlich schöner gemacht aber das ist auch ganz Ok. ;)
Ich hätte es z.b. _ohne_ <br /> gemacht, gerade im Sommer, ist doch gar nicht so Kalt. :)

nur Spaß! Gute arbeit.

grüße

[Malcolm Beck´s]

hi gooxsy,

Also unter einer "Divsuppe" verstehe ich ein Konstrukt, wo 4, 5 oder mehr divs ineinander verstrickt sind. Bei meiner Seite ist es _1_ div pro label und _1_ div pro input-Feld. Und diese 2 divs sind nichtmal ineinander verstrickt. Ich würde das also noch nicht als "Divsuppe" bezeichnen. Wenn Du Dir den Quellcode meiner Seite ansiehst, ist er wirklich schön schlank.

Oioi, das es jeweils ein div für label _und_ input ist hatte ich gar nicht gesehen. :)
Was du dort hast ist Quasi eine Tabelle nur mit divs, das schimpft sich leider Divsuppe. :(
Du hast aber mein Post falsch verstanden, ich wollte dich nur drauf aufmerksam machen, das es nicht zwangsläufig ein div sein muss, nur um das Blockverhalten zu seinen Gunsten zu nutzen.
Sieh dir mein beispiel an und hover beispielsweise die Label über die Gesamte länge.

Lass uns vergleichen:

Dein HTML

<div class="labels">  
<label for="name">Name:</label>  
</div>  
<div class="inputs">  
<input type="text" size="40" maxlength="40" id="name" name="name" tabindex="1" />  
</div>

Meine 2 cent

<span>  /* Die span sind auf display: block; gesetzt */  
<label for="a_name">Name</label>  /* Die label sind auch auf display: block; gesetzt */  
<input type="text" name="Name" id="a_name" class="input_text_klasse"  value="" />  
</span>

Wobei ich mit ein bisschen Zeitaufwand sogar auf die Klasse im input verzichten könnte.
Was du letztendlich machst bleibt ja eh dir überlassen, ich wollte es nur mal erwähnt haben. :)

Also versuch mal ein Formular _ohne_ divs mit CSS so auszurichten, daß IE, Opera und Firefox für Input-Felder, Textarea _und_ Sendebuttons die _gleiche_ Breite haben. Das ist ein Ding der Unmöglichkeit.

Nein, wie Toyota immer zu pflegen sagt: Nichts ist unmöglich.
Mit ein bisschen frickelei und miesen Tricks(http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow:hidden; für das absende Button) könnte man auch das Gewünschte aussehen erreichen.

http://start-navi.de/beispiele/kontakt-1.php nicht wie gewünscht aber nah dran. :)

Bin übrigens grad draufgekommen, daß ich mein Ziel eh nicht erreicht habe. Im Opera sind die Buttons bei meinem Beispiel jetzt wieder zu lang. :-(

Ja, Opera macht mir auch des öfteren zu schaffen.
Lösung: absende Button und Vorschau Button nebeneinander legen.

Achja, Valide ist es eh. :)
_Das_ hätte ich _nie_ bezweifelt. :-)

Damit war zu rechnen. :)

grüße

[gooxsy]

Hi Malcolm,

Oioi, das es jeweils ein div für label _und_ input ist hatte ich gar nicht gesehen. :)
Was du dort hast ist Quasi eine Tabelle nur mit divs, das schimpft sich leider Divsuppe. :(

hm, also würdest Du mein html der entsprechenden Seite nur als _umständlich_ bezeichnen, oder als _schlecht_?

Du hast aber mein Post falsch verstanden, ich wollte dich nur drauf aufmerksam machen, das es nicht zwangsläufig ein div sein muss, nur um das Blockverhalten zu seinen Gunsten zu nutzen.

Wie gesagt, ich mache ein Formular im Normalfall natürlich auch _ohne_ divs, aber es ging mir einfach darum, zu erreichen, daß genannte 3 Elemente in genannten 3 Browsern _pixelgenau_ gleich breit sind. Und das bei Verwendung von relativen Längenangaben, damit das Ganze auch noch skalierbar ist. Ich fand ohne divs einfach keine passende Lösung.

Sieh dir mein beispiel an

<span>  /* Die span sind auf display: block; gesetzt */

<label for="a_name">Name</label>  /* Die label sind auch auf display: block; gesetzt */
<input type="text" name="Name" id="a_name" class="input_text_klasse"  value="" />
</span>

  
Also eine span-Suppe schmeckt besser als eine div-Suppe?  
  

> Was du letztendlich machst bleibt ja eh dir überlassen, ich wollte es nur mal erwähnt haben. :)  
  
Wenn mir jemand zeigt, daß er mein Ziel \_ohne\_ Verwendung von divs, spans und Tabellen erreicht, bin ich Allem gegenüber aufgeschlossen und werde \_nie wieder\_ was sagen. :-)  
  

> Nein, wie Toyota immer zu pflegen sagt: Nichts ist unmöglich.  
  
Das stimmt nicht \_ganz\_. Die Blonde gestern Abend an der Bar zB. war einfach nicht zu knacken.  
  

> Ja, Opera macht mir auch des öfteren zu schaffen.  
> Lösung: absende Button und Vorschau Button nebeneinander legen.  
  
Das ist, wie gesagt, nicht mein Ziel, abgesehen davon finde ich das aber prinzipiell eine sehr gute Idee, da das dann optisch auch wie aus einem Guß aussieht und wie groß der Abstand zwischen den Buttons ist, ist ja egal. Man müßte die Buttons praktisch nur nach links und rechts floaten. Sehr nett!  
  
mfG  
  
gooxsy  

-- 
[SELFCODE:](http://community.de.selfhtml.org/fanprojekte/selfcode.htm) [sh:( fo:| ch:? rl:° br:& n4:? ie:% mo:) va:} de:> zu:) fl:( ss:( ls:& js:{](http://www.peter.in-berlin.de/projekte/selfcode/?code=sh%3A%28+fo%3A%7C+ch%3A%3F+rl%3A%B0+br%3A%26+n4%3A%3F+ie%3A%25+mo%3A%29+va%3A%7D+de%3A%3E+zu%3A%29+fl%3A%28+ss%3A%28+ls%3A%26+js%3A%7B)

[Malcolm Beck´s]

hi gooxsy,

hm, also würdest Du mein html der entsprechenden Seite nur als _umständlich_ bezeichnen, oder als _schlecht_?

Wenn ich dir damit nicht zu nahe trete dann Ja. :)
Ich weiss nicht wie Fit du in CSS und HTML bist, aber nahezu alles mit div zu bauen, nur weil es gerade "geeignet" scheint ist kein schöner Stil.
Stichwort Semantisches Web

Wie gesagt, ich mache ein Formular im Normalfall natürlich auch _ohne_ divs, aber es ging mir einfach darum, zu erreichen, daß genannte 3 Elemente in genannten 3 Browsern _pixelgenau_ gleich breit sind. Und das bei Verwendung von relativen Längenangaben, damit das Ganze auch noch skalierbar ist. Ich fand ohne divs einfach keine passende Lösung.

Deshalb habe ich mich auch hier eingeklinkt, <div> ist ein Block Element, darum lässt es sich Wunderbar Formatieren, das heißt aber nicht, das überall, wo man Kleinigkeiten Formatieren möchte Divwüsten angebracht sind.

<span>

</span>

> Also eine span-Suppe schmeckt besser als eine div-Suppe?  
  
Ja. Der unterschied zwischen div und span ist der, div ist ein Element, mit dessen hilfe man Gruppierungen von Elementen zusammenfassen kann, z. B. 4 Textabsätze in der Form <p></p>, hier würde sich ein div eignen, um das zu Gruppieren, siehe [Allgemeines Block-Element](http://de.selfhtml.org/html/text/bereiche.htm#block), span hingegen ist ein inline Element, ähnlich wie <a href und kann auch dementsprechend eingesetzt werden, siehe [ Allgemeines Inline-Element](http://de.selfhtml.org/html/text/bereiche.htm#inline).  
  

> Wenn mir jemand zeigt, daß er mein Ziel \_ohne\_ Verwendung von divs, spans und Tabellen erreicht, bin ich Allem gegenüber aufgeschlossen und werde \_nie wieder\_ was sagen. :-)  
  
<http://start-navi.de/beispiele/kontakt-2.php>  
Kannst aber gerne weiter reden, ist in Ordnung. Und wenn du mir jetzt den CSS Valligator auf den Hals hetzt war das mein letztes beispiel!   :)  
  

> Das stimmt nicht \_ganz\_. Die Blonde gestern Abend an der Bar zB. war einfach nicht zu knacken.  
  
Dann fehlt dir das richtige Werkzeug.  
  

> Das ist, wie gesagt, nicht mein Ziel, abgesehen davon finde ich das aber prinzipiell eine sehr gute Idee, da das dann optisch auch wie aus einem Guß aussieht und wie groß der Abstand zwischen den Buttons ist, ist ja egal. Man müßte die Buttons praktisch nur nach links und rechts floaten. Sehr nett!  
  
Was ich schöner finde sind zwei Buttons, die einfach nebeneinander liegen, siehe [hier](http://start-navi.de/beispiele/kontakt.php), Pflichtfelder ausfüllen und Vorschau klicken.  
  
grüße  

-- 
[I have a Dream...](http://www.myvideo.de/watch/2503116/I_have_a_dream_Will_I_AM_feat_Common)  
  
Bugs erzeugen gegenbugs.  
Wir müssen Bugs mit Bugs bekämpfen!

[gooxsy]

Hi Malcolm,

hm, also würdest Du mein html der entsprechenden Seite nur als _umständlich_ bezeichnen, oder als _schlecht_?
Wenn ich dir damit nicht zu nahe trete dann Ja. :)

ist schon in Ordnung. Aber was ja? Umständlich oder schlecht? Nun ja, umständlich ist ja auch schlecht. OK, ziehe die Frage zurück. :-)

Ich weiss nicht wie Fit du in CSS und HTML bist

Also _das_ ist ja direkt eine Beleidigung.

aber nahezu alles mit div zu bauen, nur weil es gerade "geeignet" scheint ist kein schöner Stil.

Ich möchte _nochmals_ betonen, daß ich das in _diesem Fall_ so gemacht habe, weil ich der Meinung war, ich kann mein gewünschtes Design nicht anders verwirklichen.

Stichwort Semantisches Web

Wie gesagt. Ich weiß, was das ist. Meine Lieblingsseite diesbezüglich ist übrigens der entsprechende Artikel auf Vorsprung durch Webstandards.

<div> ist ein Block Element

Ich habe wohl wirklich den Eindruck erweckt, völlig inkompetent zu sein. :-(

Also eine span-Suppe schmeckt besser als eine div-Suppe?
Ja.

Ich werde mich mit Deiner Argumentation auseinandersetzen.

Wenn mir jemand zeigt, daß er mein Ziel _ohne_ Verwendung von divs, spans und Tabellen erreicht, bin ich Allem gegenüber aufgeschlossen und werde _nie wieder_ was sagen. :-)
http://start-navi.de/beispiele/kontakt-2.php

Das werde ich mir sofort ansehen!

Kannst aber gerne weiter reden, ist in Ordnung.

Danke. :-)

Und wenn du mir jetzt den CSS Valligator auf den Hals hetzt war das mein letztes beispiel!   :)

Ich komme mit ganz anderen Mitteln. Ich rufe einfach meinen Freund Guiseppe in Palermo an. Der regelt alles für mich.

Das stimmt nicht _ganz_. Die Blonde gestern Abend an der Bar zB. war einfach nicht zu knacken.
Dann fehlt dir das richtige Werkzeug.

Offensichtlich. Vielleicht steht die Blonde, die ich gestern angequatscht habe, ja nur auf Standardtypen. Und wenn _ich_ eine Frau anspreche, ist das _immer_ im Quirks-Modus.

Was ich schöner finde sind zwei Buttons, die einfach nebeneinander liegen, siehe hier, Pflichtfelder ausfüllen und Vorschau klicken.

Hab ich gemacht. Gefällt mir auch.

Sag mal, kannst Du vielleicht den php-Code der beiden Beispiele posten bitte? Ich würde gerne sehen, wie _Du_ das löst mit Vorschau, Absenden, etc. - da ich mit Ähnlichem gerade herumexperimentiere. Ich nehme an, die 2 Seiten sind von Dir, oder?

mfG

gooxsy

[Malcolm Beck´s]

hi gooxsy,

ist schon in Ordnung. Aber was ja? Umständlich oder schlecht? Nun ja, umständlich ist ja auch schlecht. OK, ziehe die Frage zurück. :-)

trotzdem kriegste Antwort, Ja weil Divsuppe. Ansonsten sieht dein HTML ganz Ordentlich aus.

Ich weiss nicht wie Fit du in CSS und HTML bist
Also _das_ ist ja direkt eine Beleidigung.

oO So war das aber nicht gemeint.

Ich möchte _nochmals_ betonen, daß ich das in _diesem Fall_ so gemacht habe, weil ich der Meinung war, ich kann mein gewünschtes Design nicht anders verwirklichen.

Genau da drängte sich mir die frage auf, wie Fit du bist.
Du kannst ja wie in meinen beispielen zu sehen, <span> auf Block setzen und hast dann "inline Block" und keine Divwüste.

Wie gesagt. Ich weiß, was das ist. Meine Lieblingsseite diesbezüglich ist übrigens der entsprechende Artikel auf Vorsprung durch Webstandards.
Ich habe wohl wirklich den Eindruck erweckt, völlig inkompetent zu sein.

Hast du gerade wieder wett gemacht. :)

Ich werde mich mit Deiner Argumentation auseinandersetzen.

Es geht nicht mal um "meine" Argumentation, siehe hier.

Das werde ich mir sofort ansehen!

Über Feedback wäre ich erfreut.

Ich komme mit ganz anderen Mitteln. Ich rufe einfach meinen Freund Guiseppe in Palermo an. Der regelt alles für mich.

Der Guiseppe? etwa 160 - 180cm, hellbraun - Schwarze Haare, Braun gebrannt aus Palermo?

Offensichtlich. Vielleicht steht die Blonde, die ich gestern angequatscht habe, ja nur auf Standardtypen. Und wenn _ich_ eine Frau anspreche, ist das _immer_ im Quirks-Modus.

Das ist Murks, Frauen stehen in der Regel[1] auf valide, Funktionstüchtige Männer. :)

Sag mal, kannst Du vielleicht den php-Code der beiden Beispiele posten bitte? Ich würde gerne sehen, wie _Du_ das löst mit Vorschau, Absenden, etc. - da ich mit Ähnlichem gerade herumexperimentiere. Ich nehme an, die 2 Seiten sind von Dir, oder?

Also das erste voll funktionstüchtige Script ist eine Katastrophe, ich bau gerade ein neues mit der Function Methode von PHP, das wird aber dauern bis das fertig ist, dafür wird es aber richtig schön. :)
Was ich hab kannst du gerne haben, ich übernehme aber keine Haftung. :)

http://start-navi.de/beispiele/kontakt-or.txt
http://start-navi.de/beispiele/newform.css die dazugehörige CSS
http://start-navi.de/beispiele/kontakt.php im Einsatz

grüße
[1] also nicht während der Tage sondern in der Regel :)

[gooxsy]

Hi,

so, nachdem ich jetzt 5 Stunden meines Lebens vergeudet habe, bleibe ich dabei:

Es ist _nicht_ möglich, ein _valides_ xhtml 1.0 strict Formular _ohne_ divs bzw. _ohne_ spans so mit _validem_ CSS zu formatieren, daß Inputfelder, Textareas und vorallem auch der Absendebutton im IE, im Firefox _und_ im Opera _pixelgenau_ gleich breit sind _und_ dabei _nur_ "em" als Breiten- / Längenangabe verwendet werden darf.

Will man dies erreichen, _muss_ man auf divs bzw. spans zurückgreifen. Doch egal ob mit spans oder divs, ich schaffe es selbst _mit_ genannten Erweiterungen des Quellcodes nicht. :-(

Und ich gebs jetzt auf. Sollte jemand eine Lösung wissen, würd es mich glücklich machen, ansonsten hau ich jetzt den Hut drauf.

gooxsy

[Malcolm Beck´s]

hi,

Es ist _nicht_ möglich, ein _valides_ xhtml 1.0 strict Formular _ohne_ divs bzw. _ohne_ spans so mit _validem_ CSS zu formatieren, daß Inputfelder, Textareas und vorallem auch der Absendebutton im IE, im Firefox _und_ im Opera _pixelgenau_ gleich breit sind _und_ dabei _nur_ "em" als Breiten- / Längenangabe verwendet werden darf.

Das ist halt so ne Sache wenn man mit Relativen Maßeinheiten Pixelgenaue Darstellungen erzielen möchte.
Was ich mich gerade frage, warum nur em? Mein beispiel skaliert doch Wunderbar.

Will man dies erreichen, _muss_ man auf divs bzw. spans zurückgreifen. Doch egal ob mit spans oder divs, ich schaffe es selbst _mit_ genannten Erweiterungen des Quellcodes nicht. :-(

Du möchtest mit relativen Masseinheiten Pixelgenaue Darstellung erzwingen, das bringt natürlich Nachteile mit sich.

Und ich gebs jetzt auf. Sollte jemand eine Lösung wissen, würd es mich glücklich machen, ansonsten hau ich jetzt den Hut drauf.

Ich bin mit meinem Latein am Ende.

grüße

[at]

Hallo.

Es ist _nicht_ möglich, ein _valides_ xhtml 1.0 strict Formular _ohne_ divs bzw. _ohne_ spans so mit _validem_ CSS zu formatieren, daß Inputfelder, Textareas und vorallem auch der Absendebutton im IE, im Firefox _und_ im Opera _pixelgenau_ gleich breit sind _und_ dabei _nur_ "em" als Breiten- / Längenangabe verwendet werden darf.

Das stimmt so nicht.

Will man dies erreichen, _muss_ man auf divs bzw. spans zurückgreifen.

Folgende Struktur ist valide und funktioniert:

<form action="" method="post">  
<fieldset>  
<dl>  
<dt><label for="sowohl">Sowohl</label></dt>  
<dd><input id="sowohl" type="text" /></dd>  
<dt><label for="alsauch">Als auch</label></dt>  
<dd><textarea id="alsauch" cols="" rows=""></textarea></dd>  
</dl>  
<button type="submit">Tschüss</button>  
</fieldset>  
</form>

Doch egal ob mit spans oder divs, ich schaffe es selbst _mit_ genannten Erweiterungen des Quellcodes nicht. :-(

• Wenn du die seitlichen Rahmen um die Eingabe-Elemente weglässt, funktioniert die Formatierung.
• Wenn du die Rahmenstärke der seitlichen Rahmen um die Eingabe-Elemente in ganzzahligen em-Werten angibst und kumuliert von der Breite des <dd>-Elements abziehst, funktioniert die Formatierung.
• Wenn du die Rahmenstärke der seitlichen Rahmen um die Eingabe-Elemente in krummen em-Werten bestimmter Größe angibst und kumuliert von der Breite des <dd>-Elements abziehst, funktioniert die Formatierung.
  Dass nicht jeder krumme Wert funktioniert, liegt an der unterschiedlichen Berechnungsweise der Browser. Generell gilt, dass Opera und Safari das Pixel-Equivalent des em-Wertes einmal festlegen, während Firefox bei jedem Vorkommen des Wertes eine neue Berechnung vornimmt. Nun mag man es seltsam finden, dass Firefox immer wieder auf unterschiedliche Ergebnisse trotz gleicher Ausgangswerte kommt, aber dafür ergeben die Werte kumuliert meist eher den Ausgangswert als in Opera oder Safari.
  Ein Beispiel: 1em entspreche hier 14 Pixeln, 0.1em folglich 1,4 Pixeln.
  In Opera und Safari würden 0.1em stets zu 1 Pixel gerundet, wodurch 10 x 0.1em plötzlich nicht mehr 14 Pixel sind, sondern nur noch 10 Pixel.
  In Firefox würde sechs mal 0.1em und vier mal 0.2em herauskommen, womit die 10 x 0.1em in der Summe noch immer 14 Pixeln entsprechen.

Und ich gebs jetzt auf. Sollte jemand eine Lösung wissen, würd es mich glücklich machen, ansonsten hau ich jetzt den Hut drauf.

Verwende einfach durchgängig die richtigen Maßeinheiten und möglichst einfache Werte.
MfG, at