CSS auf MAC

[Mario Hirtreiter]

Hallo,

ich habe folgendes Problem:

ich binde eine externe CSS-Datei in mein HTML-Dokument ein.
Unter Windows und Internet Explorer funktioniert das ja auch einwandfrei, nur unter Mac-OS 9 / 10.2 und Internet Explorer bzw Safari wird das CSS nicht ausgeführt bzw übernommen.

Hat irgendwer eine Lösung?

So sieht mein CSS aus:

<style type="text/css">
<!--
body { margin:0px;
background-color:#000000;
}
div.startlogo { text-align:center;
}
div.logozelle { vertical-align:middle;
}
img { border-width:0px;
}
a { font-family:"Arial";
font-size:"14px";
line-height:"18px";
font-weight:"bold";
color: "#ff9933";
text-decoration: "none";
}
font.a4s8 { font-family:"Arial";
font-size:"14px";
color:"#000000";
line-height:"18px";
}
font.a2s3 { font-family:"Arial";
font-size:"12px";
color:"#000000";
line-height:"13px";
}
//-->
</style>

Und so binde ich es ein:

<link rel="stylesheet" href="css-scripts/msie/base.css" type="text/css">

Grüsse aus Passau,

Mario Hirtreiter

[Sven Rautenberg]

Moin!

So sieht mein CSS aus:

Steht der angegebene Text im Ernst so in der CSS-Datei? Dann ist das falsch. CSS-Dateien enthalten nur die CSS-Angaben - kein <style>, kein HTML-Kommentar. Genau wie bei Javascript-Dateien, die derartiges auch nicht enthalten.

Eine Validierung der CSS-Datei hätte das mit Sicherheit gezeigt: http://jigsaw.w3.org/css-validator

<style type="text/css">
<!--
body { margin:0px;
background-color:#000000;
}

...

font.a4s8 { font-family:"Arial";
font-size:"14px";
color:"#000000";
line-height:"18px";
}
font.a2s3 { font-family:"Arial";
font-size:"12px";
color:"#000000";
line-height:"13px";
}

Noch was: Du willst mit diesen zwei Definitionen doch bitte nicht ernsthaft andeuten wollen, dass du noch <FONT> benutzt, oder? Das solltest du schnell ändern. Verwende <span> für Formatierungen innerhalb von Textzeilen. Noch besser: Verwende sinnvollere Tags wie <em>, <strong> etc und formatiere sie entsprechend. Und zum Formatieren von kompletten Absätzen wende CSS auf das umgebende Blockelement an, vorzugsweise auf <p>, aber auch <div> geht.

- Sven Rautenberg

[Mario Hirtreiter]

Hallo Sven,

danke für die schnelle Antwort.

Ich habe die Datei so von einem Kollegen übernommen, der früher die Webseite bearbeitet hat.
Und da ich mich gerade in HTML, CSS, Javascript... einarbeite versuche ich unsere Seiten an die neusten Standards anzupassen und die alten Tags wie font rauszuwerfen.
Deshalb wusste ich auch nichts von dieser Validierung.

Habe die Datei bereits geändert und validiert und jetzt funktioniert es auch.

Nur die Sache mit dem div und text-align:center funktioniert unter Mac-OS und Internet Explorer nicht.
Hast du vielleicht irgendeine Idee woran das liegen könnte?

Grüsse Mario.

[ecklvo]

Nur die Sache mit dem div und text-align:center funktioniert unter Mac-OS und Internet Explorer nicht.

Du solltest dem Div eine Breite zuweisen, denn sonst ist es nur so groß wie der Inhalt (browserspezifisch), der Inhalt allerdings dennoch centered...

gruß, e

[Sven Rautenberg]

Moin!

Nur die Sache mit dem div und text-align:center funktioniert unter Mac-OS und Internet Explorer nicht.
Hast du vielleicht irgendeine Idee woran das liegen könnte?

text-align ist für Fließtextformatierung (inline-Content genannt) zuständig. Die Formatierung wirkt auf _enthaltene_ Elemente.

<div> sind aber keine inline-Elemente, sondern Blockelemente. Und da text-align nach innen wirkt, kriegst du ein div auch nicht zentriert, wenn du text-align auf das <div> selbst anwendest.

Zentrierung erreicht man, indem man die margin-Angaben (links und rechts) eines <div> auf "auto" setzt und gleichzeitig eine feste Breite angibt.

<div style="width:100px; margin-left:auto; margin-right:auto;">

Dummerweise kennt der IE (wieder mal) den CSS-Standard nicht und zentriert sowas nicht. Du mußt auf das dieses <div> umgebende Element text-align:center anwenden und diese Formatierung innerhalb des <div>s wieder rückgängig machen (die Eigenschaft wird vererbt, alles wäre zentriert).

http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm

- Sven Rautenberg

[Ingo]

Hi,
Du solltest Dir auch über die Verwendung von Kommentaren im klaren sein. Für CSS-Deklarationen werden sie heute nicht mehr benötigt. Und selbst wenn, das:

//-->

gehört hier sicher nicht rein. Die '//' leiten einen einzeiligen Kommentar in Javascript ein und ich weiss nicht, wie manche Browser dies als CSS-Anweisung zu interpretieren versuchen...

freundliche Grüße
Ingo