Responsive Bild Flex Lücke BUG?

[Henry]

Hallo MrMurphy1,

Zunächst mal vielen Dank für deine Mühe. Die Art und Weise deiner Antwort allerdings, wie auch der faktische Inhalt, finde ich, ich sag es mal höflich, merkwürdig.

Klar. Mit korrektem, aktuellem HTML und CSS.

Was daran falsch ist, kannst du auch erklären?

Wobei du langsam mal erkennen solltest das deine Testseiten dich nicht weiterbringen.

Weil?

Zudem willst du per CSS noch zu viel bestimmen und bastelst dir dadurch Stolperfallen über die dann dann selbst fällst.

Zuviel bestimmen?

Einige CSS-Angaben erscheinen zudem sinnfrei.

Sinnfrei? Im Sinne von nutzlos. Ja, das scheint wohl dein Lieblingswort zu sein.

Zum Beispiel die Bildbreite auf 50 % minimieren. Mit der Praxis hat das nix zu tun.

Wer redet denn von Praxis? Hat mal rein gar nichts mit meiner Frage zu tun und mache ich nur deshalb um das Beispiel optisch angenehmer darzustellen ohne den, der Frage betreffenden, Code durch unnütze Angaben, zu verkomplizieren. Also hättest du dir sparen können.

Das Problem hat Matthias Apsel bereits vollkommen richtig beschrieben. Vielleicht hilft dir ja ein praktisches Beispiel.

Vielleicht. Nur dein Beispiel leider nicht. Dass es nicht, wie erwartet, in jedem Browser funktioniert brauche ich wohl nicht zu erklären, damit meine ich nicht nur IE. Hinzu kommt, dass in allen Browsern justify-content: center; nicht mehr greift, alles linksbündig.

Ich sehe zum Beispiel aus deinen sinnfreien Angaben eher das folgende HTML

<h2>Ohne Link</h2>

…

Ja sags ruhig wieder, also nutzlos. Aber warum?

Beispiel zum Testen:

Beispielseite

Tja, bringt mich leider nur nicht weiter.

Nebenbei bemerkt, Du kritisierst einen Body auf 50%, was nicht mal für realen Betrieb gedacht ist, postest hier in einer arroganten von oben herab Manier und nötigst aber deine Besucher, denn deine Beispiel sieht schon sehr öffentlich aus, zu Google(Connection)Schriften.

/*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

Auch ist viel nutzloser Code-Ballast vorhanden, der manchen Leuten "sinnfrei" erscheinen könnte.

/*Listen dl*/
   @media all {
      dl {
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      dt,
      dd {
      }
      dt {
         font-weight: bold;
         margin: 0rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 1rem 0rem;
      }
      dd p {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

Ich wundere mich auch darüber, warum man Blockelemente nochmal so deklarieren muss

 header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }  

Aber du wirst wahrscheinlich deine Gründe habe, die ich daher auch nicht als "sinnfrei" bezeichnen möchte, denn diese Sachen betreffen ja auch sowieso nicht die Thematik und anmaßen möchte ich mir auch nichts. Allerdings, wie man in den Wald hineinruft, so kommt es auch heraus.

Gruss
Henry