PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [CSS] - Abstand beseitigen - wie?

Gast
2006-04-04, 15:40:04
Hi,
ich habe ein kleines Problem. Text, der sich in einem DIV Container befindet wird im IE oben und unten mit einem Abstand (von ein paar Pixeln) versehen. Dieser Abstand sollte nicht da sein. Die DIV Box sollte also an den Rändern des Textes enden (der FF zeigt es so an, wie ich es möchte).

Gibt es da nicht irgendeine Methode, das DIV Element so zu formatieren, dass dieser "padding Effekt" verschwindet? Ich habe bis jetzt Text im DIV zusätzlich mit einem "span" umschlossen, dann war es weg. Jetzt soll aber span und dieser komischer Abstand weg - nur wie. Ich kann mich nur noch wage erinern, irgendwo schonmal eine Lösung (mit display:block?) gesehen zu haben, finde sie aber nicht mehr...
darph
2006-04-04, 16:25:54
Mit CSS: padding: 0px;

alternativ für jede Seite einzeln, zum Haifisch padding-left:0px;
Gast
2006-04-04, 18:11:23
Danke, aber mit "padding" ging es nicht. Es war konkret der untere Abstand. Hier ein Beispiel:

<div class="a">TEXT</div>
.a { background-color:ffcc00; width:100px; height:11px; font-size:11px }
Ps. Ich habe es jetzt mit "overflow:hidden" gelöst. Aber vielleicht gibt es noch eine andere Lösung?
Kabelsalat
2006-04-04, 19:44:35
Der IE befindet sich im "Quirksmode". Du musst ihn mit einer korrekten Doctype-Angabe in den standardkonformen Modus schalten und dein Problem sollte erledigt sein...
Gast
2006-04-04, 20:48:34
Am Beginn des CSS empfiehlt sich auch
* { padding: 0; margin: 0; }
Dann muss man sich nicht so oft ärgern
Gast
2006-04-04, 23:47:55
Der IE befindet sich im "Quirksmode". Du musst ihn mit einer korrekten Doctype-Angabe in den standardkonformen Modus schalten und dein Problem sollte erledigt sein...
Der IE6 bafand sich tatsächlich im "Quirks" Modus weil dort "nur":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">stand, was (wenn ich es richtig lese) ohne der "http://www.w3.org/TR/html4/loose.dtd" Adresse den "Quirks" aktiviert. Aber nachdem ich diese eingefügt habe, funktionierte es immer noch nicht :(.

@Gast
Mit Padding geeehhht es nicht...
Kabelsalat
2006-04-04, 23:57:59
Hättest du ein Problem damit, die betroffene Seite hier zu veröffentlichen?
Gast
2006-04-04, 23:59:55
Ps. Wenn es jemand testen möchte, dann sollte man im "nicht Quirks" Modus das "#" vor "background-color:" einfügen, sonst wird die Farbe nicht angezeigt (hab ich im Beispiel vergessen).
Gast
2006-04-05, 00:10:12
Hättest du ein Problem damit, die betroffene Seite hier zu veröffentlichen?

Eigentlich nicht, nur ist dieses DIV Element nur ein kleiner Bereich, der verschachtelt in weiteren DIV Containern auf den ersten Blick unüberichtlich wirken könnte (es sprengt nämlich - dadurch, dass es grösser wird, als im FireFox, das gesamte Teil in dem es sich befindet). Ich habe das eigentliche Problem deshalb rausgehollt und in das Beispiel gepackt. Also wenn es hier verschwindet, wird es dort auch funktionieren.

Hier also nochmal das extrahierte Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="css/format.css">
</head>
<body>

<div class="a">TEXT</div>

</body>
</html>

und die format.css dazu:
.a { background-color:#ffcc00; width:100px; height:11px; font-size:11px }
Gast
2006-04-05, 00:29:30
ps. Im Doctype muss die Endung "/loose.dtd" heissen.
Sephiroth
2006-04-05, 01:31:27
hm ... probier mal noch
line-height:11px
Gast
2006-04-05, 02:32:25
Danke, damit verringert sich der Abstand um 1px, es bleiben aber immer noch 2px übrig, die alle anderen Elemente insgesamt um 14px nach unten verschieben würden (es handelt sich um 7 DIV Container, die untereinander gestapelt, am Ende ein ganz anderes Bild im Vergleich zum FF ergeben)...
darph
2006-04-05, 12:13:54
Du... eh... weißt aber schon, daß eine Textzeile in der Regel durchaus größer ist, als die Großbuchstaben? Es gibt eine Menge Zeichen, die nach oben und unten überragen. Insofern ist das prinzipiell schon richtig so.

Wenn du es unbedingt pixelgenau haben willst und die Zeichenhöhe eh in Pixeln angibst... dann mach doch einen Hintergrund mit einem transparenten gif oder png.

Mit einem negativen margin-top kannst du dann die einzelnen Zeilen aneinander rücken, wenn es unbedingt sein muß.