Formular Input- und Submitbreite

  • Hi, kennt ihr das, dass die Eingabefelder eines Formulars in Firefox und Opera (z.B.) immer etwas breiter sind als die Buttons, bei gleicher Längenangabe per CSS versteht sich.

    In sämtlichen IE-Versionen sind beide gleich breit.
    Wenn man die Breite des Buttons entsprechend größer wählt, passts natürlich im IE nicht mehr.

    Kennt jemand eine Lösung?

  • Ah, tut mir Leid.

    Du hast oben nur das input Feld formatiert, bist du sicher, dass auch die Buttons, also submit Elemente die gleichen Werte zugewiesen wurden? Denn auch hier lässt sich das von mir oben beschriebene Prinzip anwenden.

    Jeder Browser interpretiert ein Attribut oder Elemente etwas anders, daher helfen relative %-Angaben nicht. Versuche es mal mit absoluten Angaben, wie beschrieben, dann solltest du auch submit-Buttons hinbekommen, die gleich lang sind, wie die Input Felder.

    MfG Alienx

  • Ähm... entweder check ich nicht was du meinst... oder du musst vielleicht nochmal lesen. :P

    Ich weiße dem input-Element per CSS eine feste Breite von 100px zu, ob das nun vom typ "text" oder "submit" ist, ist doch egal.

    Nur in FF/Opera wird das input-Element mit type="submit" zu kurz dargestellt.
    Probiers mal aus. Am besten machste noch einen 1px Border drum und eine Hintergrundfarbe. Dann sieht mans besser.

  • "text" und "submit" sind unterschiedliche Elemente, d.h. sie werden meines Wissens nach unterschiedlich interpretiert.

    Du solltest einmal versuchen, sowohl den type "text", als auch "submit" sperat zu formatieren.

    Wenn das nicht hilft, dann weiße ihnen oder ggf. dem input Element die Eigenschaft "display : block" zu.

    Das wäre alles, was ich dazu weiß, weiter kann ich dir in dem Thema leider auch nicht behilflich sein. Sry, wenn ich dich falsch verstand habe, aber du möchtest doch, dass submit- und Eingabe-Felder in deinem Formular in allen Browsern gleich lang sind?

    MfG Alienx

  • display:block funktioniert auch nicht, hab ich schon probiert.

    Und biede seperat formatieren ebenfalls fehlanzeige. Hab beiden unterschiedliche IDs zugewiesen und die breite für beide festgelegt. Der Unterschied ist trotzdem noch da...

    EDIT: Aber mal nebenbei... dieses Problem ist dir auch schon aufgefallen?

  • Gut zu wissen, danke!
    Aber daran liegt es auch nicht. Meine DTD ist "qualifiziert".

    Probiert es doch mal selber. Macht ein Formular mit einem Eingabefeld und einem Submit-Button und versucht die Breite in allen Browsern gleich hinzubekommen.

  • Hi
    Dein Problem ist ne Browsermacke.
    Aber du kannst dem type="text" eine class zuweisen und dem type="submit" eine andere class. Sind also 2 :shock: .
    Und nu gibst du jeder class eine width mit.
    Habs Probiert und es hat geklappt - nusst ein bischen fummeln.
    Hoffe damit konnte ich dir helfen.
    mfg

  • also ich bin der meinung es liegt daran, daß der button sozusagen outset is und das inputfeld inset, ganz gleich werden die nie aussehen, auch wenn man den gleichen style vergibt

    evtl klappt es ja bei zwei verschiedenen stles und des fürs inputfeld dann etwas grösser

  • Erstmal dickes Dankeschön! :)

    Aber hinbekommen hab ich es immernocht nicht... :P

    Mal schauen, wenn der "Abnehmer" der Seite darauf besteht, bau ich ne Browserweiche ein.

    MfG Markus... und Tschüß :D

  • also ich hab mal folgenden code im firefox, ie6 und ie7 getestet


    der button ist überall 2 pixel kürzer, als des inputfeld...
    besorg dir mal das programm meazures, damit kannste pixelgenau ausmessen (hat sogar ne vergrösserungsfunktion, damit du lupenlike die pixel besser erkennen kannst