Inputfelder browserkompatibel machen

[Sn0opy]

Huhu, ich habe ein gewisses Problem, dass gestylete Inputfelder (Buttons und Textfeld) besondere Eigenschaften in jedem Browser haben, die man teils nicht veränder kann. Hauptproblem ist folgendes:

Hier der relevante Code:

div.navi_box {
	border: 1px solid #888;
	padding: 2px;
	padding-bottom: 10px;
	margin-bottom: 7px;
	background-color: #FFF;
}

div.navi_box input {
	border: 1px solid #E4E4E4;
	color: #888;
	background-color: #EEE;
	margin: 0px;
	padding: 0px;
}

Was müsste ich nun ändern, damit es in allen Browsern wirklich gleich aussieht?

Noch eine Frage dazu. Kann es sein, dass sich die Input Tags mit type="file" nicht verändern lassen?

 

[koslowski]

Hi,

hast du denn einen vernünftigen CSS-Prolog definiert?

Beispiel:

*  { padding:0;margin:0;}
[COLOR=DarkGreen]/*--alle Abstände auf null gesetzt--*/[/COLOR]
html  { height:100%;}
[COLOR=Green]/*--html Höhe auf ganzen Viewport definiert--*/[/COLOR]
body  { color:#000; background-color:#fff; text-align:center;
           font:100.01% verdana,arial,helvetica,sans-serif;
           line-height:1.3;}
[COLOR=Green]/*--Schriftfarbe, Hintergrundfarbe, Textausrichtung, allgemeine
      Schriftgröße, Schriftart und Zeilenabstand definiert--*/
[/COLOR]h1,h2,h3,h4,h5  {font-size:0.9em;}
[COLOR=Green]/*-- Überschriftengrößen vereinheitlicht--*/[/COLOR]
p, li, dt, dd, input, textarea  { font-size:0.9em;}
[COLOR=Green]/*--Schriftgröße für einzelne Elemente--*/[/COLOR]
li {  list-style-type:none;}
[COLOR=Green]/*--Listenzeichen ausgeschaltet--*/[/COLOR]
img  { border-style:none;}
[COLOR=Green]/*--Rahmen um Grafiken weg--*/[/COLOR]
img a  { border:none;}
[COLOR=Green]/*--Rahmen um verweissensitive Grafiken weg--*/[/COLOR]

Prolog deshalb, weil es das erste ist was in deiner CSS notiert wird.

Da die verschiedenen Browser unterschiedliche, interne Vorformatierungen haben wird erstmal alles eingeebnet, um eine gleiche Grundlage für alle Browser zu bekommen.
Davon ausgehend definierst du alle Abstände etc.

Ansonsten suchst du dir bei Fehlern einen Wolf!:-?

Wichtig ist auch noch der richtige Doctype.
Ist er falsch geht der IE stande pede in den Quirksmodus und kennt das Boxmodell dann auf einmal nicht mehr.

Zum Schluß noch eine etwas bittere Pille:

Formularelemente werden trotzdem manchmal etwas unterschiedlich dargestellt (aber nicht so krass wie in deinem Beispiel).

Mit so einem Prolog wie oben wird die Fehlersuche allerdings einfach stark erleichtert.

 

[BcF]

Um die Antwort zu vervollständigen:

Noch eine Frage dazu. Kann es sein, dass sich die Input Tags mit type="file" nicht verändern lassen?

Ja.

;)

 

[Sn0opy]

Ich hätte es mir fast selbst beantworten können. Ich konnte das ganze letzendlich mit * { padding: 0px; margin 0px; } lösen. Die restlichen Dinge hatte ich größtenteils schon gehabt.

Gibt es denn noch eine Javascript-Methode, um das Aussehen von Input mit dem Attribut "file" zu ändern?

 

[Frank]

Da gibt es einige tricks, wie zum beispiel das drüberlegen von Grafiken oder das kopieren von anderen Feldern.

Einiges dazu findet sich bei google.

Das Problem bei allen Methoden ist, das du den eigentlichen Dursuchen Button nicht ändern kannst