nicht angemeldet
IE rendert immer 1px margin um INPUT-Tags
Schönen guten Tag!
Beim Designen einer Seite habe ich festgestellt, dass der Internet Explorer immer eine 1 Pixel breite margin oberhalb und unterhalb eines Input-Feldes einfügt.
Hier der Testcase:
<html>
<head>
<style type="text/css">
div { padding:0px; margin:0px; background-color:#ff0000; }
input { padding:0px; margin:0px; }
</style>
</head>
<body>
<form><div bgcolor="#ff0000"><input type="text"></div></form>
</body>
</html>
Beim IE ist über und unter dem Inputfeld noch ein 1 Pixel breiter Streifen des roten Hintergrundes zu sehen. Mozilla hingegen rendert es so, wie ich das erwarten würde.
Fügt man für das Input ein margin-top:-1px;margin-bottom:-1px; ein, dann gehts beim IE - aber das ist natürlich nicht im Sinne des Erfinders.
Ist dieses Phänomen schon mal aufgefallen und weiß jemand vielleicht einen Workaround, der auf beiden Browsern geht?
Merci,
Jan
-
Hi,
div { padding:0px; margin:0px; background-color:#ff0000; }
hier noch border:none; einfügen.
Außerdem noch mit line-height experimentieren.input { padding:0px; margin:0px; }
hier ggf. auch line-height...
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/-
»» »» div { padding:0px; margin:0px; background-color:#ff0000; }
»»
»» hier noch border:none; einfügen.Bringt nichts. Außerdem, was ist, wenn ich einen Border will? :)
»» Außerdem noch mit line-height experimentieren.
Bringt auch nichts. Dann ist halt die Zeilenhöhe von weiterem Text im DIV entsprechend kleiner. Aber das DIV selbst ist immer noch so hoch wie das Inputfeld plus einen Pixel oben und einen unten.
»» »» input { padding:0px; margin:0px; }
»»
»» hier ggf. auch line-height...Dieses line-height würde nur für das Innere des Formularfelds gelten. Dadurch wird das Feld halt niedriger oder höher, aber die margin oben und unten bleibt.
Selbst wenn man mit height oder max-height arbeiten will: keine Chance.
Ich sah auch dass schon jemand anderes auf das Problem gestoßen ist:
http://forum.de.selfhtml.org/archiv/2003/2/38908/
Der Poster hat allerdings sein Problem nicht so klar definiert, denke ich. In den Replies gab es keine Lösung.Ich bin mit meinem Latein definitv am Ende.
-