Supportnet / Forum / Webseiten/HTML
CSS <ul> Einrückung
Frage
Hallo Experten,
[code]
<ul>
<li>bla bla
</ul>
[/code]
erzeugt bei mir sowohl beim IE als auch beim FF einen um 40px eingerückten Block. Nun möchte ich die Einrückung auf 30px verringern.
wenn ich
[code]
<ul style="margin-left:30px">
[/code]
schreibe, sieht es im IE wie gewünscht aus, im FF ist die Einrückung auf 70px gewachsen.
Gibt es irgendine Möglichkeit, beim FF diese Einrückung einzustellen?
Gibt es womöglich eine Formulierung, die auf beiden Browsern gleich funktioniert?
Danke,
Manfred
Antwort 1 von derpfleger
Das Problem besteht aus folgendem:
1. Wenn man für
Abhilfe:
Ob man das nun in den head-Bereich oder ins externe Stylesheet schreibt, bleibt einem selbst überlassen.
2. Internet Explorer und Firefox/Mozilla legen für den Seitenabstand der Listeneinträge unterschiedliches fest: der IE machts über margin, Mozilla über padding.
Wenn du also zunächst mal für alle eine gleiche linksbündige Ausrichtung am Bildschirmrand definieren willst, musst du es zB so eintragen:
Mit 0.5em Abstand für margin und padding richten sowohl der IE als auch Mozilla die Listenbullets (list-style-type) gerade am linken Bildschirmrand aus.
Wenn du nun einen größeren Abstand von links willst, wähle es entsprechend deinem gusto...
Gruß derpfleger
1. Wenn man für
body
keine Definition für die Seitenabstände wählt, überlässt man diese den Browser-default-Einstellungen.Abhilfe:
<!--
body {margin:0px; padding:0px;}
-->
Ob man das nun in den head-Bereich oder ins externe Stylesheet schreibt, bleibt einem selbst überlassen.
2. Internet Explorer und Firefox/Mozilla legen für den Seitenabstand der Listeneinträge unterschiedliches fest: der IE machts über margin, Mozilla über padding.
Wenn du also zunächst mal für alle eine gleiche linksbündige Ausrichtung am Bildschirmrand definieren willst, musst du es zB so eintragen:
<ul style="margin-left:0.5em; padding-left:0.5em;">
Mit 0.5em Abstand für margin und padding richten sowohl der IE als auch Mozilla die Listenbullets (list-style-type) gerade am linken Bildschirmrand aus.
Wenn du nun einen größeren Abstand von links willst, wähle es entsprechend deinem gusto...
Gruß derpfleger
Antwort 2 von derpfleger
... geht natürlich auch mit px...
<ul style="margin-left:30px; padding-left:30px;">
Antwort 3 von abschweb
Danke, der Trick hat super funktioniert!
Manfred
Manfred
Antwort 4 von derpfleger
Ah, gerade mal rumprobiert: wenn man dem ul keine Definition zu margin/padding zuweist, also den Browsern ihre default-Einstellung belässt, kann man auch eine einheitliche Darstellung erreichen, wenn man jedem einzelnen Listeneintrag den Abstand zuweist.
Also so:
<ul>
<li style="margin:30px;">blabla</li>
</ul>
oder natürlich auch so:
<ul>
<li class="abstandnachlinks">blabla</li>
<ul>
wobei beides natürlich immens viel mehr Schreiberei bedeuten würde als die oben genannte Lösung.
Also so:
<ul>
<li style="margin:30px;">blabla</li>
</ul>
oder natürlich auch so:
<ul>
<li class="abstandnachlinks">blabla</li>
<ul>
wobei beides natürlich immens viel mehr Schreiberei bedeuten würde als die oben genannte Lösung.
Antwort 5 von abschweb
Danke, auch das merk ich mir!
Manfred
Manfred
Antwort 6 von abschweb
Jetzt hab ich den letzten Vorschlag auch noch getestet.
Funktioniert bei mir nicht!
Die <li>-Einrückung addiert sich auf die <ul>-Einrückung (IE).
Beim FF ist das nicht der Fall.
Manfred
Funktioniert bei mir nicht!
Die <li>-Einrückung addiert sich auf die <ul>-Einrückung (IE).
Beim FF ist das nicht der Fall.
Manfred
Antwort 7 von derpfleger
...muss ich nochmal ausprobieren, das hatte ich nur so nebenbei schnell getestet, war vielleicht ein Schnellschuss. Aber mit der erstgenannten Lösung sollte es ja auf alle Fälle klappen (uns dabei auch noch eleganter).
Gruß derpfleger
Gruß derpfleger
Antwort 8 von abschweb
So ist es.