Malcolm Beck´s: Opera zum X.ten, heute: white-space

مرحبا

Ich hab wieder was mit Opera -- dieses Scheissding treibt mich noch in den Wahnsinn.

Was ist an

/* Sätze nicht abschneiden */  
p span,  
li {  
  white-space:pre;  
}

Unmissverständlich?
Wieso schafft diese Krücke nichtmal so etwas triviales, was selbst irgendein IE richtig darstellt?

Wenn ich die Leerzeichen mit den geschützten Leerzeichen   ersetze, schafft es auch Opera, aber wer will sowas in seinem Quellcode?

Online-bsp. -- die dritte Box ist mit  

Irgendwelche Ideen, wie es auch Opera gebacken kriegt?

mfg

  1. Grüße,
    ich sehe kein unterscheid zwischen der 3tten und 2en box. was passt denn nicht?
    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth
    1. مرحبا

      ich sehe kein unterscheid zwischen der 3tten und 2en box. was passt denn nicht?

      Hier mal 2 Bilder, wie es sein soll und wie es ist.

      Opera: nur die dritte Box sieht aus wie gewünscht, allerdings nur mit den geschützten Leerzeichen  , die will ich aber nicht.

      http://cdn.imghack.se/images/b8950f9b23a8a8641bcff041c9c6f85b.jpg

      Firefox und eigentlich alle Browser, mit denen ich getestet habe, zeigen es so (wie gewünscht):

      http://cdn.imghack.se/images/848077180ce99f787252195933ee0df4.jpg

      Hier noch das HTML inkl. CSS (Copy&Paste):

      <!DOCTYPE html>  
      <html>  
      <head><meta charset="utf-8">  
      <title>Test</title>  
      <style>  
      [code lang=css]p, ul {  
        margin:35px 0;  
        padding:10px;  
        width:720px;  
        border:1px inset;  
      }  
      p span,  
      li {  
        margin:0 25px 0 0;  
        border-bottom:1px solid;  
      }  
      ul {  
        list-style:none;  
      }  
      ul li {  
        display:inline;  
        white-space:pre;  
      }  
      p:first-child span {  
        white-space:pre;  
      }  
      p:nth-child(1),  
      p:nth-child(3),  
      ul {  
        border-color:green;  
      }  
      p:nth-child(2) {  
        border-color:red;  
      }
      

      </style>
      </head><body>

      <p>
      <span>Dies &amp; Das in Bochum</span>
      <span>Dies &amp; Das in Witten</span>
      <span>Dies &amp; Das in Herne</span>
      <span>Dies &amp; Das in Gelsenkirchen</span>
      <span>Dies &amp; Das in Recklinghausen</span>
      <span>Dies &amp; Das in Dortmund</span>
      <span>Dies &amp; Das in Castrop-Rauxel</span>
      <span>Dies &amp; Das in Essen</span>
      </p>

      <p>
      <span>Dies &amp; Das in Bochum</span>
      <span>Dies &amp; Das in Witten</span>
      <span>Dies &amp; Das in Herne</span>
      <span>Dies &amp; Das in Gelsenkirchen</span>
      <span>Dies &amp; Das in Recklinghausen</span>
      <span>Dies &amp; Das in Dortmund</span>
      <span>Dies &amp; Das in Castrop-Rauxel</span>
      <span>Dies &amp; Das in Essen</span>
      </p>

      <p>
      <span>Dies&nbsp;&amp;&nbsp;Das&nbsp;in&nbsp;Bochum</span>
      <span>Dies&nbsp;&amp;&nbsp;Das&nbsp;in&nbsp;Witten</span>
      <span>Dies&nbsp;&amp;&nbsp;Das&nbsp;in&nbsp;Herne</span>
      <span>Dies&nbsp;&amp;&nbsp;Das&nbsp;in&nbsp;Gelsenkirchen</span>
      <span>Dies&nbsp;&amp;&nbsp;Das&nbsp;in&nbsp;Recklinghausen</span>
      <span>Dies&nbsp;&amp;&nbsp;Das&nbsp;in&nbsp;Dortmund</span>
      <span>Dies&nbsp;&amp;&nbsp;Das&nbsp;in&nbsp;Castrop-Rauxel</span>
      <span>Dies&nbsp;&amp;&nbsp;Das&nbsp;in&nbsp;Essen</span>
      </p>

      <ul>
      <li>Dies &amp; Das in Bochum</li>
      <li>Dies &amp; Das in Witten</li>
      <li>Dies &amp; Das in Herne</li>
      <li>Dies &amp; Das in Gelsenkirchen</li>
      <li>Dies &amp; Das in Recklinghausen</li>
      <li>Dies &amp; Das in Dortmund</li>
      <li>Dies &amp; Das in Castrop-Rauxel</li>
      <li>Dies &amp; Das in Essen</li>
      </ul>

      </body>
      </html>[/code]

      mfg

      1. Grüße,
        recht interessant - aber ok, die erste box hat li mit white-space:pre, die 2/3 nicht. hast du was bestimmtest erreichen wollen?
        MFG
        bleicher

        --
        __________________________-

        FirefoxMyth
  2. @@Malcolm Beck´s:

    nuqneH

    white-space:pre;

    Warum verwendest du "pre", wenn du "nowrap" willst?

    Irgendwelche Ideen, wie es auch Opera gebacken kriegt?

    S.o.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. مرحبا

      white-space:pre;

      Warum verwendest du "pre", wenn du "nowrap" willst?

      Ich könnte schwören, dass es mit "nowrap" nicht geklappt hatte.

      Danke, dass war's.

      Wobei doch auch pre eigentlich Funktionieren müsste, oder?

      mfg

      1. Wobei doch auch pre eigentlich Funktionieren müsste, oder?

        Nein pre übernimmt die Whitespace-Zeichen wie sie daherkommen - da darf es, wenn du keinen Umbruch notierst, auch keinen Umbruch geben.

        1. مرحبا

          Nein pre übernimmt die Whitespace-Zeichen wie sie daherkommen - da darf es, wenn du keinen Umbruch notierst, auch keinen Umbruch geben.

          In meinen Beispielen waren ja keine Zeilenumbrüche. Es waren Sätze in Elementen, bei mir span und li.
          Wird wohl einfach nur ein kleiner Bug in Opera sein.

          mfg

          1. Nein pre übernimmt die Whitespace-Zeichen wie sie daherkommen - da darf es, wenn du keinen Umbruch notierst, auch keinen Umbruch geben.

            In meinen Beispielen waren ja keine Zeilenumbrüche. Es waren Sätze in Elementen, bei mir span und li.
            Wird wohl einfach nur ein kleiner Bug in Opera sein.

            li hat die default-display-Eigenschaft "list-item", das verhält sich wie "block" nur mit einem Listenaufzählungssymbol davor.

            1. Nein pre übernimmt die Whitespace-Zeichen wie sie daherkommen - da darf es, wenn du keinen Umbruch notierst, auch keinen Umbruch geben.

              In meinen Beispielen waren ja keine Zeilenumbrüche. Es waren Sätze in Elementen, bei mir span und li.
              Wird wohl einfach nur ein kleiner Bug in Opera sein.

              li hat die default-display-Eigenschaft "list-item", das verhält sich wie "block" nur mit einem Listenaufzählungssymbol davor.

              Arr - zu früh abgeschickt :)

              Wenn du daraus ein inline-Element machst, ist es - no na - inline :)

              white-space: pre; musst du auf das Eltern-Element anwenden, um den gewünschten Effekt zu erreichen (die p-Elemente oder im letzten Fall das ul-Element) - oder stehe ich immer noch auf der Leitung?

              1. مرحبا

                white-space: pre; musst du auf das Eltern-Element anwenden, um den gewünschten Effekt zu erreichen

                Nein, ich kann white-space auf alle Elemente anwenden, wie ich es brauche, also war es schon richtig. Zumal Opera es mit li-Elementen, als auch mit span-Elementen verbockt hat.

                Vergleiche mal das hier mit Opera und Firefox.
                Opera stellt alles in einer Zeile dar, obwohl es 2 Zeilen sind.

                mfg

  3. /* Sätze nicht abschneiden */

    Irgendwelche Ideen, wie es auch Opera gebacken kriegt?

    mfg

    Ändert man
    [code lang=css]ul li {
      display:inline;
      white-space:pre;
    }

    in  
    ~~~css
    ul li {  
      display:inline-block;  
      white-space:pre;  
    }
    

    leistet zumindest Opera 11.61 das Verlangte, d.h. Block 4 wird dargestellt wie Block 3 des Beispiels.

    Gruß H.

    1. مرحبا

      leistet zumindest Opera 11.61 das Verlangte, d.h. Block 4 wird dargestellt wie Block 3 des Beispiels.

      Danke für den Hinweis, aber nowrap war schon Zielführend. Hat auch den netten nebeneffekt, dass selbst einige ältere Browser bedient werden, die bspw. display:inline-block; nicht verstehen.

      p span,  
      li {  
        white-space:nowrap;  
      }
      

      Ob das Verhalten mit "pre" ein Bug oder richtig ist bleibt wohl ein Rätsel.

      mfg