zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden input und button + hack

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.08.2006, 00:56
GN GN ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 20.11.2004
Beiträge: 182
GN befindet sich auf einem aufstrebenden Ast
Standard input und button + hack

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.08.2006, 01:47
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
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

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.

Geändert von heiko_rs (03.08.2006 um 01:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.08.2006, 12:47
GN GN ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 20.11.2004
Beiträge: 182
GN befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 03.08.2006, 14:30
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
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

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!
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
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


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