Erkenntnisse Bloggen 2: Firefox' magische Paddings auf Listenelementen

Firefox hat – wie ich seit heute weiß – die nette Angewohnheit, Listenelementen einen mysteriösen Innenabstand zu verpassen, wenn man list-style-position auf inside setzt. Auch dann, wenn der list-style-type auf none gesetzt ist. Warum das so ist, kann ich nicht genau sagen, Fakt ist, dass alle anderen bekannten Browser die – meiner Meinung nach – korrekte Darstellung zeigen. Folgendes Beispiel reproduziert das Verhalten:

<!DOCTYPE html>
	<!--
	  - some strange padding occurs on li-elements in firefox due to
	  - list-style-position: inside
	  -->
<html lang="en">
	<meta charset="utf-8" />
	<title>Floated list elements</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		article {
			width: 50em;
			margin: 10px auto;
			padding: 10px;
			background: #ddd;
		}
		h1, ul {
			float:left;
		}
		ul {
			list-style-type: none;
			list-style-position: inside;
		}
		li {
			float: left;
			outline: 1px solid #000;
			border-right: 1px dotted #f00;
			padding-right: 0;
			margin-right: 0;
		}
		li span {
			background: #aaf;
			padding: 3px;
		}
		p:after {
			content:".";
			clear:left;
			display:block;
			wilih:0;
			height:0;
			text-indent: -9999px;
		}
	</style>
	<article>
		<h1>List-style-possiton</h1>
		<ul>
			<li><span>one</span></li>
			<li><span>two</span></li>
			<li><span>foo</span></li>
		</ul>
	<p>Lorem Ipsum</p>
	</article>
</html>	

Was würde man in etwa erwarten?

Statt dessen erscheint einen Innenabstand, interessanter weise auf der rechten Seite der einzelnen Listenelemente:

Danach sucht man gerne mal auch etwas länger. Das float hat dabei übrigens keinen Einfluss auf den mysteriösen Padding, er lässt sich auch nicht mit expliziten Angaben zum Verschwinden überreden. Was hilft ist entweder explizit den list-style-type auf outside zu setzen oder den Listenelementen als Inline-Block Elemente zu formatieren.  Zwar ist outside der Standard, sieht aber im Fließtext hässlich aus und wer verlässt sich schon gern auf Standards?

Kommentare

Es wurden noch keine Kommentarte zu diesem Artikel geschrieben.

Fragen, Ideen oder Kritik? – Hier ist Platz dafür!

Dein Kommentar

Um ein Kommentar abzugeben, reicht der Text im Kommentarfeld. Die Angabe eines Namens wäre nett, ist aber nicht erforderlich.

Du darfst folgenden HTML-Code verwenden, musst aber nicht:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>