CSS Listen Problem

insanity

Klarapfel
Registriert
06.07.06
Beiträge
277
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:
Code:
#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
Code:
<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)
Code:
<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... :(
 

Anhänge

  • bild1.jpg
    bild1.jpg
    19,5 KB · Aufrufe: 123
  • bild2.jpg
    bild2.jpg
    16,9 KB · Aufrufe: 120

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Sag bescheid wenn es klappt...ist übrigens aus dem CSS Cookbook vom O'Reilly Verlag!
 

creative7even

Jerseymac
Registriert
23.02.05
Beiträge
454
könnte an der Doctype liegen...
in welchem Browser tritt das Problem auf - und wie sieht das gesamte HTML Dokument aus?
 

Messerjokke79

Eifeler Rambour
Registriert
21.07.06
Beiträge
600
Das liegt natürlich an dem Umbruch der wie ein Leerzeichen umgesetzt wird. Mach doch z.B. so:

Code:
<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

Gast
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

Klarapfel
Registriert
06.07.06
Beiträge
277
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 :D
 

Messerjokke79

Eifeler Rambour
Registriert
21.07.06
Beiträge
600
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.