nicht angemeldet
verschiedene Abstände in unterschiedlichen Browsern
Hallo!
Ich habe wieder mal ein Problem mit CSS. In unterschiedlichen Browsern führen die gleichen Angaben zu verschiedenen Abständen. Irgendwo habe ich mal was gelesen, ein Browser nimmt immer nur den Abstand vom oberen zum unteren Element, ein andere nimmt denjenigen der beiden der größer ist oder so ähnlich. Afaik bezog sich das auf IE vs. NN, jetz habe ich aber das Problem, dass die Seite im IE und NN gleich aussehen, Mozilla aber Faxen macht, sprich hier sind die Abstände eigentlich zu groß. Ich haber Überschriften und Absätze in divs gepacht, etwa so:
<div id="ueberschrift">
<h2>
Überschrift
</h2>
</div>
<div id="spaltelinks">
<p>
Blindtext - Blindtext - Blindtext - Blindtext -
Blindtext - Blindtext - Blindtext - Blindtext -
</p>
</div>
Hat jemand eine URL wo so Abstandregeln auseinanderklmüsertrt werden oder kann was dazu schreiben? Danke!
Mozz
-
Ach ja, noch etwas, mit:
div {
margin:0px;
padding:0px;
}habe ich es versucht, bringt aber nichts.
Und noch ein weiterer kleiner Schönheitsfehler:
Warum nimmt ein div mit width:100%; im IE und in Mozilla die ganze Breite ein, nicht aber in NN4?
Mozz
-
Ich habe wieder mal ein Problem mit CSS. In unterschiedlichen Browsern führen die gleichen Angaben zu verschiedenen Abständen.
jetz habe ich aber das Problem, dass die Seite im IE und NN gleich aussehen, Mozilla aber Faxen macht, sprich hier sind die Abstände eigentlich zu groß. Ich haber Überschriften und Absätze in divs gepacht, etwa so:
<div id="ueberschrift">
<h2>
Überschrift
</h2>
</div><div id="spaltelinks">
<p>
Blindtext - Blindtext - Blindtext - Blindtext -
Blindtext - Blindtext - Blindtext - Blindtext -
</p>
</div>div {
margin:0px;
padding:0px;
}Zumindest Deine Überschriftkonstruktion scheint in dieser Form doch irgendwie herzlich sinnlos. Warum packst Du <h2> in ein extra <div>? Formatier doch gleich die Überschrift selber.
Selbiges (abzüglich sinnlos) gilt für <p>.Du kannst CSS auf alle Elemente anwenden, nicht nur auf <div>s. Und wenn Du nur im <div> die Abstände änderst, mußt Du dich doch auch nicht wundern, wenn alle anderen Elemente ihre Abstände beibehalten.
Probier's mit:
h2,p
{
margin:0;
padding:0;
}Ich bin mir ziemlich sicher, daß Du damit den gewünschten Effekt erreichst.
Davon unabhängig ist es meistens sinnvoll, bei Textabständen die Schrifthöhe als Maßstab zu nehmen. 10 Pixel Absatz sehen bei 10 Pixel hohem Text vielleicht gut aus, falls jemand jedoch den Text im Browser auf beispielsweise 30 Pixel vergrößert, machen die 10 Pixel vielleicht nur noch den einfachen Zeilenabstand aus und die ganze Geschichte geht in einer Buchstabensuppe unter. Deshalb besser ems oder Prozente.
Gruß,
soenk.e-
Hallo!
Zumindest Deine Überschriftkonstruktion scheint in dieser Form doch irgendwie herzlich sinnlos. Warum packst Du <h2> in ein extra <div>? Formatier doch gleich die Überschrift selber.
Simmt, muss nicht sein, schon geändert.
Selbiges (abzüglich sinnlos) gilt für <p>.
Das war nur ein Beispiel da sollen noch weitere Absätze rein, die dann eine Spalte bilden, daneben noch eine Spalte/ein div ebenfalls mit Absätzen.
Du kannst CSS auf alle Elemente anwenden, nicht nur auf <div>s. Und wenn Du nur im <div> die Abstände änderst, mußt Du dich doch auch nicht wundern, wenn alle anderen Elemente ihre Abstände beibehalten.
Das Problem ist nicht, dass ich die Abstände nicht ändern könnte, sondern dass die selben Angaben - besonders im Bezug auf margin - in NN4, IE und Mozilla unterschiedlich ausfallen, Gibt es da Regeln?
Ich bin mir ziemlich sicher, daß Du damit den gewünschten Effekt erreichst.
Selbst mit nur einer h1 und einem p:
<h1 style="margin:10px">
Überschrift
</h1><p style="margin:10px">
Text - Text - Text - Text - Text - Text - Text -
- Text - Text - Text - Text - Text - Text - Text
Text - Text - Text - Text - Text - Text - Text
</p>macht Netscape eine riesigen Abstand hinein, etwa so groß wie die Überschrift selbst, ich hatte das Problem schon einmal, es aber dann mit einer .h1-Klasse gelöst <div class=h1> aber in diesem Fall _kann ich das nicht_ machen, da die h1-Überschriften automatisch vom CMS verwendet werden, um die Naigation zu erstellen.
Davon unabhängig ist es meistens sinnvoll, bei Textabständen die Schrifthöhe als Maßstab zu nehmen. 10 Pixel Absatz sehen bei 10 Pixel hohem Text vielleicht gut aus, falls jemand jedoch den Text im Browser auf beispielsweise 30 Pixel vergrößert, machen die 10 Pixel vielleicht nur noch den einfachen Zeilenabstand aus und die ganze Geschichte geht in einer Buchstabensuppe unter. Deshalb besser ems oder Prozente.
Habe gerade mit Prozent herumprobiert, aber da tut sich der NN$ so weit ich gerade gesehen habe noch schwerer.
Mozz
soenk.e
-
hi
Das Problem ist nicht, dass ich die Abstände nicht ändern könnte, sondern dass die selben Angaben - besonders im Bezug auf margin - in NN4, IE und Mozilla unterschiedlich ausfallen, Gibt es da Regeln?
ja, die gibt es. Problem: Netscape 4 addiert die margin-Werte zu seinen normalen dazu, IE und Mozilla nicht.
Grüße aus Bleckede
Kai
-
Hallo!
ja, die gibt es. Problem: Netscape 4 addiert die margin-Werte zu seinen normalen dazu, IE und Mozilla nicht.
Anscheinend aber bevorzugt bei h1, h2,... usw. ich würde mir ja gerne eine eigene Klasse definieren, aber das geht nicht, da ich die h1 und h2 für die automatische Menüerstellung des CMS brauche.
*heul* das gibt es doch irgendwie nicht, die einzige Möglichkeit, die ich jetzt sehe sind negative margin-Angaben für NN4: margin-top:-10px; Ist das sinnvoll, Kai? Oder würdest Du einfach den großen Abstand für NN4 in Kauf nehmen? Das Problem gibt es afaik auch nur bei h1, h2, usw. und Listen evtl.
Mozz
-
hi
*heul* das gibt es doch irgendwie nicht, die einzige Möglichkeit, die ich jetzt sehe sind negative margin-Angaben für NN4: margin-top:-10px; Ist das sinnvoll, Kai? Oder würdest Du einfach den großen Abstand für NN4 in Kauf nehmen? Das Problem gibt es afaik auch nur bei h1, h2, usw. und Listen evtl.
bei mir gibt es, nachdem ich mehrfach wegen eienr verdrehten Hintergrundfarbe angepöbelt wurde grundsätzlich gar kein CSS mehr für Netscape 4. Den (validierten) HTML-Code hat er zu gressen, getestet wird ebenfalls nicht, also mich kannst du zu dem Ding nicht mehr fragen, ich mach mir _dafür_ keine Arbeit mehr.
Grüße aus Bleckede
Kai
-
Hi!
bei mir gibt es, nachdem ich mehrfach wegen eienr verdrehten Hintergrundfarbe angepöbelt wurde grundsätzlich gar kein CSS mehr für Netscape 4. Den (validierten) HTML-Code hat er zu gressen, getestet wird ebenfalls nicht, also mich kannst du zu dem Ding nicht mehr fragen, ich mach mir _dafür_ keine Arbeit mehr.
Eigentlich hast du ja recht, aber hier laufen noch viele Rechner mit NN4 und den müsste man mal etwas Feuer unterm Allerwertesten machen, damit Mozilla drauf kommt und vor allem NN4 runter - selbst wenn das parallel installier ist surfen viele aus Gewohnheit noch mit der alten Gurke.
Mozz
-
Ach, noch etwas,
<div style="float:left; width:60%">
Text - Text - Text - Text - Text - Text
- Text - - Text - Text - Text - Text
</div><div style="float:left; width:40%">
Text - Text - Text - Text - Text - Text
- Text - - Text - Text - Text - Text
</div>d.h. 60% + 40% = 100% kann NN4 auch nicht, sondern nutzt nur etwa 80% des Platzes aus, rechts bleibt noch leere Fläche, Mozilla, IE und Opera haben auch damit keine Probleme. Hat jemand eine Idee, wie man NN4 da überlisten kann.
Mozz
-
-
-
-
-
Das Problem ist nicht, dass ich die Abstände nicht ändern könnte, sondern dass die selben Angaben - besonders im Bezug auf margin - in NN4, IE und Mozilla unterschiedlich ausfallen, Gibt es da Regeln?
Ja, nenne doch bitte in Zukunft die Browser-Versionen. Man kann nicht unbedingt auf Anhieb erahnen, daß Du Dich mit vier Jahre alter Software rumschlägst (oder noch älter?), von der es inzwischen schon zwei neuere Haupt-Versionen gibt.
Zu dem Problem, daß Netscape 4 die Abstände noch falscher berechnet als der immernoch weit verbreitete IE 5 es schon tut, hat Kai ja schon was geschrieben.
Davon abgesehen kann man im Zweifel normalerweise davon ausgehen, daß Netscape 7 bzw. Mozilla es richtig machen - sofern sie im Standard-Modus arbeiten.Was die Definition der Abstände angibt: Das CSS-Papier ist der einzig richtige Anlaufpunkt: http://www.w3.org/TR/REC-CSS2/.
Gruß,
soenk.e-
Hi!
Ja, nenne doch bitte in Zukunft die Browser-Versionen. Man kann nicht unbedingt auf Anhieb erahnen, daß Du Dich mit vier Jahre alter Software rumschlägst (oder noch älter?), von der es inzwischen schon zwei neuere Haupt-Versionen gibt.
... rumschlagen musss... Hier - wie an vielen Unis - laufen eben noch ein Großteil der Rechner mit NN4, sorry, kann da auch nichts machen, wenn die Leute hier eine völlig verhundste Seite mit NN4 sehen, sagen die "Danke" (aus Höflichkeit) dann aber "... und tschüss!!" Ich denke damit muss man einfach noch ein halbes bis ein dreiviertel Jahr leben, deshalb möchte ich aber jetzt auch nicht alles mit Tabellen machen müssen, die page soll ja Netscape 4 überleben ;-)
Davon abgesehen kann man im Zweifel normalerweise davon ausgehen, daß Netscape 7 bzw. Mozilla es richtig machen - sofern sie im Standard-Modus arbeiten.
Das weiß ich auch, aber das bringt mir nichts, ich brauch dann eben einen Workaround damit man es zumindest halbwegs hinbiegen kann.
Was die Definition der Abstände angibt: Das CSS-Papier ist der einzig richtige Anlaufpunkt: http://www.w3.org/TR/REC-CSS2/.
Nun, das ist sogar großteils CSS1, aber wie gesagt, wie es "richtig" _gehört_, ist nicht die Frage.
Mozz
-
... rumschlagen musss... Hier - wie an vielen Unis - laufen eben noch ein Großteil der Rechner mit NN4, sorry, kann da auch nichts machen, wenn die Leute hier eine völlig verhundste Seite mit NN4 sehen, sagen die "Danke" (aus Höflichkeit) dann aber "... und tschüss!!"
Eine Seite muß im Netscape 4 nicht völlig daneben aussehen, nur weil sie CSS einsetzt. Benutze ganz einfach Standard-HTML, binde das CSS-Layout mit @import ein (so das Netscape 4 CSS ignoriert), eventuell noch ein kleiner Hinweis darauf, daß bei Dir zwar alle Browser willkommen sind, aber nur solche, die mit CSS auch wirklich umgehen können, auch das hübsche Design darstellen können, und alle sind zufrieden.
Ich mache das unter http://kino-fahrplan.de seit einigen Monaten und es hat sich noch niemand beschwert - bei bis zu 90.000 Seiten pro Monat und anfangs noch bummelig 10% Netscape 4-Anteil (wechselt seitdem langsam aber sicher in Richtung Gecko).
Verabschieden tun sich die Leute nur, wenn sie tatsächlich nichts lesen können. Bedenke, daß die die meisten eher nicht die bunten Farben bewundern wollen, sondern Informationen suchen - letzteres kann man auch wunderbar auf einer Seite mit Roh-HTML.
Aber die Befürchtung, daß ganze Menschenmassen nicht mehr wiederkommen, weil der Abstand zwischen Überschrift und Text statt 10 im Netscape 4 25 Pixel beträgt, kann doch nicht wirklich Dein Ernst sein, oder? Wenn so ein Pippifax zu Besucherschwund führt, solltest Du Dir besser um etwas anderes Sorgen machen: den dann offensichtlich so entsetzlich uninteressanten Inhalt, daß man vor lauter Langeweile lieber zum Zentimetermaß greift als den Text zu lesen..
Davon abgesehen: Wenn Du weiterhin für Netscape 4 viel Zeit und Mühe investierst, wird niemand einen Grund haben, mal über ein Browser-Update nachzudenken. Denn "es funktioniert doch alles".
Aussperren (landläufig "optimieren" genannt) ist natürlich der falsche Weg, aber auf Gedeih und Verderb am bzw. für Netscape 4 rumzuwurschteln ist im Endeffekt genauso schlecht.Gruß,
soenk.e
-
-
-
-