Problem mit HTML/CSS nur auf Apple

Hallo.

Ich musste leider bemerken das mein Code unter Macs völlig anders reagiert als auf Windows Rechnern. Unter Windows XP mit Chrome, IE8, FF und Opera wird folgender Code identisch angezeigt. Unter Apple Safari und FF sieht man das ganze versetzt.

Windows so:

X TEXT
X TEXT
X TEXT

Apple so:

X TEXT
  X TEXT
    X TEXT

Hier der Code:
http://jsfiddle.net/mbekX/

Wenn ich für <dd> eine feste Höhe gebe, dann klappt es auch auf Apple. Aber unter <dd> können Mehrzeiler stehen, daher geht das so nicht. Kann mir da jemand vielleicht weiterhelfen?

nman

Kann ich so jetzt ehrlich gesagt nicht nachvollziehen (OS X Mountain Lion, Safari 6.0.1):
http://i.imgur.com/2lgaJ.png

In meinem Original ist es direkt so wie meine Textbeispiele verschoben. In jsfiddle habe ich schon bissle rumgespielt, aber unter Windows sind die grünen Rechtecke alle exakt untereinander. Wie man in deiner Grafik sieht, bei Apple nicht und genau das ist das Problem hier.

Shade Of Mine

~Apple schrieb:

In meinem Original ist es direkt so wie meine Textbeispiele verschoben.

Dann zeig uns doch das Original.

Aber was willst du denn genau erreichen?
Mit :after wirst du auch vielen Browsern Probleme bekommen.

PS:
unter Opera und Firefox (Windows) habe ich das selbe Ergebnis wie nman und auch unter Chrome (Windows) sind die Gruenden flachen nicht exakt untereinander.