Frage Border zeigt nur extrempunkte an?!

[H4ck3r]

Hallo, ich weiß nicht wie ich das richtig erklären soll, darum ein Bild im Anhang. Wenn ich das Bild mit der Maus markiere, oder kurz ein anderes Programm öffne wird es danach richtig angezeigt... Daher kann es auch sein dass das an meinem Laptop liegt, das Problem tritt auch nur auf wenn ich die Website mit Safari öffne, Chrome oder andere Browser machen keine Probleme, aber es ist ja trotzdem doof, wenn jemand mit Safari auf die Seite geht und das falsch angezeigt wird ._.
Also kann man das irgendwie beheben? Hier der code:

.profil img {
    display: block;
    border-style: solid;
    border-color: #fff;
    border-radius: 100%;
    border-width: 10px;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    z-index: 1;
}

Danke schonmal für die Hilfe!

H4ck3r

 

[Aaron3219]

Öööööhm...

ich weiß ja gar nicht genau, was du willst.
Das Bild rund bekommen bekommst du so:

.profil img {
    border-radius: 100%;
    width: 20%;
}

Ich kann mir ehrlich gesagt nicht erschließen, was die anderen Attribute da eigentlich sollen.
Kannst du mal einen Link zur Seite schicken?

 

[H4ck3r]

Es ist ja rund, schau doch das mitgeschickte Bild an, das Problem ist, dass der Border nicht komplett angezeigt wird...
die anderen Attribute sind doch eigentlich einleuchtend, haben aber nichts mit der Frage zu tun denk ich? Die Seite ist nicht online.

 

[Aaron3219]

https://jsfiddle.net/Aaron3219/udhsry8a/3/
Tada.
Wie gesagt, da sind einige unnötige CSS-Attribute drinne.
display: block z.B. ist eh ein default-Wert und muss nicht extra geschrieben werden.

 

[scbawik]

Es ist ja rund, schau doch das mitgeschickte Bild an, das Problem ist, dass der Border nicht komplett angezeigt wird...
die anderen Attribute sind doch eigentlich einleuchtend, haben aber nichts mit der Frage zu tun denk ich? Die Seite ist nicht online.

Für mich sieht das aus als spielt da noch mehr Code mit als oben gepostet.
Versuch sonst mal das:

-webkit-transform: translateZ(0);

Ist das Wundermittel gegen fast alle Safari-only Bugs.
Wenn das nicht funktioniert, liegt der Fehler mit hoher Wahrscheinlichkeit bei dir.

 

[djheke]

https://jsfiddle.net/Aaron3219/udhsry8a/3/
Wie gesagt, da sind einige unnötige CSS-Attribute drinne.
display: block z.B. ist eh ein default-Wert und muss nicht extra geschrieben werden.

Seit wann ist ein IMG ein Blockelement?

 

[Aaron3219]

Seit wann ist ein IMG ein Blockelement?

Es ist kein Blockelement. Nur ist der Wert display: block; sowieso gesetzt. Es gibt ja immer einen Standardwert.
Das hier sind alle img Standardwerte:
https://jsfiddle.net/Aaron3219/7xsn60hL/
Ich kann sie leider nicht hier in meinem Beitrag einfügen, da ich sonst die Fehlermeldung aufgrund von zu vielen Zeichen bekomme...

Alle Attribute ohne Wert sind nicht defaultmäßig gesetzt.

Wie du sicherlich erkennen wirst, setzt der Browser das img nicht auf display: unset oder so, sondern auf display: block;

Stell es dir so vor:
Stell dir vor, div-container hätten als default-Wert "justify-content: center"; Wenn wir nun also eine Flexbox rumlegen, wird der div-container automatisch zentriert, ohne das du "justify-content: center" schreiben musst. Display: block ist hier also überflüssig.

Ich hoffe es ist klar was ich meine.

 

[basti1012]

Das hier sind alle img Standardwerte:
https://jsfiddle.net/Aaron3219/7xsn60hL/

Hast du da sowas wie ein Link ,wo man das für andere Elemente auch sehen kann?
Oder gab es dafür mal nicht ein Code wie man das abfragen konnte?

 

[Aaron3219]

Du kannst es bei Google Chrome nachschauen. Du musst auf "Show All" klicken.
Einige Werte sind aber auch nur Browserspezifisch.