[HTML/CSS] Leerzeile über PRE-Block mit FF

Fluid Byte · Beitrag von **Fluid Byte** » 27.10.2007 22:29

Im folgenden Quelltext wird ein Textblock mittels des <pre> Tag angezeigt. Allerdings wird in FireFox vor der ersten Zeile immer eine Leerzeile mit eingefügt. Beim InternetExplorer ist dies nicht der Fall.

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Code Parser</title>
   <style type="text/css">
      .codebox {
         width: 640px;
         height: 480px;
         border: solid 1px #CCCCCC;
         color: #006000;
         font-family: "Courier New", Courier, monospace;
         font-size: 12px;
         overflow: auto;   
      }
      .linenumbers {
         color: black;
         padding-left: 8px;
         padding-right: 10px;
         background: #EBEBEB;
      }
   </style>   
</head>

<body>
   <div class="codebox" id="codebox">
      <table border="0" cellpadding="0" cellspacing="0">
         <tr>
            <td class="linenumbers" valign="top">
               001<br />002<br />003<br />004<br />005<br />006<br />007<br />008<br />009<br />011<br />011<br />012<br />013
            </td>
            <td valign="top" style="padding-left: 5px;">
<pre>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.

   - Rebum dolores et stet clita
   - Rebum dolores et stet clita
   - Rebum dolores et stet clita
   - Rebum dolores et stet clita

Sed diam voluptua. At vero eos et accusam et justo.
</pre>         
            </td>
         </tr>
      </table>
   </div>
</body>
</html>

Allerdings funktioniert es wenn man die Tabelle entfernt und das <pre> Tag vor den <div> Tag stellt:

Code: Alles auswählen

...

<body>
<pre><div class="codebox" id="codebox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.

	- Rebum dolores et stet clita
	- Rebum dolores et stet clita
	- Rebum dolores et stet clita
	- Rebum dolores et stet clita

Sed diam voluptua. At vero eos et accusam et justo.</div></pre>
</body>

...

AND51 · Beitrag von **AND51** » 28.10.2007 14:27

Logisch, du hast dir die Antwort selbst schon im 2. Code gegeben.
Das DIV hat damit nix zu tun.
Demnach macht der IE das falsch, denn der text muss unmittelbar nax PRE beginnen.
Denn in deinem ersten Code wäre das erste darzustellende Zeichen ein CRLF (Zeilenembruch)

Code: Alles auswählen

<PRE><CRLF>
Text

Nimm einfach deinen 2. Code und lasse das DIV weg:

Code: Alles auswählen

<PRE>Sofortiger Text

Fluid Byte · Beitrag von **Fluid Byte** » 28.10.2007 19:52

Nimm einfach deinen 2. Code und lasse das DIV weg:

Das geht nicht, darauf basiert die ganze Technik. Die Tabelle muss ebenfalls mit rein. Wie sollte das sonst zu realisieren sein?

[edit]
Es wird nicht eine weitere Leerzeile wegen zusätzlicher Sonderzeichen ausgegeben (CR, LF) sondern es ist einer reiner Darstellungsfehler. Ich habe den kompletten Quellcode ein einer Zeile geschrieben und es funktioniert trotzdem nicht.
[/edit]

TomS · Beitrag von **TomS** » 28.10.2007 19:56

Indem du das "pre" unmittelbar vor den Text stellst. Also innerhalb des Divs und der Tabelle.

Code: Alles auswählen

<div><table><tr><td><pre>blablab....

und nicht

Code: Alles auswählen

<pre><div><table><tr><td>blablab....

Fluid Byte · Beitrag von **Fluid Byte** » 28.10.2007 20:18

Schau dir mal meinen ersten Post an! Bild

TomS · Beitrag von **TomS** » 28.10.2007 23:16

Ja. Genau so. Und dann wie AND51 sagte direkt nach dem <pre> anfangen mit dem Text. Nicht erst eine neue Zeile, da die ja offensichtlich vom IE geschluckt wird

AND51 · Beitrag von **AND51** » 29.10.2007 01:04

> Das geht nicht, darauf basiert die ganze Technik.
Dann ist die technik möglicherweise nicht gut durchdacht. Du hast keine andere Wahl, als den Text unmittelbar nach PRE folgen zu lassen.

Und wenn darauf alles basiert, dann würde ich an deiner Stelle die Entwicklung des Programmes so lange anhalten, bis du die technik dahingehend umgestellt hast. Wenn dein Programm nämlich schon fertig ist und du dann erst diesen Bug beheben willst, hättest du noch viel mehr Arbeit.

> Die Tabelle muss ebenfalls mit rein. Wie sollte das sonst zu realisieren sein?
Das verstehe ich nicht. Diesem Satz nach müsste TABLE in PRE rein; aber deinem Code nach ist das PRE im TABLE drin...?
Ich muss gestehen, als ich die Überschirft las, habe ich mir nur die PRE-Stelle angeguckt und nicht, was du sonst noch darin hast.

> Es wird nicht eine weitere Leerzeile wegen zusätzlicher Sonderzeichen ausgegeben (CR, LF) sondern es ist einer reiner Darstellungsfehler. Ich habe den kompletten Quellcode ein einer Zeile geschrieben und es funktioniert trotzdem nicht.
Das hätte ich als nächstes vorgeschlagen.
Aber wenn du sagst, es geht nicht.

Großes Edit:
Du Stoffel!

Du wollst uns testen, was?

Entferne mal das unmittelbar nach PRE folgende Leerzeichen, dann gehts auch!!!

Das hab ich gerade ganz zufällig entdeckt, als ich deinen Code in Notepad bearbeitet habe!

Dann kannst du ruhigen Gewissens auch deine 'linenumbers' mit PRE ausstatten, das möchtest du doch auch, oder?

Deine Linenumbers... Nimms mit nicht übel, mein Freund, aber das geht so nicht. Ich bevorzuge sie nicht-vorgenullt, rechtsbündig. Damit sie nicht ganz rechts am Code klatschen, hast du 2 Optionen:
Gib dem TABLE-Attribut CELLPADDING bzw. CELLSPACING den Wert 3 oder arbeite mit dem STYLE-Attribut MARGIN-RIGHT (Abstand Rechts).

Boah, ich habs mal wieder geknackt.

Jetzt kann ich ruhig schlafen gehen...

Edit aus Langeweile:
2 Tipps (exklusiv) für dich, Fluidi!

Du hälst dich augenscheinlich sehr strikt daran, HTML-konform zu arbeiten. Warum benutzt du dann nicht die STRICT-Variante anstatt TRANSITIONAL?
Es gibt nämlich unterschiede. STRICT bewirkt teilweise eine andere, aber auch genormte Darstellung, denn in STRICT ist alles genauestens geregelt. HTML-Tags müssen in Kleinbuchstaben notiert werden und nicht jedes (Block-)Element darf in jedem anderen Element verschachtelt vorkommen.
Oder tags müssen zum Beispiel auch in der Reihenfolge geschlossen werden, in der sie geöffnet wurden (Standalone-Tags sind mit /> abzuschließen, kennste ja schon).
Dies gebe ich dir als Tipp, denn vielleicht erreichst du so eine andere/besere Darstellung.

Vorrausschauend, dass du CSS benutzt, um die finale Dateigröße zu reduzieren. Entgegenkommend, wenn du für Einrückungen (speziell innerhalb von PRE) auf Leerzeichen verzichtest und stattdessen

TABs
<BLOCKQUOTE> ... </BLOCKQUOTE>
<SPAN STYLE="TEXT-INDENT:1cm;"> ... </SPAN>

benutzt.
Mit diesen Tipps erreichst du einen exakteren Texteinzug bei der Darstellung.

Hinsichtlich des HTML-Codes verringerst du die Dateigröße, wenn du Einrückungen im HTML-Code mit TABs vollbringst.

Alles klar?

Fluid Byte · Beitrag von **Fluid Byte** » 29.10.2007 17:17

Narf! Information Overload!

Bin jetzt zu faul alles durchzulesen. Muss erst mal was fratzen. Bild

AND51 · Beitrag von **AND51** » 29.10.2007 21:01

Es hilft nichts! Du musst es so oder so durchlesen. :-P
Du hättest diesen Bug schon längst beheben können.

Naja, bin jedenfalls auf deine Antwort gespannt.

Fluid Byte · Beitrag von **Fluid Byte** » 29.10.2007 23:38

Drauf geschissen! Es geht jetzt! Ich hab jetzt einfach der Tabellenzelle das PRE tag als style verpasst:

Code: Alles auswählen

<td valign="top" style="padding-left: 5px; white-space:pre;"><?php
...

Das hatte ich vorher schon oft ausprobiert hat aber nie gefunzt. Mann achte aber im obigen code auf das PHP Eröffnungstag.

Das stand vorher eine Zeile darunter...

(deshalb die Leerzeile)