CSS Listen Problem

[insanity]

Hi all,
ich schreibe gerade an meiner neuen Homepage und möchte (erstmals statt Tabellen) mit CSS gerne meine Liste in der Navigation formatieren. Dazu hab ich bis jetzt folgendes geschrieben:

#pageNavi ul {
	display: inline;
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#pageNavi li {
	display: inline;
	list-style: none;
	margin: 0px;
	padding: 0px;
}

Soweit klappt das auch alles ganz gut, nur habe ich ein Problem, wenn ich meinen Quellcode so schreibe

<div id="pageNavi">
	<ul>
		<li><img src="layout/navi_left.jpg" /></li>
		<li><a href="#"><img src="layout/navi_home.jpg" /></a></li>
		<li><a href="#"><img src="layout/navi_blogs.jpg" /></a></li>
		<li><a href="#"><img src="layout/navi_photos.jpg" /></a></li>
		<li><a href="#"><img src="layout/navi_movies.jpg" /></a></li>
	</ul>
</div>

setzt er mir zwischen jeden Listenpunkt einen kleinen Abstand von ca. 3px. (Angehängtes Bild 1) Wenn ich hingegen sämtliche Listeneinträge ohne Zeilenumbruch direkt hintereinander weg schreibe, wird es richtig angezeigt. (Angehängtes Bild 2)

<div id="pageNavi">
	<ul>
		<li><img src="layout/navi_left.jpg" /></li><li><a href="#"><img src="layout/navi_home.jpg" /></a></li><li><a href="#"><img src="layout/navi_blogs.jpg" /></a></li><li><a href="#"><img src="layout/navi_photos.jpg" /></a></li><li><a href="#"><img src="layout/navi_movies.jpg" /></a></li>
	</ul>
</div>

Es ist natürlich in erster Linie nur eine Ordnungsfrage in meinem Quellcode der mir das schreiben erleichtert aber dafür muss es doch sicher trotzdem eine Lösung geben?

cu Daniel

PS: Gesucht habe ich bereits, allerdings nicht sehr gründlich, hatte keine große Zeit, muss quasi jetzt los zur Nachtschicht...

 

[mschoening]

Ich würde das so oder so nicht so machen...eleganter ist es so:

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>

ul#navigation li { float:left; }

#navigation a {
float:left;
display:block;
}

 

[mschoening]

Sag bescheid wenn es klappt...ist übrigens aus dem CSS Cookbook vom O'Reilly Verlag!

 

[creative7even]

könnte an der Doctype liegen...
in welchem Browser tritt das Problem auf - und wie sieht das gesamte HTML Dokument aus?

 

[Messerjokke79]

Das liegt natürlich an dem Umbruch der wie ein Leerzeichen umgesetzt wird. Mach doch z.B. so:

<div id="pageNavi">
	<ul><li><img src="layout/navi_left.jpg" /></li><li><a
		href="#"><img src="layout/navi_home.jpg" /></a></li><li><a
		href="#"><img src="layout/navi_blogs.jpg" /></a></li><li><a
		href="#"><img src="layout/navi_photos.jpg" /></a></li><li><a
		href="#"><img src="layout/navi_movies.jpg" /></a></li></ul>
</div>

 

[markzwosieben]

Dieser Abstand durch den Umbruch dürfte nur im Internet Explorer auftreten. Das ist dort auch bei Bildern ohne <br /> so... der haut dann einfach irgendwelche Abstände rein...

 

[insanity]

Dieser Abstand durch den Umbruch dürfte nur im Internet Explorer auftreten. Das ist dort auch bei Bildern ohne <br /> so... der haut dann einfach irgendwelche Abstände rein...

Nein die Screenshots stammen aus Safari 3. Der macht es also leider auch. Vielen Dank für die bisherigen Lösungsbeispiele. Also wird's wohl nur mit Tricksen funktionieren, aber dumm ist das irgendwie schon... Naja machste nix

 

[Messerjokke79]

Dieser Abstand durch den Umbruch dürfte nur im Internet Explorer auftreten. Das ist dort auch bei Bildern ohne <br /> so... der haut dann einfach irgendwelche Abstände rein...

Leider macht das nicht nur der IE. Nach W3C-Standard dürfte das nicht passieren. Aber eine ist Theorie, das andere die Praxis.