✔ Aufzählung unterschiedlich eingerückt (IE vers. Firefox)

[chris4712]

Abend!

Ich habe das Problem das der Firefox eine Aufzählung nicht richtig einrückt.
Der Quelltext sieht so aus:

<p class="h2sub">Normaler Text</p>
<ul class="h2sub aufzaelungimg2">
 <li>Aufzählung</li>
 <li>Aufzählung</</li>
 <li>Aufzählung</</li>
</ul>
<p class="h2sub">Wieder normaler Text</p>

Die CSS Datei sieht so aus:

ul.aufzaelungimg2 li{
  list-style-image:url('layout_images/news_list_bubble.gif');
 margin-left: 10px;
 padding: 0px;
}
.h2sub {
 padding-left: 19px;
 padding-right: 19px;
}

Die Klasse h2sub ist dafür das dass der Text nach der H2er Überschrift richtig eingerückt wird.
Wenn ich in der Klasse ul.aufzaelungimg2 li dem Wert margin-left auf 0 setze, ist die Position richtig, allerdings stehen die Aufzählungszeichen über....

Hab bald keine Idee mehr. Wahrscheinlich ist es aber mal wieder ganz einfach, nur ich komm nicht drauf.

Gruß

Christian

 

[Maik]

Füge dem Stylesheet folgende CSS-Regel hinzu:

ul.aufzaelungimg2 {
margin-left: 20px;
}

 

[chris4712]

Wenn ich dass mache passt es im FF aber net mehr im IE

 

[Maik]

Der vom IE falsch interpretierte margin-Wert lässt sich mit dem Star-HTML-Hack korrigieren:

ul.aufzaelungimg2 {
margin-left: 20px;
}

* html ul.aufzaelungimg2 { /* Für IE */
margin-left: Xpx; 
}

 

[chris4712]

Danke, damit geht es.... OK, verstehe ich zwar nicht, aber nehme es als gegeben hin.
Was mich nur wundert ist dass beim FF der Abstand zwischen Punkt und Text größer ist als beim IE.
Dabei habe ich doch padding: 0px; angegeben...

Gruß

Christian

 

[Maik]

Der Abstand zwischen Listenzeichen und Text wird in den Browsern 'von-Hause-aus' unterschiedlich groß dargestellt und lässt sich nicht mit der padding-Eigenschaft beeinflussen.

Eine Alternative zur Bullet-Grafik wäre eine Hintergrundgrafik:

ul.aufzaelungimg2 li{
  list-style-type: none;
  margin-left: 10px;
  padding-left: 15px;
  background: url('layout_images/news_list_bubble.gif') no-repeat left center;
}

 

[chris4712]

Sehr gute Idee!
Wäre ich mal wieder nie drauf gekommen.
Dardurch hat sich dann auch der erste Teil erledigt...

Es sieht nun auch ohne Star-HTML-Hack überall gleich aus...

Vielen Dank!

Gruß

Christian