Merkwürdiger Abstand

Seite 12

1 Isildur (Gast)

Ich schreibe gerade an der Webseite wobei die Newseinträge durch eine PHP Schleife erzeugt werden, mit immer der selben Formatierung versteht sich. Nur wird der erste Newseintrag in FF(und ich glaube auch in Opera, da ists allerdings kaum zu sehen) nicht aber im IE6 mit einem Abstand zwischen dem Datum und dem unteren Rand angezeigt. Hier ein Screenshot davon:
Link

Der Quellentext sieht so aus

<div class='newshead'>neuster artikel
</div>
<div class='newsbody'>
text
</div>
<div class='newstail'>
<p style='float:right;'>
2006-04-26 20:07:37</p>
<p style='float:left;'>
<a href='?id=1&c=comment&offset=13'>Kommentare</a></p>
<p style='clear:both;'>
</p>
</div>

Wenn ich das p Element mit clear:both rausnehme und dafür bei newstail float:left eintrage wird das margin-top des newsheads ignoriert und die Teile kleben aufeinander.

Gruß,
Isildur

2 Jörg Kruse

Hallo Isildur,

ist der Abstand noch vorhanden, wenn du für die Absätze innerhalb von #newstail die Außenabstände (margin) auf 0 setzt?

<div class='newstail'>
<p style='float:right; margin:0'>
2006-04-26 20:07:37</p>
<p style='float:left; margin:0'>
<a href='?id=1&c=comment&offset=13'>Kommentare</a></p>
<p style='clear:both; margin:0'>
</p>
</div>

3 C)-(iLL@

In Topstyle sieht es so gut aus:

body{ margin: 5px; background: black; color: white; }
div.newshead { border: 1px dotted #A9A9A9; border-bottom: none; padding: 3px; background: #3F3F3F; font-size: 16px; font-weight: bold; text-align: center; }
div.newsbody { padding: 5px; border: 1px dotted #A9A9A9; border-bottom: none; }
div.newstail { border: 1px dotted #A9A9A9; margin-bottom: 10px; background: #2F2F2F; }
div.newstail p { margin: 0; padding: 0 4px; }
div.newstail p.date { float: right; font-size: 12px; }
div.newstail p.date[class] { padding-top:3px;}
div.newstail p.comments { float: left; }
div.newstail p.comments a { color: white; font-size: 12px; text-decoration: none; }
div.newstail div {clear:both}

<div class='newshead'>neuster artikel</div>
<div class='newsbody'>text</div>
<div class='newstail'>
  <p class='date'>2006-04-26 20:07:37</p>
  <p class='comments'>
    <a href='?id=1&c=comment&offset=13'>Kommentare</a>
  </p>
  <div></div> 
</div>
</div>

@Jörg: warum zum Kuckuck brauche ich da einen kleinen Hack, damit der obere Abstand des Datums in newstail im FF gut aussieht? Wo kommen die 3 Pixel her? Im Opera ist's dasselbe.

4 Isildur (Gast)

Mhh also wenn ich .newstail p {margin:0;padding:0;} einstelle bringt das auchnichts. Es dehnt sich aber auch keiner der Absätze aus, der ungewollte Abstand dazwischen ist Niemandsland aber es geht trotzdem nicht mit margin:0 weg?

@C)-(iLL@:Wo ist denn der springende Punkt der dafür sorgt, dass die Version funzt bzw. funzt sie?

5 C)-(iLL@

Wo ist denn der springende Punkt der dafür sorgt, dass die Version funzt bzw. funzt sie?

Ja, die Version funktioniert schon - IE natürlich mir der Einschränkung des 'dotted'-Borders, welcher ihn als 'dashed' interpretiert. Aber sonst sehe ich keine Probleme.

Komischerweise braucht es da für Opera und FF dies hier:

div.newstail p.date[class] { padding-top:3px;}

Sonst klebt das Datum oben an Newstail dran und ist genau 3px höher positioniert als der Kommentar-Link.
Der IE6 interpretiert das nicht, die Browser sehen das (also ein Element p der Klasse 'date' in div.newstail, welches ein Attribut 'class' besitzt).

6 Jörg Kruse

Auch der IE 6 zeigt diesen Abstand an, wenn der Doctype strict ist. Er kommt wohl dadurch zustande, dass die font-size auf verschiedenen Ebenen definiert ist: einmal für den Absatz p.date und einmal für den Link innerhalb des Absatzes p.comment. Wenn im letzteren Fall die font-size stattdessen ebenfalls für den Absatz definiert wird und nicht für den Link, ist die Line-heigt der beiden Absätze gleich groß, so dass beide auf gleicher Höhe liegen (bei einem Link inerhalb des Absatzes muss man wohl noch ein paar pixel hinzurechnen). Der Hack wird dann nicht mehr benötigt

body{ margin: 5px; background: black; color: white; }
div.newshead { border: 1px dotted #A9A9A9; border-bottom: none; padding: 3px; background: #3F3F3F; font-size: 16px; font-weight: bold; text-align: center; }
div.newsbody { padding: 5px; border: 1px dotted #A9A9A9; border-bottom: none; }
div.newstail { border: 1px dotted #A9A9A9; margin-bottom: 10px; background: #2F2F2F; }
div.newstail p { margin: 0; padding: 0 4px; }
div.newstail p.date { float: right; font-size: 12px; }
div.newstail p.comments { float: left; font-size: 12px; }
div.newstail p.comments a { color: white; text-decoration: none; }
div.newstail div {clear:both}

7 C)-(iLL@

Auch der IE 6 zeigt diesen Abstand an, wenn der Doctype strict ist.

Was hast Du für einen IE? ^^ Ich teste sicher nichts in transitional :) Bei mir sehe ich da keinen Abstand (XHTML Strict)

Aber die Lösung funktioniert - wieder mal - einwandfrei!

div.newstail p { margin: 0; padding: 0 4px; font-size:12px}

An der von der Font-Größe abhängigen line-height lags also - und ich hab mich schon gewundert :)

8 Isildur

Mhh also irgendwie ist das merkwürdig. Ich hatte eben Jörgs Code kopiert etwas geschrieben(halt die classes eingetragen das ganze abgestimmt) und es ging. Dann hatte mein Editor ein kleines Problem(automatischer Zeilenumbruch) wodurch irgendwie ein Link beschädigt wurde(fehlte was) das hatte ich dann gefixt und jetzt gehts irgendwie nicht mehr?!
Gleiches Prob wie vorher, kann gut sein, dass ich gerade etwas übersehe so siehts gerade aus:

<div class='newshead'>
	neuster artikel
</div>
<div class='newsbody'>
	text
</div>
<div class='newstail'>
<p class='date'>
	26.04.2006-20:07</p>

<p class='comment'>
	<a href='?id=1&c=comment&offset=13'>Kommentare</a>
</p>
<div>
</div>
</div>

bzw. der PHP Code davon

echo "<div class='newshead'>\n";
         	        	echo "\t".$row['head']."\n";
          	       	echo "</div>\n";
         	        echo "<div class='newsbody'>\n";
          	       		echo "\t".$row['body']."\n";
          	       	echo "</div>\n";
          	       	echo "<div class='newstail'>\n";
                         	echo "<p class='date'>\n";
          	       		echo "\t".new_date($row['date']);
                         	echo "</p>\n";
                         	echo "<p class='comment'>\n";
                         	echo "\t<a href='?id=".$_GET['id']."&c=comment&offset=".$row['id']."'>Kommentare</a>\n";
                                 echo "</p>\n";
                                 echo "<div>\n";
                    		echo "</div>\n";
          	       	echo "</div>\n";

div.newshead
	{
         		background-color:#3F3F3F;
                         border:1px dotted #A9A9A9;
                         font-weight:bold;
                         font-size:12pt;
                         text-align:center;
                         padding:3px;
                         margin-top:10px;
         }
div.newsbody
	{
                      	background-color:#1F1F1F;
         		border:1px dotted #A9A9A9;
                         border-top:0px;
                         padding:5px;
         }
div.newstail
	{
                      	background-color:#2F2F2F;
         		border:1px dotted #A9A9A9;
                         border-top:0px;
                         text-align:right;
                         margin:0px;
                         padding:0px;
         }
div.newstail div
	{
                         clear:both;
          }
p.date
	{
         		float:right;
                         font-size:10pt;
         }
p.comment
	{
         		float:left;
                         font-size:10pt;
         }

ps:benutze im übrigen HTML 4.01 Transitional

9 Jörg Kruse

Meinst du den Außenabstand der Absätze? den kannst du folgendermaßen beseitigen:

div.newstail p { margin:0; }

Dann sind die Abstände im IE, Firefox und Opera gleich

10 Isildur

Mhh nein ich meine, dass es mit dem Code oben immernoch genauso aussieht(also mit dem merkwürdigen Abstand nur im ersten Teil) wie auf dem Bild oben. Also sozusagen das Ausgangsproblem besteht noch bei dem Code aus Post 8.

Seite 12

nach oben weiter >

Merkwürdiger Abstand

Verwandte Themen