zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Firefox CSS width/height input-field type text/submit in XHTML

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.06.2006, 17:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.06.2006
Beiträge: 2
NedwebSurfer befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.06.2006, 19:14
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.864
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.

Geändert von heiko_rs (13.06.2006 um 20:15 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.06.2006, 14:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.06.2006
Beiträge: 2
NedwebSurfer befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #4 (permalink)  
Alt 14.06.2006, 14:23
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.864
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Firefox und CSS Andre CSS 7 07.04.2005 11:50
XHTML 1.0 transitional / Firefox CSS Probleme SimonWpt (X)HTML 15 21.01.2005 17:11
CSS Problem im FireFox aber nicht IE fra232 CSS 1 29.11.2004 01:04
CSS Problem im Firefox :-( wildboy CSS 2 03.11.2004 00:41
Problem mit Background-Color im FireFox to.ni CSS 2 31.08.2004 12:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:35 Uhr.