Liste ist verschoben

[alexf812]

Hallo,

die erzeugte Liste wird willkütlich immer an einer anderen Stelle zerrissen. woran es liegt, kann ich mir nicht erklären. Kann es an der Ladezeit liegen? Erscheint mir aber unwahrscheinlich. Immer an einer anderen Stelle ist das CSS kaputt (das bild ist nicht innerhalb des rahmens und die überschrift ist verrutscht). es müsste doch wenn bei allen listenelementen auftreten und nicht nur 1 oder 2 und immer an einer anderen stelle.

<h2>Überschrift</h2>
<ul class="toplisten">

<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
</ul>
<h2>Überschrift</h2>
<ul class="toplisten">

<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
<li><a href="#"> <h3>überschrift</h3><img src="img/pic.jpg" alt="pic"/> </a></li>
</ul>

und das css:

.toplisten{
	overflow: hidden; 
	_display: inline-block; 
	list-style: none; 
	margin: 0 0 30px; 
	padding: 0;
}
.toplisten li{
	float: left; 
	margin: 4px 8px 4px 0;
}
.toplisten li a{
	padding: 4px; 
	border: 1px solid #ccc; 
	display: block; 
	width: 94px; 
	text-decoration: none;
	cursor: pointer;
	background-color: #009933;
}
.toplisten li a:hover{
	border-color: #f00;
}

.toplisten li a:hover h3{
	text-decoration: underline;
	color: #ff0000;
}

.toplisten li a img{
	display: block; 
	padding: 4px 22px;
}
.toplisten li h3{
	display: block; 
	font-size: 0.7em; 
	margin: 0; 
	color: #666; 
	text-align: left; 
	background-color: #efefef; 
	height: 40px;
	padding: 2px;
}

[hero-master]

Moin,
von welchem Browser redest du, von welchem Betriebssystem? Ohne die Bilder zu sehen, ohne den umgebenen Code, ohne Doctype wird das wohl ein Raten ins Blaue.
Woher hast du denn "_display: inline-block;" ? Wozu brauchst du das overflow?
Dann schreibst du Blockelemente (h3) in Inlineelemente (a), was auch nicht erlaubt ist...

[alexf812]

Zitat von hero-master

Moin,
von welchem Browser redest du, von welchem Betriebssystem? Ohne die Bilder zu sehen, ohne den umgebenen Code, ohne Doctype wird das wohl ein Raten ins Blaue.
Woher hast du denn "_display: inline-block;" ? Wozu brauchst du das overflow?
Dann schreibst du Blockelemente (h3) in Inlineelemente (a), was auch nicht erlaubt ist...

tritt nur im firefox auf...
der doctype ist xhtml strict
_display: inline-block und overflow:hidden, damit das float wieder aufgehoben wird, und ich nicht zusätzlich ein clear: left benutzen muss, da ja die li-tags ein float: left haben

Vielleicht liegt es ja daran das ich ein block-element nicht in ein inline element setzen darf, habe jetzt h3 mal gegen ein span ausgetauscht. bisher sieht alles gut aus, aber der fehler war auch nicht 100% reproduzierbar.

ich habe deshalb alles in das a-tag geschrieben, damit man den hover-effekt um das bild und überschrift bekommt.
evtl. hast du ja noch ne quelle, wo man sich sowas mal abschauen kann.