Darstellungsfehler (?) - Unterschiede zwischen Windows- und Mac-Systemen

[Der_Johnny]

Mir ist gestern ein kurioses Problem unterlaufen. Dass es unterschiedliche Interpretationen der CSS von FF und IE gibt, war mir klar. Jedoch bezieht sich mein Problem mit auf einzelne Browser, sondern "scheint" (!) an dem System zu liegen.

Ich habe folgende Seite online gestellt und auf dem Internet Explorer, Firefox und Chrome getestet. Alles sieht auf dem Rechner, auf dem ich die Seiten bearbeitet habe (mit Wordpad <--- Old School ich weiß ;) ), genau so aus, wie es soll. Für den IE brauchte ich zwar einige CSS Hacks, aber die habe ich endlich auch so hinbekommen, dass der IE dasselbe anzeigt, wie FF und Chrome.

Dann habe ich mir zu Hause die Seite mit meinem Mac angeschaut und festgestellt, dass sowohl auf Safari, als auch im Chrome einiges verschoben ist, obwohl es auf dem Windows-Rechner korrekt aussieht.

Das ist die Seite:
Department of Theology*»*Systematic Theology II (Ethics)

Auf meinem Mac wird das "Department of Theology" in der linken Spalte umgebrochen und weist einen großen Abstand zum Headerbanner auf. Auch die Abstände des linken Menüs zum beigen Mainbereich sind auf dem Mac anders, als auf dem Windowsrechner, was mich zutiefst verwundert, weil auf beiden Rechnern Chrome installiert ist und der Windows Chrome Browser was anderes anzeigt, als der Mac Chrome Browser...verrückt...

Hier ein Auszug aus der HTML-Datei:

<div id="seite">
<a name="seitenmarke" id="seitenmarke"></a>


<div id="kopf">
<div id="FAUlogoOben"><img src="http://www.html.de/images/FAUlogoOben.jpg" alt="" class="logoPrint" /></div>

<div id="back_en">
<span><a href="http://www.theologie.uni-erlangen.de/">Department of Theology</a></span>
</div>

Der DIV-Container mit der Klasse "back_en" wird auf dem Mac anders angezeigt, auf dem Windowsrechner. Klingt komisch, ist aber so!

Die entsprechende CSS-Definition sieht so aus:

div#back_en {
position: absolute;
top: 205px;
left: -210px;
width: 190px;
height: 23px;
}

div#back_en span a {
text-decoration: none;
font-size: 1.0em;
color: #FFF9E7;
}

div#back_en span a:hover {
text-decoration: underline;
color: #FFF9E7;
}