XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   boxmodell-fehler in xhtml? (http://xhtmlforum.de/showthread.php?t=45395)

nick 10.04.2007 23:12

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?

IChao 10.04.2007 23:53

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.

nick 13.04.2007 00:49

Recht herzlichen Dank!
Jetzt denke ich um einiges klarer!

Geronimo 13.04.2007 16:25

Zitat:

Zitat von IChao (Beitrag 330072)
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?

IChao 13.04.2007 16:51

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019