Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Abstände in Listen
| geschrieben von wok am 13.01.2008 - 15:17 |
| Hallo, Ich habe mich entschlossen, für diese Frage doch ein neues thema zu eröffnen, da es ja nicht mit "Rand vermeiden" zu tun hat. Nochmal ganz kurz um was es mir geht. Ich schrieb bereits: 1.) Zur Zeit versuche ich die Seite Leitbild "fc_leitbild.html" unserer website (filmclub-fn.de) auf div umzustellen. Dabei ist mir aufgefallen, daß Internet-Explorer und Firefox die Zeilenabstände in eine ul unterschiedlich darstellen. Dadurch gerät natürlich die ganze Seite durcheinander. Wie kann ich eine gleiche Darstellung in der verschiedenen browsern erreichen 2.) Sorry Leute, ich gestehe: Anfängerproblem. Bin eben immer noch ein ganz schönes greenhorn. Ich habe heraus gefunden. Der Unterschied liegt wohl darin, daß IE den ersten <br> nicht ausführt und als den bei Listen notwendigen Zeilensprung interpretiert. FF hingegen führt jeden angegebenen <br> als zusätzlichen Zeilensprung aus. Wird kein <br> angegeben, ist die Darstellung identisch, wird ein oder mehrere <br> angegeben differiert die Darstellung um einen <br>. Die Lösung die ich gefunden habe: mit style Zeilenabstand arbeiten. Aber vielleich kann ja jemand bestätigen, daß ich auf dem richtigen Weg bin (oder mich wieder 'mal im Wald der Möglichkeiten verlaufen habe). Soweit so gut, aber so richtig ist es doch noch nicht die Lösung. Bei einzeiligen Aufzählungspunkten geht es zwar, aber bei Mehrzeiligen wird natürlich der Abstand von jeder Zeile zur nächsten beeinflußt. Kann den der Abstand innerhalb einer Liste beeinflußt werden? Die beiden Seiten sind http://www.filmclub-fn.de "Leitbild" und "Mitglieder". Im Netz stehen noch die alten Dateien mit Tabellen. Die habe ich mittlerweile auf div-Layout umgestellt, aber das hat ja keinen Einfluß auf das Problem. |
| geschrieben von wok am 15.01.2008 - 14:48 |
| Haaaaaallo, ist da noch jemand? Frage falsch gestellt? Frage zu blöd? Seid Ihr zu müde? Oder habt Ihr keine Lust??? |
| geschrieben von Danny am 15.01.2008 - 20:49 | ||||
| Hallo wok, tut mir leid das du bisher keine Antwort erhalten hast. Ich hoffe das ich dich richtig verstanden hab, dann sollte Frage 1 und 2 ja eigentlich ähnlich sein. Wenn du in die LI jeweils den Aussenabstand nach unten festsetzt, benötigst du keine br und somit sieht es auch in allen Browsern gleich aus.
diese sich immer wiederholenden Style Angaben kannst du natürlich auch in CSS Klassen packen, wie das geht solltest du eigentlich einfach im Netz finden. Falls nicht frag nochmal nach. Gruß Danny |
| geschrieben von wok am 15.01.2008 - 23:10 |
| Hallo Danny, erst 'mal vielen Dank für Deine Hilfe. Schaut nicht schlecht aus. Werde morgen mit Deiner Lösung noch weiter experimentieren und mich dann wieder melden. |
| geschrieben von wok am 26.01.2008 - 15:16 |
| Hi Leute, habe mittlerweile viel probiert und natürlich funktioniert die Lösung von Danny. Allerdings sind mir ein paar andere Dinge aufgefallen und z.Z. noch unverständlich. Um Deine Lösung zu testen habe ich zwei Li-Elemente in die Seite eingebaut. Dabei habe ich festgestellt, daß im IE in einem Element über dem ersten Aufzählungspunkt eine Leerzeile ist und in dem Anderen nicht. Eine besondere Anweisung dafür ist aber nicht vorhanden. Einziger Unterschied ist, im ersten ist keine Angabe zur Breite vorhanden, im Zweiten wird die Breite über eine width-Angabe definiert. D.h. im Umkehrschluß die Angabe einer Breite beeinflußt auch die Darstellung in der Höhe. Die Anweisung "margin-top" funktioniert im IE m.M. richtig. Im FF allerdings kann der Abstand nicht auf 0px gestellt werden. Es bleibt immer ein Mindestabstand von 18px zum darüberliegenden Element. Allerdings nur, wenn ich einen Rahmen um das Element darstellen will. Warum? Ist das die Regel, mache ich einen Fehler oder funktioniert der FF hier nicht richtig? |
| geschrieben von Danny am 26.01.2008 - 20:05 |
| Hallo, zeig mal bitte den Code mit den zwei Listen. Du hast recht, das Verhalten der einzelnen Browser ist gerade im Bezug auf Margin und Padding sehr unterschiedlich, allerdings gibt es fast immer auch eine Lösung die in allen Browsern fast identisch aussieht. |
| geschrieben von wok am 29.01.2008 - 15:18 | ||||||||
| Hi Danny, zugegeben handelt es sich eher um eine theoretische Abhandlung, da die Frage zur Zeit keine praktische Relevanz hat. Beim Testen verwende ich wieder, wie schon bei meinen ersten Versuchen mit Tabellen, Rahmen um die Wirkung verschiedener Codes zu testen. Dabei ist mir die unterschiedliche Darstellung im IE und FF aufgefallen. 1.) Der Code (Auszug) hier:
zeigt im FF über der ersten (Listen-)Zeile einen Abstand (ausgetestet mit 18px Höhe), der IE nicht. 2. Wenn ich nun im zweiten div-Bereich (der, indem die Liste angezeigt wird) die Angabe zur Breite (width:640px;) entferne, wird auch im IE ein Abstand dargestellt. 3. Entferne ich im zweiten div-Bereich den Rahmen,
dann wird auch im FF kein Abstand zur Oberkante des div-Bereiches dargestellt. IE und FF sehen gleich aus. Solche Zusammenhänge werden leider in der Literatur nicht angesprochen, geht natürlich auch nicht. Mein Problem in der gesamten Thematik ist, das die Browser eben sehr Fehlertolerant sind, der IE mehr noch als der FF und ich daher nie weiß, funktioniert nun der Browser - in diesem Fall der FF - nicht richtig oder habe ich einen Fehler im Code. |
| geschrieben von wok am 06.02.2008 - 22:11 |
| Hallo Leute, mehr als eine Woche vergangen, über 70 Klicks, aber keine Antwort !?! Woran es wohl liegen mag? Wäre schön, wenn mich jemand aufklären könnte. |
| geschrieben von Danny am 07.02.2008 - 12:30 |
| Hallo, es tut mir Leid, ich hatte mir zwar deinen Beitrag durchgelesen, diesen aber irgendwie nach hinten verdrängt und letztenendes vergessen. In einem solchen Fall bitte einfach nochmal erinnern  Zu deinem Problem: Der FF macht stellt die Sache schon richtig dar, denn über dem li ist auch kein Aussenabstand. Allerdings über dem ul. Das siehst du wenn du noch einen Rahmen um das ul darstellst, dann sind die Linien vom ul und vom li aneinander, aber über dem ul Rahmen entsteht ein Abstand im FF. Diesen Abstand kannst du entgegenwirken indem du ein margin-top: 0px; dem ul Element zuweist. Dabei verhalten sich die Browser auch identisch, also wenn du margin-top: 5px; verwendest sind es in allen auch 5px. Lediglich die Standardwerte, die verwendet werden wenn nichts explizit zugwiesen wird, unterscheiden sich. Ob du einen Fehler im Code hast, kannst du im http://validator.w3.org/ überprüfen. Für den Firefox/opera gibt es auch Plugins mit denen man gleich die aktuelle Seite checken lassen kann. Literatur die dieses Problem der Unterschiedlichen Darstellung aufgreift kenn ich im Moment leider keine. Aber man kommt mit der Zeit dahinter, sodass die Seite annähernd gleich aussieht. Und es interessiert auch keinen der sich die Seite anschaut ob es zu Abweichungen von einem Pixel kommt, solange die Seite für alle voll nutzbar ist. Ich hoffe dir geholfen zu haben Schöne Grüße Danny |