zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden boxmodell-fehler in xhtml?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.04.2007, 23:12
Benutzerbild von nick
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.08.2006
Ort: Rheinland-Pfalz
Beiträge: 386
nick befindet sich auf einem aufstrebenden Ast
Standard boxmodell-fehler in xhtml?

Code im Firefox 2.0 betrachten.

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">
<head>
<title>fuck</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
input, select
{
	background-color: #EBF0D2;
	border: 10px solid #696969;
	padding: 0;
	margin: 0;
	width: 200px;
	height: 20px;

	vertical-align: middle;
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 10px;
	color: #000000;
}
</style>
</head>
<body>

<p align="center">
	<select><option>Bla ggg</option></select>
	<input type="text" value="Bla ggg">
	<input type="submit" value="Bla ggg">
</p>

</body>
</html>
Das input des Typen Text ist 40px hoch.
20px height + 10px border * 2

Das input des Typen Submit ist 20px hoch,
Rahmenbreite wird nicht beachtet.

Überhaupt kann ich es mir nicht erklären, wie die Selectbox angezeigt wird oO

Ich will jetzt nicht dem selectfeld ne andere Höhe verpassen,
damit sie gleich hoch gezeigt werden.
Werden sie dadurch nicht wiederum in einem anderen Browser
anders hoch gezeigt?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.04.2007, 23:53
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Nein, das ist kein Fehler.

Guck mal im Firefox Programm Ordner /res/forms.css

Dort ist definiert, wie Firefox solche User-Eingabefelder darstellt
Code:
select {
  ...
  -moz-box-sizing: border-box;
  ...
  }
Dies ist die Gecko-spezifische Umsetzung von noch nicht richtig implementierten CSS3-Eigenschaften (-moz-Präfix).

In der CSS3-Eigenschaft box-sizing wird definiert, wie das Boxmodell dieses Elements verstanden wird (normalerweise: 'content-box', also gibt height nur die Höhe des Inhalts an, plus padding, plus border).

Hier wird der Wert aber auf 'border-box' gesetzt, das heißt, die von dir gesetzte Höhe gibt die Gesamthöhe an (inklusive padding, inklusive border = altes box-Modell).

Um das Problem zu sehen, setze die Höhe mal auf 200px statt auf 20px. Du siehst, dass die select box um die Größe der 10px border von der nachfolgenden input-box abweicht. Beide nehmen für height ein unterschiedliches Boxmodell an.

Eine ähnliche Betrachtung gilt für input[type="submit"] in forms.css

Fazit: Vergiss es.

User-Eingabefelder lassen sich nicht stylen. Sieh mal, wieviele Eigenschaften in forms.css mithilfe von !important unüberschreibbar gemacht worden sind. Und im Safari und Opera kommst du an solche Default-Werte erst gar nicht ran.

Lies dazu Styling form controls with CSS und lass die Eingabefelder in Ruhe. Denn:

Zitat:
CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (11.04.2007 um 00:06 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.04.2007, 00:49
Benutzerbild von nick
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.08.2006
Ort: Rheinland-Pfalz
Beiträge: 386
nick befindet sich auf einem aufstrebenden Ast
Standard

Recht herzlichen Dank!
Jetzt denke ich um einiges klarer!
Mit Zitat antworten
  #4 (permalink)  
Alt 13.04.2007, 16:25
Benutzerbild von Geronimo
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.06.2004
Beiträge: 2.650
Geronimo sorgt für eine eindrucksvolle AtmosphäreGeronimo sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von IChao Beitrag anzeigen
User-Eingabefelder lassen sich nicht stylen.
Leider doch. Wie kann man denn die standardmäßige Darstellung wiederherstellen, wenn für das gesamte Dokument geltende Formatierungen unerwünschterweise auch die Eingabefelder und Buttons verändern?
Mit Zitat antworten
  #5 (permalink)  
Alt 13.04.2007, 16:51
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Mit "lassen sich nicht stylen" meinte ich etwas flapsig ja auch nicht "lassen sich überhaupt nicht, ja so wirklich gar nicht, stylen", sondern, dass man sie in Ruhe lassen soll, weil nicht alles überall geht.

Zu deiner Frage fällt mir nur ein, dass man sie am besten erst gar nicht verstellt: reset.css
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Fehler beim Ausdruck mit XHtml (Berichte) dominiki112 (X)HTML 0 19.10.2010 11:46
xhtml 1.0 - &nbsp; validator fehler danliker (X)HTML 2 27.07.2007 23:57
xhtml 1.0 strict - w3c validator bringt viele meta tag fehler bastien (X)HTML 4 03.09.2006 16:50
XHTML 1.0 - Fehler mit <style> tin (X)HTML 3 09.05.2006 16:33


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