Opera und Chrome nehmen das CSS nicht
JürgenBHallo
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
Opera und Chrome nehmen das CSS nicht
Gunnar Bittersmann
Bewertung: keine Bewertung
Opera und Chrome nehmen das CSS nicht
Gunnar Bittersmann
Bewertung: keine Bewertung
Opera und Chrome nehmen das CSS nicht
Matthias Apsel
Bewertung: keine Bewertung
Opera und Chrome nehmen das CSS nicht
Felix Riesterer
Bewertung: keine Bewertung
Opera und Chrome nehmen das CSS nicht
Gunnar Bittersmann
Bewertung: keine Bewertung
Opera und Chrome nehmen das CSS nicht
Matthias Apsel
Bewertung: keine Bewertung
Opera und Chrome nehmen das CSS nicht
Bewertung: keine Bewertung
-
Hallo,
hast du schon mal versucht, das Stylesheet mit
<link rel="stylesheet" href="…" type="text/css"/>einzubinden?Gruß
Jürgen-
@@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
-
-
@@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;
h2ist 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-
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.-
Lieber Matthias,
Aber ohne Anweisungen für Pferde.
richtig, in
figurehat man genügend eigene Elemente, um Bild und -unterschrift visuell voneinander unabhängig fließen zu lassen.Liebe Grüße,
Felix Riesterer.
-
-
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.
-
@@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
headfehlt noch dertitle.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory -
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.-
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
-
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. -
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.-
@@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 FaulknerIch 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 -
-
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.
-
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-containerundflex-itemist 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 denfigure-Elementen selbst geben.Bis demnächst
Matthias--
Rosen sind rot. -
@@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 Listeulsein könnte) kann ja Klasse (bzw. eine ID) haben – und zwar eine, die sich nicht auf die Darstellung bezieht (also nichtflex-container), sondern auf die Funtion (bspw.gallery[1]).Dessen Kindelemente kannst du dann mit
.gallery > divselektieren (bzw..gallery > libei 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
Galerie schreibt sich im Deutschen übrigens nur mit einem l. ↩︎
-
@@JQerleger
Die Bilder sind Vorschaubilder für eine Gallerie und werden anklickbar sein.
Dann solltest du schon
a-Elemente im HTML haben (derenhrefauf das jeweils große Bild zeigt).Komm bitte nicht auf die Schapsidee,
click-Events fürdiv-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-
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.figureist auf jeden Fall mit Syntaxelementen zu setzen.Wenn Berlin mal wieder in der Nähe ist, schau ich mir die 65 1057 Live an.
-
-
-
-
-
-
-
-