Bedingt durch mein neues Design hier auf der Webseite hatte ich Probleme mit der korrekten Darstellung der abgerundeten Ecken oben im Menü. Im Firefox war es kein Problem einzelne Ecken abzurunden, also einen Tab darzustellen, der oben abgerundet, aber unten eckig ist. Im Safari hat das leider nicht so einfach funktioniert, da ich wohl falsche Angaben gefunden hatte.
Wie so oft führt eine falsche Schreibweise zu falschen Ergebnissen. So führt die CSS-Angabe: -moz-border-radius: 15px;
in Mozilla und Webkit-Browsern zum gleichen Ergebnis, einer rundum abgerundten Fläche. Die Angaben:
-webkit-border-radius: 15px;-moz-border-radius-topleft: 8px;
und: -webkit-border-radius-topLeft: 8px;
klappen aber nicht! Im Webkit-Browser lautet die richtige Schreibweise: -webkit-border-top-left-radius: 8px;
, also leicht umgedreht im Vergleich zum Mozilla und jedes Wort mit Trennstrichen getrennt. Erst so kann man einzelne Ecken unterschiedlich per CSS formatieren.