JQerleger: Opera und Chrome nehmen das CSS nicht

Hallo

und zuerst mal ein Gutes, Gesundes Neues Jahr.

fängt bei mir gut an: im Firefox sieht es so aus wie das gedacht ist, aber Opera und Chrome nehem das CSS nicht. Hier das Beispiel Hab ich da zu viel oder falsch verschachtelt? Am Alkohol von gestern kanns eher nicht liegen.

akzeptierte Antworten

  1. Hallo,

    hast du schon mal versucht, das Stylesheet mit <link rel="stylesheet" href="…" type="text/css"/> einzubinden?

    Gruß
    Jürgen

    1. @@JürgenB

      hast du schon mal versucht, das Stylesheet mit <link rel="stylesheet" href="…" type="text/css"/> einzubinden?

      Wobei type="text/css" nicht falsch, aber überflüssig ist.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. @@JQerleger

    Hier das Beispiel

    Das Markup ist falsch:

    <html>

    Hier fehlt die Angabe der Sprache: <html lang="de">. Warum?

    <div class="flex-item vorschau">
    	<img src="img/vorschau/Vorschau-201710002-Sonnenblume_un_Bewegung.jpg" alt="" /><br>
    	<h2>Sonnenblume und Bewegung</h2>
    </div>
    

    Die Bildunterschrift ist keine Überschrift; h2 ist falsch. Verwende bspw. span; Schriftgröße per CSS.

    Oder

    <figure>
    	<img src="img/vorschau/Vorschau-201710002-Sonnenblume_un_Bewegung.jpg" alt="" /><br>
    	<figcaption>Sonnenblume und Bewegung</figcaption>
    </figure>
    

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hallo Gunnar Bittersmann,

      Oder

      <figure>
      	<img src="img/vorschau/Vorschau-201710002-Sonnenblume_un_Bewegung.jpg" alt="" /><br>
      	<figcaption>Sonnenblume und Bewegung</figcaption>
      </figure>
      

      Aber ohne Anweisungen für Pferde.

      Bis demnächst
      Matthias

      --
      Rosen sind rot.
      1. Lieber Matthias,

        Aber ohne Anweisungen für Pferde.

        richtig, in figure hat man genügend eigene Elemente, um Bild und -unterschrift visuell voneinander unabhängig fließen zu lassen.

        Liebe Grüße,

        Felix Riesterer.

    2. Hi Gunnar und JürgenB,

      ich habe eure Ratschläge befolgt und als neues Beispiel zugänglich gemacht. Allerdings machen die zwei Browser Kandidaten immer noch nicht mit. Die bleiben stur und stellen alles einfach untereinander, ohne FlexBox und Border dar.

      1. @@JQerleger

        Allerdings machen die zwei Browser Kandidaten immer noch nicht mit. Die bleiben stur und stellen alles einfach untereinander, ohne FlexBox und Border dar.

        Hm, weiß auf die Schnelle auch nicht warum. Entsorge mal allen Müll im Stylesheet: allen Präfix-Kram außer -ms.

        Und BTW, im head fehlt noch der title.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. Hallo JQerleger,

        ich habe eure Ratschläge befolgt und als neues Beispiel zugänglich gemacht. Allerdings machen die zwei Browser Kandidaten immer noch nicht mit. Die bleiben stur und stellen alles einfach untereinander, ohne FlexBox und Border dar.

        Die br-Elemente sind abkömmlich. Sie stehen für einen Zeilenumbruch, etwa in Gedichten. Es sieht so aus, als ob du dein CSS doppelt einbindest. Statt

        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        

        verwende

        <meta charset="utf-8">
        

        Die Typ-Angabe "text/css" ist nicht notwendig. Ebenso "text/javascript". Wozu schiebst du deinen Besuchern einen Cookie unter?

        Entferne

        @-moz-document url-prefix() {
        

        (dem übrigens die schließende Klammer fehlt) aus dem CSS. Dann mag es auch der Chrome.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. Alles soweit bereinigt, auch @-moz-document url-prefix() { nur "text/javascript" kann ich nicht entfernen, da ich es nirgends finden kann: hab ich meines Wissens nach auch nicht eingebaut. Das mit dem "prefix" war das Problem. Und hier das Ergebnis.

          Herzlichen Dank euch Vieren

          1. Hallo JQerleger,

            nur "text/javascript" kann ich nicht entfernen, da ich es nirgends finden kann: hab ich meines Wissens nach auch nicht eingebaut.

            Dann setzt Lima-City heimlich ein Cookie. Schau mal in die Quelltextansicht.

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
          2. Hallo JQerleger,

            Alles soweit bereinigt,

            Alles?

            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <link rel="stylesheet" href="chropera.css" type="text/css"/>

            <figure class="flex-item vorschau" role="group">
            

            Ich meine, die Verwendung der Rolle "group" ist falsch. https://www.w3.org/TR/wai-aria-1.1/#group

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
            1. @@Matthias Apsel

              <figure class="flex-item vorschau" role="group">
              

              Ich meine, die Verwendung der Rolle "group" ist falsch. https://www.w3.org/TR/wai-aria-1.1/#group

              📢 No ARIA is better than Bad ARIA
              Principal 1: A role is a promise
              Principle 2: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger

              Steve Faulkner

              Ich meine, auch die Verwendung der Klassen "flex-item" und "vorschau" ist falsch.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            2. Erwischt :(

              1. War wohl doch zu früh aufgestanden gestern.

                Das mit dem Cookie hab ich nur hier auf der Kiste kontrolliert, stammt also von Lima. Ich hab mal versucht mich mit den "ARIA" auseinander zu setzten, denke aber das ich die dann eher weg lasse. Das ist doch ein hoher Aufwand, im Netz was zu finden das kurz und Bündig erklärt wo was zu stehen hat.

                Ich meine, auch die Verwendung der Klassen "flex-item" und "vorschau" ist falsch.

                Die Bilder sind Vorschaubilder für eine Gallerie und werden anklickbar sein. Also wäre "vorschau" als Klasse schon richtig. Bei "flex-item" kann ich ja auch nur "item" nehmen.

                1. Hallo JQerleger,

                  Das mit dem Cookie hab ich nur hier auf der Kiste kontrolliert, stammt also von Lima. Ich hab mal versucht mich mit den "ARIA" auseinander zu setzten, denke aber das ich die dann eher weg lasse. Das ist doch ein hoher Aufwand, im Netz was zu finden das kurz und Bündig erklärt wo was zu stehen hat.

                  Eine allgemeine Aussage „No ARIA ist better then bad ARIA.“ hat Gunnar ja schon gebracht. Wenn du HTML-Elemente bestimmungsgemäß verwendest, brauchst du keine ARIA-Rolle anzugeben.

                  Ich meine, auch die Verwendung der Klassen "flex-item" und "vorschau" ist falsch. Die Bilder sind Vorschaubilder für eine Gallerie und werden anklickbar sein.

                  Galerie schreibt sich im Gegensatz zum englischen gallery mit nur einem „“ und Bilder sind grundsätzlich keine interaktiven Elemente. Du musst dann einen Link oder Button drumrum legen.

                  Also wäre "vorschau" als Klasse schon richtig.

                  Richtig vielleicht, aber auch notwendig?

                  Bei "flex-item" kann ich ja auch nur "item" nehmen.

                  flex-container und flex-item ist präsentationsbezogenes Markup, das sich aus den unzähligen flexbox-Tutorials in die Realität gerettet hat. Auch hier im Forum werden die verwendet. Flexbox hat den Nachteil, solche übergeordneten Container zu benötigen. Aber wenn du nicht viele verschiedene Flexboxbereiche hast, kannst du auf diese Klassen auch verzichten und die entsprechenden Eigenschaften den figure-Elementen selbst geben.

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
                2. @@JQerleger

                  Ich meine, auch die Verwendung der Klassen "flex-item" und "vorschau" ist falsch. Die Bilder sind Vorschaubilder für eine Gallerie und werden anklickbar sein. Also wäre "vorschau" als Klasse schon richtig. Bei "flex-item" kann ich ja auch nur "item" nehmen.

                  Unnütz.

                  Das gruppierende div (was durchaus eine Liste ul sein könnte) kann ja Klasse (bzw. eine ID) haben – und zwar eine, die sich nicht auf die Darstellung bezieht (also nicht flex-container), sondern auf die Funtion (bspw. gallery [1]).

                  Dessen Kindelemente kannst du dann mit .gallery > div selektieren (bzw. .gallery > li bei Auszeichnung als Liste).

                  Sieht dann so aus (der Einfachheit halber – gut sieht anders aus, Artikel dazu).

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

                  1. Galerie schreibt sich im Deutschen übrigens nur mit einem l. ↩︎

                3. @@JQerleger

                  Die Bilder sind Vorschaubilder für eine Gallerie und werden anklickbar sein.

                  Dann solltest du schon a-Elemente im HTML haben (deren href auf das jeweils große Bild zeigt).

                  Komm bitte nicht auf die Schapsidee, click-Events für div-Elemente registrieren zu wollen.

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  1. Hi Gunnar und Matthias,

                    ich seh schon, wenn ich alle Ratschläge und Verweise (siehe Webkrauts ← darauf wär nie gekommen) beherzige, werde ich nie fertig in diesem Leben 😀

                    Die Galerien werden später in moziloCMS landen und dort via Plugin aufgerufen. Die Vorschaubilder bekommen dort ein <img class="contentimage" src="Bild" alt="Bildname etc..." mit. Da muss ich dann im Plugin schauen wo was, wenn, zu ändern ist. figure ist auf jeden Fall mit Syntaxelementen zu setzen.

                    Wenn Berlin mal wieder in der Nähe ist, schau ich mir die 65 1057 Live an.