Ein erneuter TRY and ERROR / Websiteprojekt / Cardlayout

[einsiedler]

Hallo Leute, nach längerer Zeit sitze ich nun wieder an meinem Projekt, einer Portal-Seite.
Noch bearbeitet werden muss das Menue im header und der footer und die Verlinkung.
Momentan bin ich nun soweit (ich habe da mal etwas angepasst ;o)) )
Portal Testseite
Da habe ich im IE 10 noch das Problem, wohl wegen dem border-box Problem,
das DIE Items (das erste, dritte und fünfte) die ohnehin 100% breit sind (bei allen
anderen Browsern) breiter angezeigt werden und ins nächste Item überragen.
Diesem drei Items habe ich ein
flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 4px);

mitgegeben und nun zeigt auch der IE 10 die richtige Breite an. Doch nun habe ich das Problem mit dem Text neben dem Image, das überragt immer ins
nächste Item. Ich nehem an das hat mit dem border-box zu tun oder? Meine Lösung, die mir aber missfällt ist, wie dem figure-Bereich eine feste Breite
mitzugeben, das habe ich derzeit auch so gemacht.

      .bmuehlbauerpw section figure,  
      .tabekame section figure,  
      .bmuehlbauerep section figure {  
         margin: 0.7rem 0.3rem 0.5rem 0.3rem;  
         flex-grow: 0;  
         flex-shrink: 0;  
         flex-basis: 39%;  
         border: 1px dotted grey;  
         /*align-self: center;*/  
      }  
     .bmuehlbauerpw section div,  
      .tabekame section div,  
      .bmuehlbauerep section div {  
         flex-grow: 0;  
         flex-shrink: 0;  
         flex-basis: 52%;  
         border: 1px dotted grey;  
      }

Die anderen Browsern denen ist es egal und passen den Text (im div= neben dem Bild den
restlichen platz an, ja o.k. , mir gefällt es jetzt nicht dem div-Bereich konkrete 52%
mitzugeben, der Wert stimmt ja auch nicht, weil es eigentlich 61% sein müssten.
100% - (figure-Bereich, also 39%) = X Und alles nur wieder wegen dem IE! Also der 10ner... Was mache ich nun .. ???
Ich wollte nun ausprobieren:

*, ::before, ::after {
			box-sizing: border-box;  
			box-sizing: inherit;  
			
			margin: 0;  
			padding: 0;  
                     }
Das, was nun dort steht:  
 * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
dadurch ersetzen?   
Und zusätzlich dieses:  
.bmuehlbauerpw section div,    
.tabekame section div,  
.bmuehlbauerep section div {    
flex-grow: 0;    
flex-shrink: 0;    
flex-basis: 52%;    
border: 1px dotted grey;    
} 

dann wieder weg!!!

Was ist zu tun???

Gruß der einsiedelnde

[Matthias Apsel]

Hallo einsiedler,

Was ist zu tun???

Nutze die Vorschau um deinen Beitrag lesbar(er) zu gestalten. Strukturiere deinen Beitrag in Absätze. Formatierungshilfe gibt es im Wiki.

Warum hast du das Tag meinung verwendet?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Nutze die Vorschau um deinen Beitrag lesbar(er) zu gestalten.

Ich hab das mal etwas korrigiert.

An einer Stelle war ein Code-Block als Inline-Code ausgezeichnet. Das ist ein Problem der Forumsoftware.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

An einer Stelle war ein Code-Block als Inline-Code ausgezeichnet. Das ist ein Problem der Forumsoftware.

Nein.
Wenn man
in diesem Text
die beiden mittleren Zeilen
als Code auszeichnen möchte,
setzt die Forumssoftware das korrekte Markup.

Nein.
Wenn man

in diesem Text  
die beiden mittleren Zeilen  

als Code auszeichnen möchte,
setzt die Forumssoftware das korrekte Markup.

Selbst, wenn man
mitten in der Zeile
beginnt, den Code auszuzeichnen
setzt die Forumssoftware das korrekte Markup.

Selbst, wenn man
mitten

in der Zeile  
beginnt, 

den Code auszuzeichnen
setzt die Forumssoftware das korrekte Markup.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@einsiedler

Da habe ich im IE 10 noch das Problem

Hast du nicht. Du hast andere Browser zur Verwendung. Und die Nuzter auch. Laut Can I Use hat IE 10 in Deutschland noch eine Verbreitung von sage und schreibe 0.08%. Und du verschwendest ernsthaft Gedanken an die Darstellung im IE 10? Ernsthaft?

*, ::before, ::after {
			box-sizing: border-box;  
			box-sizing: inherit;  

Das kann nichts werden. Du überschreibst den Wert border-box (den du haben willst) für alle Elemente mit inherit – wovon sollen die denn erben?

Und wenn du die Breite halbieren willst und Werte wie 52% oder andere magic numbers im Stylesheet zu stehen hast, machst du grundsätzlich was nicht richtig.

LLAP 🖖