fehlerhafte Abstände im IE
Andreas Korthaus
- css
0 Ashura
Hallo!
Ich würde gerne ein Eingabefeld in eine Tabellenzelle einfügen, das an allen 4 Seiten bis an den Rand der Tabellenzelle geht. Im Firefox ist das kein Thema, aber im IE(6) bekomme ich oben und unten einen Pixel Abstand einfach nicht weg:
http://www-users.rwth-aachen.de/andreas.korthaus/test/input.html
Mache ich da irgendwas falsch, oder ist das ein IE Bug? Jemand ne Idee für einen Workaround?
Viele Grüße
Andreas
Hallo Andreas.
Ich würde gerne ein Eingabefeld in eine Tabellenzelle einfügen, das an allen 4 Seiten bis an den Rand der Tabellenzelle geht. Im Firefox ist das kein Thema, aber im IE(6) bekomme ich oben und unten einen Pixel Abstand einfach nicht weg:
Meines Wissens reserviert der IE hier Platz für die Unterlängen mancher Buchstaben (g, j, y, ...).
Versuche einmal, die http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height@title=line-height der Zelle auf einen passenden Wert zu bringen.
Einen schönen Sonntag noch.
Gruß, Ashura
Hallo Ashura,
Meines Wissens reserviert der IE hier Platz für die Unterlängen mancher Buchstaben (g, j, y, ...).
nach unten *und nach oben*?
Und in beide Richtungen nur 1px?
Nee, ich kann mir nicht vorstellen, dass dieser Effekt hier zum Tragen kommt, zumal Andreas die Tags <td><img></td> lückenlos aneinander gesetzt hat. Das ist ja der klassische Vorschlag, um das Unterlängen-Problem zu lösen.
Versuche einmal, die http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height@title=line-height der Zelle auf einen passenden Wert zu bringen.
Auch wenn ich noch im Nebel stochere: Ich bin der festen Überzeugung, dass dies hier ein anderes Problem ist.
Tritt übrigens im IE5.5 genauso auf, falls das für irgendjemanden eine Hilfe ist.
Schönen Abend noch,
Martin
Hallo Martin.
Meines Wissens reserviert der IE hier Platz für die Unterlängen mancher Buchstaben (g, j, y, ...).
nach unten *und nach oben*?
Hm... Stimmt, eher unwahrscheinlich.
Auch wenn ich noch im Nebel stochere: Ich bin der festen Überzeugung, dass dies hier ein anderes Problem ist.
Damit dürftest du Recht haben.
Ich frage mich gerade, wozu die Tabelle hier überhaupt erforderlich ist.
Den Rahmeneffekt kann man auch ohne erzielen.
Einen schönen Sonntag noch.
Gruß, Ashura
Hallo Ashura!
Ich frage mich gerade, wozu die Tabelle hier überhaupt erforderlich ist.
Den Rahmeneffekt kann man auch ohne erzielen.
Ich habe das Problem nur auf ein Beispiel reduziert, das möglichst einfach und gut nachvollziehbar sein sollte ;-)
Grüße
Andreas
Hallo Ashura!
Meines Wissens reserviert der IE hier Platz für die Unterlängen mancher Buchstaben (g, j, y, ...).
Hm, der IE macht ja viele seltsame Sachen, aber warum sollte man diese Abstände auch bei einem <input>-Element anwenden? Abgesehen davon macht es in meinen Augen nicht viel Sinn EIN Pixel hierfür zu reservieren, weil es normalerweise mehr als ein Pixel zusätzliche für besagte Buchstaben benötigt, und abgesehen davon auch noch von der Schriftgröße abhängt.
Versuche einmal, die http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height@title=line-height der Zelle auf einen passenden Wert zu bringen.
Ändert leider nichts.
Das Problem tritt übrigens auch bei einem <input> in einem <div> auf. Im verlinkten Beispiel sieht man aber im IE immer noch einen kleinen Teil des (roten) Zellen-Hintergrunds (der <input> Rahmen is dunkel-grau, der <div> / <td> Rahmen ist hell-grau). Im Gecko nicht - wie ich es auch erwarten würde. Es hat auch glaube ich nichts mit dem Box-Modell Bug des IE zu, wenn ich einen entsprechenden Doctype angebe, ändert sich nichts.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td, div {
border: 5px solid #eee;
background-color: red;
padding: 0px;
}
input {
border: 5px solid #ddd;
height: 100px;
margin: 0px;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="text"></td>
</tr>
</table>
<div><input type="text"></div>
</body>
</html>
Grüße
Andreas
Hi,
Das Problem tritt übrigens auch bei einem <input> in einem <div> auf.
Tja, da scheint der IE wohl grundsätzlich über und unter input 1px Abstand zu setzen.
Die logische Konsequenz: * html input {margin:-1px 0;}
Und wenn der IE7 diesen Bug immer noch hat, muß man sich einen neuen Hack suchen..;-)
freundliche Grüße
Ingo
Hi Ingo!
Tja, da scheint der IE wohl grundsätzlich über und unter input 1px Abstand zu setzen.
sieht so aus...
Die logische Konsequenz: * html input {margin:-1px 0;}
ah, perfekt, vielen Dank!
Und wenn der IE7 diesen Bug immer noch hat, muß man sich einen neuen Hack suchen..;-)
Naja, zur Not geht es damit ja immer noch mit conditional comments. Man, Du kannst Dir nicht vorstellen wie viel nervige Zeit ich die letzte Zeit damit verbringe, Unterschiede in den verschiedenen CSS und JS Implementierungen auszubügeln...
Vielen Dank nochmal!
Viele Grüße
Andreas
Hi,
Man, Du kannst Dir nicht vorstellen wie viel nervige Zeit ich die letzte Zeit damit verbringe, Unterschiede in den verschiedenen CSS und JS Implementierungen auszubügeln...
doch, kann ich..;-)
Nicht selten verbringe ich fast genauso viel Zeit damit, die Fehler im IE auszubügeln, wie mit dem CSS allgemein. Manchmal mußte ich sogar das gesamte CSS-Konzept umwerfen, weil es sich so nicht im IE umsetzen ließ - nicht wegen mangelnder Fähigkeiten, sondern wegen nicht zu kompensierender Anzeigefehler.
freundliche Grüße
Ingo