Komplizierte Navigation: Listenelemente springen

[Jordaniel]

Hallo,

ich habe eine Listennavigation erstellt, mit Hintergrundbildern. Leider springen die einzelnen Listeneinträge, wenn man auf den jeweiligen Link klickt.

Erstmal die URL, es geht um die vertikale Linkliste links neben dem Foto.:
http://kaffeehaus-zeltinger.de/test2/html/fruehstueck.html

Hier das dazugehörige HTML:

<ul id="speisenavi">  
   		  	<li><h1>Traditionelles<br />und Originelles</h1><p><small>Frühstück von 9 bis 18 Uhr</small></p><img src="../images/speisengetraenke/ornament_speisenavi2.gif" alt="Ornament Grafik" width="117" height="19" /></li>  
   		  	<li><a href="kuchen.html" title="Link zu Kuchen und Torten"><h1>Ein Stück Vielfalt</h1><p><small>Kuchen &amp; Torten</small></p></a></li>  
		  	<li><a href="speisen.html" title="Speisen"><h1>Gaumenfreu(n)de</h1><p><small>Kleine &amp; große Speisen</small></p></a></li>    	  
          	<li><a href="eis.html" title="Link zu unserer Eiskarte"><h1>Fruchtiges<br />in Kugelform</h1><p><small>Unsere Eiskarte</small></p></a></li>  
          	<li><a href="getraenke.html" title="Link zu unserem Getränkesortiment"><h1>Mit Leib und Kehle</h1><p><small>Kaffee, Tee und andere Getränke</small></p></a></li>  
      	</ul>

und das relevante CSS:

ul#speisenavi {  
	font-family: Georgia, serif;  
	font-size: 14px;  
	font-weight:bold;  
	text-align:center;  
	text-transform:uppercase;  
	text-decoration: none;  
	letter-spacing: 2px;  
	line-height:155%; /*Abstand zwischen h1 und small bei Hier Bin Ich*/  
	color:#999999;  
	padding-left:20px;  
	}  
	  
ul#speisenavi h1 {  
	font-family: Georgia, serif;  
	font-size: 14px;  
	font-weight:bold;  
	text-align:center;  
	text-transform:uppercase;  
	text-decoration: none;  
	letter-spacing: 2px;  
	line-height:110%;  
	color:#999;  
	}  
	  
ul#speisenavi a h1 {  
  	text-decoration: none;  
	color:#CC0000;  
	font-size: 14px;  
  }  
  
ul#speisenavi a:link h1, ul#speisenavi a:visited h1{  
	color: #CC0000;  
	}  
  
ul#speisenavi a:focus h1, ul#speisenavi a:hover h1, ul#speisenavi a:active h1 {  
	color: #999999;  
  }  
	  
ul#speisenavi li {  
  	display: block;  
	padding-bottom:2em; /*Abstand zwischen Listenelementen*/  
}  
  
ul#speisenavi li img {  
	display:block;  
	margin: 0px auto;  
	margin-top:-13px; /*Abstand zwischen Ornamentbild und kleinem Text bei Hier Bin Ich*/  
	margin-bottom:-9px; /*Abstand zwischen Ornament img und folgendem Listenelement*/  
	}  
  
ul#speisenavi small {  
	font-size: 14px;  
	text-transform:none;  
	letter-spacing: 0px;  
	font-weight:normal;  
	font-style:italic;  
	text-decoration: none;  
	color: #999999;  
  }  
  
ul#speisenavi a small {  
	color:#666666;  
	background-image:url(../images/speisengetraenke/ornament_speisenavi.gif);  
	background-repeat:no-repeat;  
	background-position:bottom;  
  }  
  
ul#speisenavi a:link small, ul#speisenavi a:visited small {  
	color: #666666;  
	padding:1.7em; /*verändert Abstand zu Ornament bei links*/  
	}  
  
ul#speisenavi a:focus small, ul#speisenavi a:hover small, ul#speisenavi a:active small {  
	color: #999999;  
	background-image:url(../images/speisengetraenke/ornament_speisenavi2.gif);  
	background-repeat:no-repeat;  
	background-position:bottom;  
  }  
  
ul#speisenavi li p {  
	margin-top:1px; /*Abstand zwischen h1 und small*/  
	}

Ich habe alles mögliche versucht; oder eben doch nicht das richtige. Auf jeden Fall komme ich an dieser Stelle nicht weiter und wäre überglücklich, wenn Ihr mal drüberschauen könntet!

Es ist doch sinnvoll, diese Navigation als Liste mit display=block anzulegen, oder? Oder doch lieber jeden Link in ein separates <div> setzen?

Vielen Dank für Eure Hilfe schon mal!

[suit]

ich habe eine Listennavigation erstellt, mit Hintergrundbildern. Leider springen die einzelnen Listeneinträge, wenn man auf den jeweiligen Link klickt.

Tun sie bei mir nicht (Internet Explorer 8, Firefox 3.5 und Opera 10).

[Jordaniel]

ich habe eine Listennavigation erstellt, mit Hintergrundbildern. Leider springen die einzelnen Listeneinträge, wenn man auf den jeweiligen Link klickt.

Tun sie bei mir nicht (Internet Explorer 8, Firefox 3.5 und Opera 10).

Seltsam; bei mir springen die Listeneinträge der Navi auf Safari 4.0.3, auf FF 3.5.3 und Opera 10, ich arbeite auf einem Mac.

Es geht wie gesagt um die Navigation links, beginnend mit "Traditionelles und Originelles".

Es wäre super, wenn mir jemand helfen könnte; ich habe leider keine Ahnung wo das Problem liegt.

[suit]

Es wäre super, wenn mir jemand helfen könnte; ich habe leider keine Ahnung wo das Problem liegt.

Jetzt hab' ichs gesehen.

Dein Problem liegt offensichtlich bei der Inkonsistenten formatierung der Menüpunkte

z.B. verwendest du 1x lineheight 155% und ein ander Mal 160% - nichts desto trotz ist dein Menü voll mit ungültigem Code.

h1- oder p-Elemente dürfen z.B. keine Kinder von a-Elementen sein.

[Jordaniel]

Dein Problem liegt offensichtlich bei der Inkonsistenten formatierung der Menüpunkte

z.B. verwendest du 1x lineheight 155% und ein ander Mal 160% - nichts desto trotz ist dein Menü voll mit ungültigem Code.

h1- oder p-Elemente dürfen z.B. keine Kinder von a-Elementen sein.

Ok, werde erstmal die Fehler im Code beheben, und dann mach ich mich noch mal dran. Danke erstmal!