IE vs Firefox - Padding

[spacle]

Hi ich habe ein ziemlich nerviges Problem dass ich seit vorgestern auch mit google nicht lösen konnte:

Ich habe ein Kontaktformular erstellt und möchte dass es rechts genau mit dem Rand der Box abschließt. Nun, so war es dann auch in Chrome und Firefox. Dann habe ich es mir mit dem IE 9 angeschaut und festgestellt dass das Formular umgebrochen wird, weil die input Felder anscheinend zu groß waren. Ich habe dementsprechend verwirrt mit Blick au die Darstellung im IE alle Angaben angepasst. Nun fehlen aber im Firefox Pixel an breite. D.h. Im Firefox und Chrome sind die Felder kleiner, es scheint als würde das padding nicht angerechnet, somit schließen die Felder im Chrome nicht einheitlich nach rechts ab.

/* Buchungsformular - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */		
				#Buchungsformular {
					width:350px;
					float:left;
					}
					
					form{}
					form span.pflicht{font-family:Arial;font-size:13px; color:#3e3e3e;position:absolute;margin-top:9px;}
					
				label{display:inline;color:#3e3e3e;font-size:14px;font-family:Arial;}
				input,textarea{border:1px solid #ddd/*595959*/;height:24px;margin:7px 5px 3px 5px;padding:0 0 0 5px;font-family:Arial;}
					#Name {width:101px;}
					#Vorname{width:101px;}
					#Strasse{width:148px;}
					#PLZ{width:76px;}
					#Telefon{width:127px;}
					#Fax{width:100px;}
					#Email{width:289px;}
					
					textarea{width:100%;max-width:253px;height:91px !important;margin-top:12px;border:1px solid #ddd;overflow:hidden;}
					
					label.Anmerkung{float:left;margin-top:12px}

<form id="kontaktformular" action="formmail.php" method="post">
						
							<label for="Name">Name*</label><input type="text" id="Name" name="Name" required class="input">
							<label for="Vorname">Vorname</label><input type="text" id="Vorname" name="Vorname" class="input"><br />
							<label for="Strasse">Stra&szlig;e*</label><input type="text" id="Strasse"  name="Strasse"  required class="input">
							<label for="PLZ">PLZ*</label><input type="text" id="PLZ" name="Postleitzahl"  required class="input"><br />
							<label for="Telefon">Telefon*</label><input type="tel" id="Telefon" ame="Telefon-Nummer"  required class="input">
							<label for="Fax">Fax</label><input type="text" id="Fax" name="Fax" class="input"><br />
							<label for="Email">Email</label><input type="email" id="Email" placeholder="email@example.com" name="Emailadresse" class="input"><br />
							<label class="Anmerkung" for="Anmerkung">Anmerkung</label><textarea id="Anmerkung" wrap="physical" name="Anmerkung" id="textarea"></textarea>
							
							<div id="buchungshr"></div>
							<span class="pflicht">* ben&ouml;tigte<br /> &nbsp; Angaben</span>
							<button type="reset" id="Stop" value="Abbrechen">Abbrechen</button>
							<button type="submit" id="Absenden" value="Absenden">Absenden</button>
					</form>

 

[Misco]

AW: IE vs Firefox - Padding

hm, wie wäre es mit float right für die inputs.

 

[spacle]

AW: IE vs Firefox - Padding

nope; mal eben probiert - das wird nix. Warum willst du das floaten? Mir viele jetzt auch nicht ein was das bringen sollte.

edit: ich habe es mal durchprobiert und das padding gelöscht (vom input), dann in FF aktualisiert und keine Änderung. Der FF und Chrome scheinen padding an der Stelle nicht zu unterstützen.

 

[Misco]

AW: IE vs Firefox - Padding

ohne was zusehen ist immer etwas schwer. Aber die Labels sind ja float left, da dacht ich eben eine float right für inputs würde diese rechts kleben lassen egal ob es kleine breiten Unterschiede gibt.

 

[spacle]

AW: IE vs Firefox - Padding

jaja aber sie sollen ja auch links abschließen (wie blocksatz) ich würde ja auf padding verzichten dann würde alles funzen aber das problem is dass dann der text in den feldern am rand der felder klebt und das is hässlich^^

 

[Hanskrampf]

AW: IE vs Firefox - Padding

Und welche Version hast du jetzt hier gepostet? Bei mir stimmt der rechte Rand weder im FF, im IE, noch in Chrome überein.

Ich hab Testweise mal einen CSS Reset mit eingebaut, damit sieht es dann nochmal anders aus, immerhin aber in allen Browsern gleich. Die Browser haben eben unterschiedlich vordefinierte Einstellungen.

 

[spacle]

AW: IE vs Firefox - Padding

ja klar css reset habe ich auch drinnen, nur meine website is etwas größer und habe jetzt nur den teil fürs form gepostet.

*{border:0;margin:0;padding:0;}

aber bei mir schließt es wie gesagt nur im IE9 ab und in den anderen nicht. Ich hab zwischenzeitlich das padding auskommentiert und im Chrome aktualisiert, keine Änderung im Chrome irgendwas stimmt da nicht.

 

[SchokoSuchti]

AW: IE vs Firefox - Padding

ohne was zusehen ist immer etwas schwer. [...]

Ich denke, Misco wollte damit andeuten, was ich auch gerade denke: Poste mal einen Link oder wenigstens ein Bildchen, ich hab nämlich wenn ich ehrlich bin keine Lust, bei jedem, dem ich helfen will, irgendwelche Dateien zu erstellen, um überhaupt erstmal zu wissen, wo genau das Problem liegt

 

[spacle]

AW: IE vs Firefox - Padding

Im Chrome sieht es so aus:

Und im IE bilden halt alle Felder auch nach rechts eine Linie (wie Blocksatz)

 

[Myhar]

AW: IE vs Firefox - Padding

Wenn du keinen Link zum Problem hergeben willst, dann kann ich dir nur raten, nimm die Entwicklerwerkzeuge von Chrome und debugge das ganze selber. Rechtsklick auf die Seite und Element untersuchen auswählen. Dann siehst du, wieso welche Elemente welche Größe/Eigenschaften/etc. haben
Das Selbe machst du auch im Firefox (nachdem du Firebug installiert hast) und im IE mittles druck auf die F12 Taste und schon ist alles gelöst.

 

[spacle]

AW: IE vs Firefox - Padding

habe ich ja; Chrome und Firefox erweitern das input element scheinebar nicht um das Padding. Also das padding-left:4px wird nicht auf die breite des input feldes draufgerechnet. Aber andere Elemente wie z.B. div werden durch input größer

 

[Hanskrampf]

AW: IE vs Firefox - Padding

Keine Ahnung, wo genau du da irgendwas verbaut hast, was nicht funktioniert. Bei mir funktioniert in allen Browsern das padding ganz normal.

 

[Myhar]

AW: IE vs Firefox - Padding

habe ich ja;

Ich weiß ja nicht, was du hast. Aber so lange du dich weigerst uns wenigstens ein Minimalbeispiel online zu stellen, werden wir dir nur schwer helfen können. Dann wirst du wohl noch einmal gründlich debuggen müssen. Dabei nicht nur auf die input Felder achten, Eigenschaften werden auch vererbt. Wahrscheinlich passt das CSS für ein übergeordnetes Element nicht.

 

[spacle]

AW: IE vs Firefox - Padding

hab grad keinen webspace habe das mal in rar verpackt und hochgeladen
hoffe mein Problem wird klar. Ich habe mit dem Chrome debugger das padding an- und ausgemacht und die sichtbare größe der input felder hat sich nicht verändert. Dabei vergrößert padding doch normalerweise den Container auf den ich es anwende

edit: da is jetzt kein reset drinnen, weil ich grade wieder ne stunde rumprobiert habe und dabei auch geguckt habe wie es ohne reset aussieht und vergessen habe es wieder reinzunehmen aber es ändert am Problem nichts

 

[Hanskrampf]

AW: IE vs Firefox - Padding

Es liegt wohl am HTML4. In XHTML (auf <input /> abändern) funktioniert das Ganze. Da kannst du das padding dann nach Belieben verändern.

 

[Blackout289]

AW: IE vs Firefox - Padding

So wie ich's jetzt beim groben Überfliegen gelesen hab würde ich dir zu ner einfachen Tabelle raten
Man muss nicht zwingend DIV's verwenden. Tables sind nicht veraltet oder sonst was, man soll sie nur für das richtige verwenden, wie bspw für Formular

Gruß

 

[spacle]

AW: IE vs Firefox - Padding

OK also ich verwende kein XHTML aber zu der "einfachen Tabelle": Ich bin 16 und habe mit 12 mit Webseiten bauen angefangen und von Anfang an mit margin gearbeitet ich habe 1-2 mal in meinem Leben eine Tabelle gebaut und davon keinen Blassen Schimmer xDD ein Freund meinte auch: "mach ne Tabelle draus" aber ich habe das ding dann in ein einzelnes td gepackt und es hat sich nichts geändert aber wenn du mir quellcode an die Hand geben kannst wäre ich dir echt dankbar^^

 

[Blackout289]

AW: IE vs Firefox - Padding

Ist eigentlich nicht weiter schwer
Müsste eigentlich funktionieren, hab's nicht getestet (gibt's ja auch nicht viel )
Als Grundgerüst

<table>
<tr><td>Links Oben</td><td>Rechts Oben</td></tr> //Erste Zeile
<tr><td>Links Mitte</td><td>Rechts Mitte</td></tr> //Zweite Zeile
<tr><td>Links Unten</td><td>Rechts Unten</td></tr> //Dritte Zeile
</table>

Hier ein link zum gestalten (cellPADDING/cellSPACING/...)

 

[Blackout289]

AW: IE vs Firefox - Padding

Bitte schön
Da hast n Gerüst

<table>
<tr><td>Name</td><td><input></td><td>Vorname</td><td><input></td></tr> //Erste Zeile
<tr><td>Straße</td><td><input></td><td>PLZ</td><td><input></td></tr> //Zweite Zeile
<tr><td>Email</td><td colspan="3"> <input></td></tr> //Dritte Zeile
<tr><td>Anmerkung</td><td><textarea></textarea></td></tr>
</table>

 

[spacle]

AW: IE vs Firefox - Padding

hmm jetzt schließt zwar alles ab aber meine Tabelle ist doppelt so breit wie sie sein soll schaue mal eben wie ichs ändern kann^^