✔ Listenzeichen (Bullets) formatieren

[KatjaNowak]

Hallo,

was müsste man denn tun, um Aufzählungszeichen auch mit dem IE zu sehen? Bei Firefox und Safari klappt es, scheint an dem display:block zu liegen. Kann mir jemand bitte helfen?
Katja

 

[Maik]

Moin,

von meinem Quellcode in Post #14 ausgehend, müssten die fettmarkierten CSS-Regeln herausgenommen werden:

<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}
ul {
list-style:none;
}
ul a {
display:block;
width:100%;
}
a.nav {
color:#000;
background:#f2f2f2;
}
a.nav:hover, a.clicked {
color:#f2f2f2;
background:#000;
}
/* ]]> */
</style>

mfg Maik

 

[KatjaNowak]

Hi,
ich glaube, wir haben gestern schonmal geposted, und du hast mir super geholfen, ich finde nur die Seite nicht mehr(... das ist das CSS

<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;

}
ul {
list-style-type:disc;
}
ul a {
display:block;
width:100%;
}
/* ]]> */
</style>

HTml:

<ul style="list-style-type:disc">
<li>
<a href="#" onclick="show('cat1')">text</a>
<div id="cat1" style="display:none">text</a>
</div>
</li>

lg, Katja

 

[Maik]

Richte für das <ul>-Element einen linken Außenabstand ein, der zu Beginn des Stylesheets mit dem Universalselektor * auf null zurückgesetzt wurde, und so die Anzeige der Listenpunkte verhindert:

ul {
list-style-type:disc;
margin-left:20px;
}

Und welche Seite kannst du nicht mehr finden?

mfg Maik

 

[KatjaNowak]

Danke! Jetzt macht er den Punkt bei zweizeiligen Aufzählungen beim IE allerdings bei der zweiten Aufzählung. Und es rückt alles nach rechts, dass lässt sich so wohl nicht vermeiden, oder? Sorry für diese bestimmt dümmlichen Fragen am frühen Morgen...

 

[Maik]

Von welcher IE-Version ist denn hier die Rede?

Der aktuelle IE8 versetzt das Listenzeichen nicht in die nächste Zeile, sofern er nicht in den "Quirks Mode" geschaltet wird. Denn in diesem proprietären Darstellungsmodus verhält er sich genauso "buggy" seine Vorgängerversionen (IE5 bis IE7).

mfg Maik

 

[KatjaNowak]

Internet Explorer 7

 

[Maik]

Alternativ zu den Listenzeichen könntest du stattdessen eine Grafik als Bulletzeichen einsetzen.

Entweder mittels list-style-image für das <ul>-Element, oder "klassisch" mit background-image für die <li>-Elemente.

Bei letzterem hättest du zusätzlich die Möglichkeit, mit background-position das Hintergrundbild neben dem Element "zurechtzurücken", denn die älteren IEs (bis IE7) neigen dazu, bei list-style-image und einem mehrzeiligen Inhalt die Grafik in der vertikalen Mitte auszurichten.

Da wir uns hier ausschließlich auf CSS-Terrain bewegen, kapsel ich die Beiträge mal aus diesem JS-Thema heraus, und bring sie mit einem neuen Themenbetreff im CSS-Forum unter.

mfg Maik

 

[KatjaNowak]

Habs jetzt so versucht..

<li style "background: url(images/bullet.gif) no-repeat">

Klappt aber nicht... falsch?

LG, Katja

 

[Maik]

Jo, zwischen dem style-Attribut und Anführungszeichen fehlt das Gleichheitszeichen.

<li style="background: url(images/bullet.gif) no-repeat">

ul li {
background: url(images/bullet.gif) no-repeat 0 6px; /* 0 = Position von links, 6px = Position von oben */
padding-left:15px; /* entspricht der Grafikbreite, und sorgt dafür, dass der Text nicht unmittelbar über dem Hintergrundbild beginnt */
}

mfg Maik