input-Feld: height + padding wird falsch interpretiert
mel
- css
Hallo,
ich wäre dankbar wenn ihr einen kurzen Blick auf folgende Code-Schnipsel werfen könntet:
css:
body {
padding:0;
margin: 0;
background-color: #E8E8E8;
text-align: center;
font-family:"Arial", Verdana, Helvetica, sans-serif;
font-size: 100.1%;
color: #666;
letter-spacing: 0.04em;
}
#content input, #content textarea {
font-family:"Arial", Verdana, Helvetica, sans-serif;
font-size: 1em;
display: block;
}
#content input {
background-color: #FCFCFC;
height: 1.8em; //zuvor Pixelangabe: 26px;
width: 20.28em; //zuvor Pixelangabe: 226px;
border: 0 none;
padding: 2px 0 0 2px;
}
#content textarea {
background-image: url(bgtextarea.jpg);
background-repeat: no-repeat;
background-position: center;
width: 226px;
height: 125px;
overflow: hidden;
border: 0 none;
padding: 2px 0 0 2px;
}
-------------------------------------------------------------------------
html:
<div id="content">
<form name="form1" method="post" action="formular.php">
<p>Name:</p>
<input name="name" type="text" id="name" maxlength="34">
<br />
<p>Kommentar:</p>
<textarea name="nachricht" id="nachricht" rows="4" cols="40"></textarea>
<p id="absenden">
<input type="image" src="absenden.gif" name="Submit" value="Abschicken" alt="Abschicken">
</p>
</form>
</div>
Mein Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Mein Problem:
Die Höhe wird falsch angezeigt, zumindest im IE, Firefox. Opera dagegen zeigt die 26px Höhe an (bzw. die enstprechende em-Einheit).
Zudem wollte ich einen Innenabstand für die Inputfelder definieren. Diese werden nicht interpretiert.
Die Seite hatte vorher einen anderen Doctype (HTML 4.01 Transitional//EN), da gab es nicht diese Abweichungen.
Wo liegen denn meine Fehler?
Hatte em-Einheiten im Verdacht oder line-heigt aber die Eigenschaften scheinen es nicht zu sein. Ausserdem kann es doch nciht sein dass man keinen Innenabstand mehr definieren kann....
Vielen Dank für Eure Hilfe,
Gruss, Mel
woran könnte das liegen...?
Hallo du da draußen,
woran könnte das liegen...?
An deinen ungültigen Zeichen. Kommentare in CSS macht man mit /* */, entferne bitte deine //-Kommentare.
Grüße von hier drinnen, aus Biberach an der Riss,
Candid Dauth (Dogfish)
Hallo du da draußen,
woran könnte das liegen...?
An deinen ungültigen Zeichen. Kommentare in CSS macht man mit /* */, entferne bitte deine //-Kommentare.
Hi Candid,
die Kommentare hab ich nur in meinem Posting dazugeschrieben, nichtsdestotrotz sind sie trotzdem falsch natürlich (sorry), aber als Fehlerquelle auszuschliessen. Habe gerade nochmal alles überprüft.
Der Opera stellt die Formatierung pixelgenau dar. Mozilla und IE zeigen dagegen Abweichungen um ein paar Pixel. MAn kann sich darüber streiten ob das lebenswichtig ist. Bei mir stehen jedoch einige input-Felder untereinander und in der Summe stören die Abweichungen dann schon.
Kann mir das nicht erklären.
Hallo du da draußen,
Die Höhe wird falsch angezeigt, zumindest im IE, Firefox. Opera dagegen zeigt die 26px Höhe an (bzw. die enstprechende em-Einheit).
Ich habe gerade das padding entdeckt, und durch ein padding-top von 2px wird dein Feld ja 28px hoch. Welche Version von Opera hast du denn? 5? ;-) *scnr*
Grüße von hier drinnen, aus Biberach an der Riss,
Candid Dauth (ehemals Dogfish)