tobi85: CSS CALC addieren

Hallo,

stehe mal wieder vor einem Problem, was für mich nicht nachvollziehbar ist.

Wenn ich im Firebug folgendes CSS-Code ergänze, wird alles korrekt dargestellt. Wenn ich es dann in den CSS-File schreibe und die Seite neu lade, wird es vom Browser schlichtweg ignoriert. Das kuriose ist, wenn ich den selben Code nehme und subtrahiere, geht es auch problemlos

width: calc(100% - 4em); // GEHT
width: calc(100% + 4em); // GEHT NICHT im CSS File, allerdings im Firebug, wenn es direkt eingegeben wird.

  1. Hallo tobi85,

    stehe mal wieder vor einem Problem, was für mich nicht nachvollziehbar ist.

    Für uns auch nicht, so ohne Problem.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. Problem gefunden, aber leider keine Lösung.

      Der CSS Compressor macht aus

      width: calc(100% + 4em);

      width: calc(100%+4em);

      Ich nutze den yuicompressor. Jemand eine Idee, was ich machen kann, damit der Compressor die Leerzeichen belässt.

      1. @@tobi85

        Problem gefunden, aber leider keine Lösung.

        Der CSS Compressor macht aus

        width: calc(100% + 4em);

        width: calc(100%+4em);

        Ich nutze den yuicompressor. Jemand eine Idee, was ich machen kann, damit der Compressor die Leerzeichen belässt.

        1. Den kaputten Postprozessor nicht nutzen. (Sondern einen anderen?)

        2. Oder den miesen Hack von Isabela Nastasa verwenden. Aber siehe 1.

        LLAP 🖖

        --
        “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        1. @@Gunnar Bittersmann

          1. Den kaputten Postprozessor nicht nutzen. (Sondern einen anderen?)

          2. Oder den miesen Hack von Isabela Nastasa verwenden. Aber siehe 1.

          Was passiert eigentlich, wenn man statt der zwei Minuszeichen zwei Pluszeichen verwendet? Damit wäre der Code nicht ganz so unleserlich verunstaltet und der Hack nicht ganz so mies.

          Einen Kommentar sollte man trotzdem dazuschreiben, warum das so geschrieben ist.

          LLAP 🖖

          --
          “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      2. Hallo,

        Der CSS Compressor macht aus

        width: calc(100% + 4em);

        width: calc(100%+4em);

        Was passiert denn bei calc(4em+100%)?

        Gruß
        Kalk

        1. Hallo Tabellenkalk,

          Was passiert denn bei calc(4em+100%)?

          Nichts. Weil die Leerzeichen fehlen.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        2. CSS calc() ist leerzeichensensitiv. Wie ich vor einiger Zeit nach mehreren Stunden ratlosen Suchens auch feststellen durfte... Vermutlich deshalb, weil das Minuszeichen gültiger Teil eines CSS Namens ist.

          1. Hej Rolf,

            CSS calc() ist leerzeichensensitiv. […] Vermutlich deshalb, weil das Minuszeichen gültiger Teil eines CSS Namens ist.

            Nein, weil die calc-funktion noch um Schlüsselwörter erweitert werden soll, die Minus-Zeichen enthalten...

            Marc

        3. @@Tabellenkalk

          Der CSS Compressor macht aus

          width: calc(100% + 4em);

          width: calc(100%+4em);

          Was passiert denn bei calc(4em+100%)?

          Das normale Verhalten: ungültiger Parameter für die calc-Funktion → ungültiger Wert für die width-Eigenschaft → der Browser ignoriert diese Deklaration.

          LLAP 🖖

          --
          “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|