XHTMLforum - Problem mit Firefox CSS width/height input-field type text/submit in XHTML

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Problem mit Firefox CSS width/height input-field type text/submit in XHTML (http://xhtmlforum.de/showthread.php?t=40331)

Problem mit Firefox CSS width/height input-field type text/submit in XHTML

Hallo,

ich habe bei der Entwicklung einer neuen Seite die für mich doch etwas überraschende Entdeckung gemacht, dass der Firefox im standardkonformen Modus die CSS Werte für width und height für die <input> Felder "text" und "submit" unterschiedlich interpretiert. Bei "text" zählt er die border nicht mit bei "submit" schon.

Ein lauffähiges Beispiel ist unter:
http://www.ned.univie.ac.at/Test/button.html
zu finden.

Der wichtigste Code Teil ist jener

Code:

<form>

<input type="text" style="width:150px;height:20px;border:1px solid #000;background-color:#f0f0f0;">

<input type="submit" style="width:150px;height:20px;border:1px solid #000;background-color:#cc00ff;">

</form>

In den drei verschiedenen in den Frame eingebundenen HTML Dateien ist halt nur die Doctype entsprechend geändert.

Gibt es dafür einen Workarround? Es ist zwar ein kleines Detail aber es wäre schon schöner wenn die Felder auch in Firefox gleich groß wären. Außerdem ist das eine dieser "Nüsse" die ich gerne knacken würde.

Danke für die Hilfe im Voraus!

P.S.: Als zweites mich zwar weniger beschäftigendes aber doch schon des öfteren störendes Problem ist der Versprung zwischen Textfeld und Button. Weiß jemand warum der Firefox den Button zwei Pixel höher anzeigt als das Textfeld?

Zitat:

Zitat von NedwebSurfer

Gibt es dafür einen Workarround? Es ist zwar ein kleines Detail aber es wäre schon schöner wenn die Felder auch in Firefox gleich groß wären.

Firefox und IE im Standard-Modus verhalten sich gleich, aber Opera nicht (er behandelt beide gleich), das macht's schwierig, d.h. es wird nur per Hack mit angepaßten height-Werten gehen.

Zitat:

Zitat von NedwebSurfer

Weiß jemand warum der Firefox den Button zwei Pixel höher anzeigt als das Textfeld?

Denn Grund weiß ich nicht, aber eine Abhilfe: z.B. beide links floaten lassen.

EDIT: Folgendermaßen geht's in Netscape 7, Firefox, Opera und IE 6 (IE 5.x benötigt dieselbe Anpassung wie Opera, geht aber separat per IE-Stylesheet) :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">



<head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>Test</title>

        <link rel="stylesheet" type="text/css" href="css_standard.css" media="all" />

</head>



<body>



<form action="test.php">

<fieldset>



<input id="field" type="text" />

<input id="button" type="submit" />



</fieldset>

</form>



</body>



</html>

Und die CSS:

Code:

* {

margin: 0;

padding: 0;

border: none; }



body {

background-color: white;

color: black;

margin: 10px; }



#field, #button {

height: 25px;

width: 200px;

float: left;

background-color: red;

color: black;

font-size: 12px;

line-height: 15px;

font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;

border: 1px solid black;

margin-right: 3px; }



#button {

height: 27px; }



html:first-child>b\ody #button {

height: 25px; }

Die letzte Regel liest nur Opera (alle ab 7.2). Ich weiß nicht, wie Safari sich verhält, falls sein Verhalten dem von Opera entspricht, müßte man das alles nochmal umbauen.

Hallo,

danke für die schnelle Antwort.
Das mit dem float:left um den Versprung zwischen Inputfeld und Button zu entfernen klappt wunderbar. Auch die Lösung für das eigentliche Problem hat mir weitergeholfen.
Aber auch eine neue Frage aufgeworfen. Die Lösung läuft im IE (6er) nur korrekt wenn ich am Dateianfang

Code:

<?xml version="1.0" encoding="UTF-8" ?>

Entferne. Anscheinend fällt es ansonnsten in den Quirks-Mode zurück. Sollte ich aber XML Dokumente nicht immer mit einer Zeile dieser Art beginnen lassen? Oder wird das für XHTML nicht explzit verlangt.

Danke nochmal!

Zitat:

Zitat von NedwebSurfer

Die Lösung läuft im IE (6er) nur korrekt wenn ich am Dateianfang

Code:

<?xml version="1.0" encoding="UTF-8" ?>

Entferne. Anscheinend fällt es ansonnsten in den Quirks-Mode zurück.

Genau.

Zitat:

Zitat von NedwebSurfer

Sollte ich aber XML Dokumente nicht immer mit einer Zeile dieser Art beginnen lassen?

Nein, weg damit ;) Unabhängig davon mußt Du natürlich noch eine Anpassung für den IE 5.x machen, denn da sieht's ja logischerweise immer genauso aus wie derzeit im IE 6.