input und button + hack

GN · #1 (**permalink**) 03.08.2006, 00:56

Hallo,

kann mir jemand helfen, so dass das input-field und der button gleich im FF und IE aussehen?

Code:

<style type="text/css">
form * { margin: 0; }
input { width: 240px; height: 17px; background: #fff; border: 1px #ccc solid; }
* html input { height: 17px; }
button { width: 240px; height: 17px; background: #fff; border: 1px #ccc solid; }
but\ton { width: 242px; height: 19px; }
input, button { font: normal .75em Arial, Verdana; color: #333; }
</style>
</head>
<body>
<form>
<input type="text" name="test" />
<p>
<button type="submit">speichern</button>
</p>
</form>

GN

heiko_rs · #2 (**permalink**) 03.08.2006, 01:47

Ersetze erstmal die 1. Regel durch folgende:

Code:

* {
	margin: 0;
	padding: 0;
	}

Damit werden alle margin- und vor allem padding-Werte auf Null gesetzt. Dann füge sowohl input als auch button noch ein display: block; hinzu, und dann bist Du bereits sehr nah dran und kannst den Rest noch "per Hand" angleichen. Für mich sieht's in IE und FX auf folgende Weise gleich aus:

Code:

input,
button {
	font: normal .75em Arial, Verdana;
	display: block;
	background: #fff;
	color: #333;
	border: 1px #ccc solid;
	}

input {
	width: 240px;
	height: 17px;
	}

button {
	width: 242px;
	height: 19px;
	}

IE 5.x (fehlerhaftes Boxmodell) kannst Du dann noch separat checken & anpassen.

GN · #3 (**permalink**) 03.08.2006, 12:47

Hallo,

habe es jetzt so:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
       <title>Title here!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* { margin: 0; padding: 0; }
input, select { width: 340px; height: 17px; background: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); }
* html input { height: 17px; }
select { width: 342px; }
button { width: 340px; height: 17px; background: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); }
but\ton { width: 342px; height: 19px; }
textarea { width: 340px; height: 85px; background: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); }
input, select, textarea, button { font: normal .75em Arial, Verdana; color: rgb(51, 51, 51); }
</style>
</head>
<body>
<form>
<p><input type="text" name="test" /></p>
<p>
<select name="auswahl">
  <option>Bitte wählen</option>
  <option>Bitte wählen</option>
  <option>Bitte wählen</option>
  <option>Bitte wählen</option>
  <option>Bitte wählen</option>
</select>
</p>
<p><textarea rows="5" cols="28"></textarea></p>
<p><button type="submit">speichern</button></p>
</body>
</html>

Sieht auch im IE und FF gleich aus.
Wie bekomme ich <p> wieder als Absatz eingestellt?
Und warum bricht er im textarea FF den Text nicht am Ende der Box um?

GN

heiko_rs · #4 (**permalink**) 03.08.2006, 14:30

Was ist der Sinn von Folgendem:

Code:

input, select { width: 340px; height: 17px; background: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); }
* html input { height: 17px; }
button { width: 340px; height: 17px; background: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); }
but\ton { width: 342px; height: 19px; }

Um es in FX und IE gleich zu bekommen, reichen genau zwei Dimensionsangaben: Eine für input und eine für button, so wie ich es bereits geschrieben hatte.

Zitat:

Zitat von GN

Sieht auch im IE und FF gleich aus.

Aber warum so umständlich?

Zitat:

Zitat von GN

Wie bekomme ich <p> wieder als Absatz eingestellt?

p { margin: ... }

Zitat:

Zitat von GN

Hallo,Und warum bricht er im textarea FF den Text nicht am Ende der Box um?

Bei mir tut er's!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
input type file button formatieren	meldron	CSS	2	08.10.2010 20:15
input ja - button nein ?	tscho	CSS	2	06.02.2010 21:36
input feld + submit button auf gleicher höhe. funktioniert außer in IE8 + FF2+3	monran	CSS	4	04.12.2009 09:07
input Box und Button auf gleiche Höhe	krümel	CSS	3	14.03.2009 13:18
Button vs. Input > gleiches Verhalten und Aussehen erwüns	Coco	CSS	1	01.10.2004 01:21