CSS: list-style-image für <ul> funktioniert nicht

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_list-style-image_fuer_ltulgt_funktioniert_nich_120165/page_1 - zur Vollversion wechseln!

nitschi schrieb am 23.07.2004 um 21:40

Folgendes Problem:

Ich will per CSS eigene Bullet-Images für eine Aufzählungsliste einbinden. Dazu habe ich folgenden Code in meine CSS-Datei eingefügt.

Code:

ul.3dots {
list-style-image:url(images/list_style.gif);
}

Im Dokument habe ich dann die entsprechende Liste folgendermaßen erstellt:

Code:

<ul class="3dots">
<li>.....<li>
<li>.....<li>
<li>.....<li>
</ul>

Soweit so gut. Wenn ich nicht mittlerweile den Wald vor lauter Bäumchen nicht mehr sehe, müsste das prinzipiell mal korrekt sein. Aaaber: "dem S*****ndreck funktioniert nicht!" :mad:

Konkretes Anschauungsobjekt:
http://www.dw-immo.at/index.php?section=verkaufen

Ich sehe da nur normale runde Bullet-Pünktchen, sowohl in IE6 als auch in Mozilla 0.9.

Ich nehme schon mal die Antwort auf die Frage bzw. Vermutung "ist der Pfad zu dem GIF auch wirklich richtig?" vorweg: ich habe alle möglichen Pfad-Varianten durchprobiert (u.a. mit und ohne slash), auch den absoluten Pfad http://www.dw-immo.at/images/list_style.gif - niente!

HILFE!

Würde mich auch über Kommentare wie "OMG! WTF! Ich hab auch absolut keine Ahnung, wieso das nicht funktioniert" freuen, dann würd ich mich nicht so alleine fühlen.

flaimo schrieb am 23.07.2004 um 23:25

schon mal den ul tag direkt mit style="list-style-image:url(images/list_style.gif)" formatiert und gecheckt ob was kommt? villeicht hast du ja wo eine ID formatierung die listen mitformatiert die stärker gewichtet ist als die klassendefinition. vielleicht happerts auch an der einbindung des css files (inline? tag? @import?)

nitschi schrieb am 23.07.2004 um 23:42

Ja, mit direktem <style="...."> funktioniert es. Danke für diesen Vorschlag. Habe es auch gerade eben mit einer etwas anderen Definition im CSS-File probiert:

Code:

div#mitte ul {
list-style-image:url(images/list_style.gif);
}

So funktioniert's auch (die <ul>s, die die eigene Bullet-Grafik bekommen sollen, sind immer nur im #mitte-div).

Aber seltsam finde ich das trotzdem, denn andere CSS-Definitionen für <ul> oder <li> gibt's nicht. Hier mal das komplette CSS-File (vom "nicht funktionierenden" Beispiel:

Code:

/* --- LAYOUT --- */
#wrapper {
	background-color: #FFFFFF;
	border: 0;
	width: 750px;
}
#header {
    height: 100px;
		background-color: #FFFFFF;
}
#links {
		width:135px;
		height:100%;
    float: left;
  	background-color:#FFFFFF;
		margin-top:30px; 
}
#mitte {
    width: 615px;
		float:right;
		margin-top:35px;
  	background-color:#FFFFFF;
}
/* --- STANDARD-TAGS --- */
html, body {
	font-family: Tahoma, Verdana, Arial;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	margin:0;
	height:100%;
}
p, td, br, form, div, span, blockquote {
	font-family: Tahoma, Verdana, Arial;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-align:justify;
}
h1 {
	font-size: 14pt;
	font-style: normal;
	font-weight: normal;
	color: #000000;
}
h2 {
	letter-spacing: 3px;
	font-size: 13pt;
	color:#D74600;
	font-weight:bold;
	margin-bottom:1px;
}
h3 {
	font-size: 10pt;
	font-weight:bold;
	margin-left:115px;
	margin-top:2px;
	color:#333333;
}
/* --- LINKS --- */
a {
	font-family: Tahoma, Verdana, Arial;
	font-size: 10pt;
	font-style: normal;
	color: #406295;
	text-decoration: none;
	font-weight:bold;
}
a:hover {
	font-family: Tahoma, Verdana, Arial;
	font-size: 10pt;
	color: #406295;
	text-decoration: underline;
}
/* --- Menu-Design --- */
div#links a {
	display: block; 
	text-align: left; 
	font: bold 10pt Tahoma; 
  padding: 5px 10px; 
	margin: 0 0 1px; 
	border-right: 5px solid #FFFFFF;
  border-left: 3px solid #FFFFFF;
  text-decoration: none; 
	color: #406295;
	background: #FFFFFF;
}
div#links a:hover {
	color: #000000; 
	background-color: #EAEAEA;
	border-right: 5px solid #FFFFFF;
  border-left: 3px solid #000000;
}
/* --- Header Fußzeile --- */
.small {
	font-family: Tahoma, Verdana, Arial;
	font-size: 8pt;
	font-style: normal;
	font-weight: normal;
	color: #333333;
}
p.small {
margin-top:0px;
margin-left:3px;
}
p.small a {
	font-family: Tahoma, Verdana, Arial;
	font-size: 8pt;
	color: #406295;
	text-decoration: none;
	font-weight:normal;
}
p.small a:hover {
	font-family: Tahoma, Verdana, Arial;
	font-size: 8pt;
	color: #406295;
	text-decoration: underline;
	font-weight:normal;
	background-color:#FFFFFF;
}
/* --- 3-Punkt Listendesign--- */
ul.3dots {
list-style-image:url(images/list_style.gif);
}

Einbindung des CSS Files per <link rel....> funktioniert auch ohne Probleme, alle anderen Tags, Classes und id's kann ich wie gewohnt per CSS definieren.

edit: Ich stell den Thread mal auf solved, nachdem ein Workaround gefunden wurde. Allerdings interessiert mich die eigentliche Ursache immer noch.

Rektal schrieb am 26.07.2004 um 03:48

Vielleicht weil Klassen nicht mit Ziffern beginnen duerfen? Probiers mal ohne dem 3 am Anfang ...

Also kleiner Tipp: http://www.overclockers.at/showthre...737#post1566737 wie man sein CSS aufgrund seiner Vererbung kompakter machen kann.

nitschi schrieb am 26.07.2004 um 08:11

Zitat von Rektal
Vielleicht weil Klassen nicht mit Ziffern beginnen duerfen?

Aha, und wieso sagt mir das niemand? Wusste ich natürlich nicht. (Ja, schon klar, auf http://www.w3.org steht es mit Sicherheit irgendwo

)

Zitat
Probiers mal ohne dem 3 am Anfang ..

Jup, funktioniert. Vielen Dank!

Zitat
Also kleiner Tipp: http://www.overclockers.at/showthre...737#post1566737 wie man sein CSS aufgrund seiner Vererbung kompakter machen kann.

Ok, danke. Hab ich anfangs (nicht GANZ so effizient) auch gemacht, aber ich bin dann immer sehr inkonsequent, u.a. weil ich dem IE bei CSS nicht wirklich vertraue. Aber wenn du meinst, dass es da keine Probleme gibt, dann werd ich gleich kürzen.

Rektal schrieb am 26.07.2004 um 10:14

Der IE und sein CSS, wie es sich auf Fonts bezieht, sind schon OK. Der einzige Bugs, mit Tabellen, ist auch dort beschrieben und wie du ihn einfach fixen kannst. Anonsten werde Fragen Werktags hier gerne entgegen genommen ;-)