Formular Input- und Submitbreite

FaFoo

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.

Code

CSS:
input {
width:100px;
}


HTML:
<form action="" method="">
<input type="text">
<input type="submit">
</form>

Alles anzeigen

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?

Alienx

Hi, IE und FF/Opera haben unterschiedlich breite Fenster.

% sind daher imm relativ auf deren Weite bezogen, soviel ich weiß, du solltest deshalb einmal versuchen die Weiten- und Breitenangaben direkt in px anzugeben, da diese Größeneinheit absolut ist und nicht variieren sollte.

MfG Alienx

FaFoo

gründlicher lesen bitte...

Alienx

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

FaFoo

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

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.

Alienx

"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

FaFoo

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?

sejuma

Vermutlich fehlt ein qualifizierter Doctype:
http://www.ohne-css.gehts-gar.net/0006.php

FaFoo

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.

knollo

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 .
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

sejuma

Probier's mal so:
CSS

Code

.input {
width:100px;
}

HTML

Code

<form action="" method="">
<input class="input" type="text">
<input type="submit">

synaptic

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

FaFoo

Erstmal dickes Dankeschön!

Aber hinbekommen hab ich es immernocht nicht...

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

MfG Markus... und Tschüß

synaptic

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<html>
<head>
	<title>Untitled</title>
	<style type="text/css">
	input{
	width:100px;
	}
	</style>
</head>


<body>
<input type="button" value="klick mich">




<input type="text" value="klick mich">


</body>
</html

Alles anzeigen

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

Tags