nicht angemeldet
800x600 in der Mitte auf größeren Monitoren
Hallo,
am Sonntagmorgen habe ich eine Frage zu CSS-Kompatibilität IE auf der einen Seite und Firefox auf der anderen Seite.
Mir ist bekannt, dass der Internet Explorer diverse CSS-Sachen falsch interpretiert und dass man deshalb etwas gucken muss, dass beide Sorten Browser das Ergebnis bringen, was man haben will.
Ich möchte erreichen, dass eine Ausgabe einer Seite, die für 800 x 600er Auflösung passen soll, auf einem größeren Monitor horizontal in der Mitte steht. Ich bin dabei den Erklärungen aus www.css4you.de gefolgt, wo beschrieben wird, dass man einen div-Container für den Content benötigt, der für die Einschränkung in der Breite sorgt. Die CSS-Angabe sieht bei mir jetzt so aus:
#content {
width: 760px;
margin: 0px auto;
text-align:left;
height:100%;
padding-top:5px;
line-height:15pt;
font-family:Arial, Helvetica, sans-serif;font-size:0.9em;
border:1px solid silver;
padding-left:5px; padding-right:2px;
background-color:#E9E9F7;
}
den body habe ich so: (das Text-align:center soll für die IE-Fehlinterpretation stehen, damit er den Content in die Mitte setzt. Der Text soll aber gar nicht zentriert sein, deshalb wird er im content wieder auf "left" gesetzt.
body {
background-color:#ECECF7;
font-family:Arial, Helvetica, sans-serif;
color: black;
margin: 0;
text-align:center;
}
Mein HTML (Grundgerüst, Kopf usw habe ich weggelassen)
<body>
<div id="content">
Test wo steht es Test Test Wie weit? Test wo steht es Test Test Wie weit? Test wo steht es Test Test Wie weit?
</div></body></html>
So weit, so gut. Das steht in beiden Browsern schön in der Mitte.
Sobald jetzt aber innerhalb des <div id="content"> noch andere CSS-Angaben kommen, sind sie im Firefox wieder über die gesamte Breite des Bildschirms gestreckt, im IE bleiben Sie im mittleren 760-Pixel-Bereich. Also, angenommen, ich brauche irgendeinen anderen Absatz
CSS:
.text {
font-family: Arial, Helvetica, sans-serif;
text-align:left;
}
<body>
<div id="content">
Test wo steht es Test Test Wie weit? Test wo steht es Test Test Wie weit? Test wo steht es Test Test Wie weit?
<p class="text">
Das ist wieder außen.<br />
Es bleibt nicht im div!
</p></div></body></html>
(Der Absatz <p class="text"> ist die minimalste Versuchsanordnung, tatsächlich habe ich ein div für einen Navi-Bereich, für ein Logo, Bilder, alles Mögliche, aber "es springt raus", nur, was direkt und ohne weitere CSS-Angabe im <div id ="content"> bleibt im Firefox im mittle-ren Bereich.
Außerdem zeigt der Firefox nicht die etwas andere Hintergrundfarbe für den äußeren Be-reich (oder umgekehrt), und den 1-px-Rahmen um den content auch nicht.
Ich wäre für Hilfe sehr dankbar. Vor allem will ich auch gerne verstehen, was da passiert!
Viele Grüße
Robert
-
Hi,
zunächst mal wäre eine Beispielseite hilfreicher als nur der Quelltext.
height:100%;
Wozu das? Abgesehen davon, daß es standardkonform nur funktioniert, wenn auch die Vorfahrenelemente eine entsprechende Höhe haben: was ist bei längeren Inhalten?
line-height:15pt;
font-family:Arial, Helvetica, sans-serif;font-size:0.9em;Diese Angaben passen nicht zueinander. Benutze duchgängig em oder für den Ausdruck pt.
Sobald jetzt aber innerhalb des <div id="content"> noch andere CSS-Angaben kommen, sind sie im Firefox wieder über die gesamte Breite des Bildschirms gestreckt, im IE bleiben Sie im mittleren 760-Pixel-Bereich.
Das ist anhand Deines Quelltextes nicht nachvollziehbar.
freundliche Grüße
Ingo-
Hallo Ingo,
zunächst einmal danke für deine Antwort.
Die Website, um die es geht, ist auf einem (kostenlosen, deshalb: Werbung bitte wegklicken) Testaccount zu sehen:http://rkrah.rk.funpic.de/schule2/
Ich hatte ein kleines Beispiel gebastelt, um dem Problem auf die Schliche zu kommen, deshalb der Quellcode in meinem ersten Beitrag, um das Ganze möglichst übersichtlich zu halten.
Die Site soll als kleines, überschaubares CMS dienen, über einen Admin-Bereich kann die Schulleitung Seiten einpflegen und ändern, das funktioniert auch gut, aber, wie gesagt, im Firefox geht´s in die Breite.
Ich bin für Hilfe sehr dankbar.
Robert
-
Hallo,
ich wollte gerne noch die Rückmeldung geben, das ich mein Problem provisorisch geöst habe.Die div-Angabe für den content habe ich aus der css-Datei herausgenommen und in den einzelnen Dateien selber angegeben, also:
<div style="width:760px; …… >So geht es. Ich finde es zwar unbefriedigend, aber immerhin.
Die vorige Version war:
<div id="content"> in der HTML-Datei
und in der css-Datei:
#content {
width:760px;
...
}Das soll ein Mensch verstehen, warum das obere vom Firefox akzeptiert wird und das untere nicht. Aber immerhin, jetzt läuft es.
Danke für´s Zuhören bzw. Lesen
Robert-
Hi,
Die div-Angabe für den content habe ich aus der css-Datei herausgenommen und in den einzelnen Dateien selber angegeben, also:
<div style="width:760px; …… >So geht es. Ich finde es zwar unbefriedigend, aber immerhin.
Dann korrigiere Deine CSS-Datei. Du hast derzeit einen Selektor namens
<!-- Gesamter Inhalt --> #content
angegeben, der (mit allen seinen Regeln) natürlich ignoriert werden muß. Dir ist offenbar der Unterschied zwischen HTML und CSS noch nicht klar.
freundliche Grüße
Ingo-
Hollo Ingo,
du schreibst:
Dann korrigiere Deine CSS-Datei. Du hast derzeit einen Selektor namens
<!-- Gesamter Inhalt --> #content
angegeben, der (mit allen seinen Regeln) natürlich ignoriert werden muß. Dir ist offenbar der Unterschied zwischen HTML und CSS noch nicht klar.
Hier ist mir allerdings nicht klar, was du meinst, und ich bitte höflich um Aufklärung!
Robert
-
Hallo Robert.
<!-- Gesamter Inhalt --> #content
angegeben, der (mit allen seinen Regeln) natürlich ignoriert werden muß. Dir ist offenbar der Unterschied zwischen HTML und CSS noch nicht klar.
Hier ist mir allerdings nicht klar, was du meinst, und ich bitte höflich um Aufklärung!
Du hast einen HTML-Kommentar in einem Stylesheet verwendet, wo er jedoch nichts zu suchen hat. Da an Hand der Konstellation der Nachfahrenselektor angewandt werden müsste, muss ein UserAgent diesen ungültigen Selektor ignorieren.
Einen schönen Montag noch.
Gruß, Ashura
-
Hallo Ingo, hallo Ashura,
danke für eure Hilfe. War ein doofer Fehler von mir, den HTML-Kommentar in der CSS-Datei zu haben. Alles klar.
Robert
-
-
-
Hallo Ingo,
danke für den Hinweis und die Mühe, die du dir gemacht hast, in meiner css-Datei nachzugucken. War ein doofer Fehler von mir, den HTML-Kommentar in der css-Datei zu haben. Trotzdem hoffe ich, dass mir der Unterschied zwischen HTML und CSS einigermaßen klar ist. Ist es dir noch nie so ergangen, dass du einen Fehler nicht findest?Auch an Ashua vielen Dank!
Robert
-
-
-
-