Supportnet Computer
Planet of Tech

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
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

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.

Antwort 5 von abschweb

Danke, auch das merk ich mir!

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

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

Antwort 8 von abschweb

So ist es.

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: