Zur Navigation

Merkwürdiger Abstand

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

29.04.2006 15:12

2 Jörg

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>

29.04.2006 16:30

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.

29.04.2006 16:55 | geändert: 29.04.2006 16:58

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?

29.04.2006 18:57

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).

29.04.2006 19:24 | geändert: 29.04.2006 19:25

6 Jörg

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}

29.04.2006 21:48 | geändert: 29.04.2006 21:49

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 :)

29.04.2006 22:00

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

01.05.2006 15:10

9 Jörg

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

01.05.2006 16:49

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.

01.05.2006 20:47