Der rote Kreis ist rund stehend oval und liegend oval je nach Betriebssystem

[Matthias Scharwies]

Servus!

Ein frohes Jahr euch allen! Ich bin dabei, die als problematische Seite genannte zu entwickeln und habe folgendes Problem: Unter jedem Bild ist ein Button platziert, dem ich einen Border und eine Hintergrundfarbe gegeben habe. Meine Erwartung ist einen runden roten Kreis zu sehen in dem ein eingekreistes "I" zu sehen ist.

Danke für Dein Online-Beispiel.

Ich habe FF121 unter Windows 11 und sehe auch ein Oval!

#t_b {
  font-size: 1.5em;
  color: #000;
  text-align: right;
  vertical-align: top;
  margin-left: 8em;
  border: outset 6px;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
  border-radius: 2em;
  border-color: transparent;
  cursor: pointer;
  background: #f00;
}

Du hast keine Größenangabe, deshalb stellt es jeder Browser ein bisschen anders dar.

Mein Vorschlag:

button {
  width: 1em;
  aspect-ratio: 1;
 border-radius: 50%;
}

Setze eine Breite! Das Seitenverhältnis und auch der border-radius wachsen dann bei einer späteren Änderung mit.

In einem runden Button würde ich den Inhalt zentrieren, nicht oben und rechts positionieren.

Achtung

Du solltest an der Grundstruktur der Seite (Tabellen-Layout, Navigation mit select und option, etc) arbeten. Das entspricht nicht dem Standard.

Überprüfe Deine Seite mal im Validator!

Herzliche Grüße

Matthias Scharwies