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.