Schrift in input-Feld schmaler?

[jkruse]

Hallo,

ich habe zwei Seiten, einmal ein Formular mit input-Elementen und einmal eine Seite mit ein paar div-Elementen zum Darstellen von Daten.

Wenn ich zwischen den beiden Seiten wechsle, kann man erkennen, dass die Schriften nicht gleich breit sind. Allerdings habe ich keine Idee / Ahnung, warum das so ist.
Hier einmal die Styles für das input-Element:

Code: Alles auswählen

form .input {
  color: #444;
}

input,textarea {
  clear: both;
  font: 12px/1.5 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
  padding: 4px 4px 3px 4px;
  border: 1px solid #cccccc;
  vertical-align: middle;
}

input[type=text]:focus,input[type=password]:focus {
  background-color: #FAF5D7;
}

.field_input_long {
  margin: 4px 0 4px 0;
  width: 240px;
}

Mein div-Element hat folgenden Style bekommen:

Code: Alles auswählen

.test {
  float: left;
  clear: left;
  font: 12px/1.5 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
  padding: 2px 3px 2px 5px;
  width:240px;
  border: 1px solid #cccccc; margin: 4px 0 4px 0;
}

Könnt ihr mir erklären, warum das so ist? Und ob es eine Möglichkeit gibt, die Schrift gleichzusetzen?

Viele Grüße
Jens

[Azra]

Welcher Browser?

[jkruse]

Hi,

sorry für die späte Antwort.
Im aktuellen Firefox 4.

Im Firefox 3.6.16 funktioniert es...

[Azra]

Hast du ein globales Reset in deiner CSS Datei?
Vielleicht hilft es wenn du das machst:

Code: Alles auswählen

select, input, textarea, button { font:99% sans-serif; }

Danke für den Hinweis, ich habe das bisher noch nicht verglichen. Was mir sofort aufgefallen ist - die Textfelder (textarea) können vom Benutzer verändert werden. Hierzu hilft folgendes:

Code: Alles auswählen

textarea{resize:none;}