Rechtes Seitenmenü browserabhängig drastisch unterschiedliche Abstände

[webeditor]

Ich bau grad 'ne Seite neu auf und stelle fest, daß im Firefox alles so aussieht wie gedacht, aber: Chromium/auch Chrome reißt auf der Kontaktseite das Seitenmenü auseinander:

Dasselbe Menü - in der Blog-Section, diesmal mit Rubriken gefüllt - sieht korrekt aus:

Ich hab mal die Ergebnisse des Inspectors angehängt.

CSS sieht wie folgt aus:

/* Menüleiste an der Seite */
aside {
    font-size: 1em;
    margin: 1.5em 1em 1.5em 0;      /* top right bottom left */
    padding: 0.1em;
    background: transparent;
    }
aside h2 {
    color : #C0C0C0;
    background-color : transparent;
    font-style : normal;
    font-size : 130%;
    font-weight : bold;
    line-height : 150%;
	margin-top: 0;
	margin-bottom: 0.5em;
	border: solid grey;
    border-width: .2em;
	border-radius: .5em;
    }
aside ul {
    display: flex;  
    flex-direction: column;     /* Listenelemente untereinander */
    position: relative;    left: 0em;    /* Listenelemente neben floats zu positionieren - rückgängig für <aside> */
    padding:0;
    margin: 0;
    }
aside li {
    list-style: none;
    margin: 0;
    padding: 0.25em;
    flex: 1 1 100%;
    }
aside ul a:link {
	display: block;
	margin-bottom: 0.5em;
	padding: 0.5em;
	background-color: #888888;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
	border: solid #E29600;
    border-width: .3em;
	border-radius: .8em;
    }
aside ul a:visited {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    border-color: #E29600;
    background-color: #888888;
    }
aside ul a:hover  {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
    border-color: #E29600;
    background-color: #E29600;
    }

Firefox zeigt auf beiden Seiten völlig gleiche Abstände. Im Quelltext sehe ich keine Unterschiede strukturell, CSS ist gleich - ich komm nicht drauf, wo ich suchen sollte und wäre für sachdienliche Hinweise dankbar.

[MrMurphy1]

Hallo

Das Problem wird wahrscheinlich Flexbox mit flex-direction: column und flex: 1 1 100% sein.

Ich bin zwar bereits seit Jahren ein Flexbox-Fan. Es sollte aber nur dort verwendet werden, wo es auch Sinn macht.

In diesem Fall (li-Elemente senkrecht übereinander) reicht es vollkommen aus die li-Elemente zu block-Elementen zu machen.

Oder willst du etwas erreichen, was mit Block-Elementen nicht geht?

Wenn du unbedingt bei Flexbox bleiben willst reicht es vielleicht die flex-Eigenschaft bei den li-Elementen einfach zu löschen. Häufig entstehen Probleme erst wenn Webseitenersteller zu viel bestimmen wollen.

Ich habs grad noch mal getestet: flex: 1 1 100% löschen hilft.

Gruss

MrMurphy

[webeditor]

In der Tat funktioniert das jetzt ohne das flex in den Listenelementen (mußte das in der Hauptnavigation oben auch rausnehmen, denn sonst hat dort der Chromium bei schmalen Bildschirmen denselben Effekt gezeigt). Danke mal soweit.

[Rolf B]

Hallo webeditor,

Die flex-Eigenschaft ist die Kombination von flex-grow, flex-shrink und flex-basis.

Du gibst 100% für flex-basis an. Da für die Flexbox eine Spaltenausrichtung angegeben ist, beeinflusst flex-basis die Höhe. 100% Höhe - was ist das? Die Höhe des Container-Elements. Bei mir ist das so in etwa die Viewport-Höhe.

Zusammen mit flex-grow:1 sollte das dazu führen, dass die Höhen der Listenelemente alle gleich groß sind und in Summe so hoch wie der Container. Da der Container aber keine Höhenbeschränkung hat, wird er einfach so lange aufgeblasen bis es passt.

Du solltest auch nochmal die Flexbox für die article/aside Verteilung überdenken. Du MÖCHTEST vermutlich, dass die Link-Leiste eine feste Breite hat, so dass die Text gerade passen. Der Artikel soll den Rest füllen. Dafür gibst Du dem Artikel flex: 1 1 auto, und dem aside flex:0 0 14em. 14em hat bei mir gepasst. Deine Idee mit flex:4 1 0% und flex:1 1 0% führt zu einer 4:1 Verteilung, das willst Du vermutlich nicht.

Rolf

[webeditor]

Du gibst 100% für flex-basis an. Da für die Flexbox eine Spaltenausrichtung angegeben ist, beeinflusst flex-basis die Höhe.

Genau das war mir nicht klar: ich bin gedanklich immer noch von der Breite ausgegangen ... danke!

Du MÖCHTEST vermutlich, dass die Link-Leiste eine feste Breite hat, so dass die Text gerade passen. Der Artikel soll den Rest füllen.

Richtig. Ich denke, da muß ich mich noch etwas intensiver einarbeiten ... bin noch nicht wirklich fit mit den flexboxen.

Werd' mal nochmals ins Wiki abwandern und 'nen Abend mit lesen verbringen (und anschließend hoffentlich in der Lage sein, sauberen Code abzusondern ;) )