Firefox und list-style-image (Position)

[Seikilos]

Ich hab ein Problem, ich gebe einzelnen li Elementen jeweils ein eigenes list-style-image, dieses wird im IE und im Opera zentriert, so dass der Text auf einer Höhe mit der Mitte des Bildes ist. Der Firefox neight allerdings den Text bündig mit der unteren Grenze des Bildes zu setzen.

Kriegt man das irgendwie richtig dargestellt?

Ferner stört mich der Einzug gewaltig, warum gucken die Bilder im Firefox aus dem Rahmen raus?

Und woher kommen die unterschiedlichen Höhen der li Elemente?

(Siehe Bildanhang)

Code:

<ul>
				<li class="jb_inserat_number">
                    <p>0421 1234567</p>
                </li>
                <li class="jb_inserat_mail">
                 	<a href="#">[email protected]</a>
                </li>
                <li class="jb_inserat_name">
                    <a href="#">Name von Name</a>
                </li>
			</ul>

ul {
		
		margin:0px;
		margin-top:30px;
		padding:0px;
		border: 1px solid red;
	}
	
	ul li{
		padding:0px;
		margin:0px;	
		margin-left: 20px;
		border: 1px solid green;	
		
	}	

	ul li a{
		color:#000000;
		font-size:10px;
		height: 5px;
		line-height:20px;
		
		background: red;
		
	}
	
	ul li p{
		color:#000000;
		font-size:10px;
		line-height: 20px;
		display: inline;
		background: red;
		
	}
	
	.jb_inserat_number{
		list-style-image:url(../../../images/jb_inserat_number.gif);
		
	}

	
	.jb_inserat_mail{
		list-style-image:url(../../../images/jb_inserat_mail.gif);
	}
	
	.jb_inserat_name{
		list-style-image:url(../../../images/jb_inserat_name.gif);
	}

 

[neuroleptika]

Kriegt man das irgendwie richtig dargestellt?

Ich würde auf list-style-image verzichten. Mir ist keine Möglichkeit bekannt es pixelgenau für alle Browser darzustellen. Verwende besser background-image mit padding:left;

Und woher kommen die unterschiedlichen Höhen der li Elemente?

line-height ist dafür gedacht den Zeilenabstand zu bestimmen.
Du versuchst damit <li> auf eine bestimmte Höhe auseinanderzudrücken.
Ich würde <a> display: block geben und mit padding-top / padding-bottom den Text vertikal zentrieren. Die Höhe von <li> ergibt sich dann automatisch.
Auf height müsstest du dann verzichten. (Was ja kein Nachteil ist.)

height hat für <a> in deinem Beispiel ohnehin keine Auswirkung, da es ein Inline-Element ist.
Das würde nur zusammen mit display:block; funktionieren.