10.04.2007, 22: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>
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? 
|
| Sponsored Links |
|
10.04.2007, 22: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;
...
}
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:
Geändert von IChao (10.04.2007 um 23:06 Uhr)
|
| Sponsored Links |
|
13.04.2007, 15:25
|
||||
|
||||
|
Zitat:
|
|
13.04.2007, 15: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
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 12:25 |
| Fehler beim Ausdruck mit XHtml (Berichte) | dominiki112 | (X)HTML | 0 | 19.10.2010 10:46 |
| xhtml 1.0 - validator fehler | danliker | (X)HTML | 2 | 27.07.2007 22:57 |
| xhtml 1.0 strict - w3c validator bringt viele meta tag fehler | bastien | (X)HTML | 4 | 03.09.2006 15:50 |
| XHTML 1.0 - Fehler mit <style> | tin | (X)HTML | 3 | 09.05.2006 15:33 |
Linear-Darstellung
