[tassetee]

Hallo Leute,

ich hab da ein kleines Problem, bei dem ich nicht die nötigen Kenntnisse besitze, um zu wissen woran es liegt. Ich habe zwei Listen, die zur gleichen Klasse gehören:

<ul class="lastseen">
<li>pkt.1</li>
<li>pkt.2</li>
</ul>
<ul class="lastseen">
<li>pkt.3</li>
<li>pkt.4</li>
</ul>

Mein Stylesheet dazu sieht wie folgt aus:

.lastseen {
	border-bottom: 		1px solid #8b96c7;
	font-size:		8pt;
	margin-top: 		5px;
	margin-left:		0px;
	padding: 		0px;
	padding-left:		2px;
	white-space: 		nowrap;
}
.lastseen li {
	display: 		inline;
	list-style-type: 	none;
	white-space: 		nowrap;
}
.lastseen a {
	padding: 		4px;
	margin:			4px;
	border: 		1px solid #8b96c7;
	border-bottom:		none;
}
.lastseen a:hover {
	border-bottom:		1px solid #f2f3ff;
	background:		#f2f3ff;
	text-decoration:	none;
}

Das Dumme jetzt: der hover-Effekt klappt mit Firefox nur bei der ersten Liste. Zudem hat Firefox bei der zweiten Liste ein padding-bottom von 1px eingefügt, bei mir schließt die liste nicht mit der border ab, die ich definiert habe.

Weiß jemand woran das liegt?

Danke Euch im Voraus,
Ben

[SilentWarrior]

Wie kann denn der a-Selektor wirken, wenn in den Listen gar keine Links vorkommen?

[lona]

..hmm, also bei mir sehen beide listen im ff gleich aus, hover gleich.

allerdings ist das styling sehr eigenwillig?

zu den Listencodes hab ich noch das a eingefügt:

<ul class="lastseen">
<li><a href="#">pkt.1</a></li>
<li><a href="#">pkt.2</a></li>
</ul>
<br><br>
<ul class="lastseen">
<li><a href="#">pkt.3</a></li>
<li><a href="#">pkt.4</a></li>
</ul>

dein CSS-Code:

list-style-type: 	none;

gehört eigentlich zu ul

border-bottom:		none;

statt none einfach 0

definiere doch nen background bei a

wozu bei a padding UND margin?

hmm.. Dein genaues Problem ist mit Deinem Code für mich nicht nachvollziehbar (sh. oben, bei mir sind beide Listen im FF gleich formatiert)

gruss lona

[tassetee]

sorry, die Links hab ich auf die Schnelle vergessen.
Zum Anschauen ganz schnell:
http://www.extrasmallworld.de/test.html

das merkwürdige ist, dass Firefox bei manchen Listen den hover Effekt anzeigt und bei manchen nicht - obwohl ich die Listen einfach nur per copy&paste vervielfältigt habe.... (?)

[tassetee]

Zitat von lona

allerdings ist das styling sehr eigenwillig?

ich geb ja zu, ich hab wenig Ahnung von css . Farben etc. passen aber in den Kontext, siehe Link. Merkwürdig allerdings, dass Deine Listen gleich angezeigt werden. Ich hab Firefox 1.5, und das ist das erste Mal dass er mir Probleme macht. Hm.

[lona]

..bei Deinem gesendeten Link hab ich das Prob jetzt auch, bei der 3. Liste. Diese sieht auch schon unabhängig vom hover anders aus (ein kleines "Loch" im border..)..

..interessant.. ich kucks mir mal näher an..

gruss lona..

[heiko_rs]

Mal ein Tipp außerhalb des eigentlichen Problems: Schau Dir die Navigation mal nach Textvergrößerung im Firefox an, sie fällt quasi auseinander, was Du verhindern kannst, wenn Du li floaten läßt. Damit hat man deutliche höhere Kontrolle, da man es dann ausschließlich mit Blockelementen zu tun hat, und wahrscheinlich würde sich im Zuge dessen auch Dein Problem von selber lösen.

Schöne Grüße,
Heiko

[tassetee]

Zitat von heiko_rs

Mal ein Tipp außerhalb des eigentlichen Problems: Schau Dir die Navigation mal nach Textvergrößerung im Firefox an, sie fällt quasi auseinander, was Du verhindern kannst, wenn Du li floaten läßt. Damit hat man deutliche höhere Kontrolle, da man es dann ausschließlich mit Blockelementen zu tun hat, und wahrscheinlich würde sich im Zuge dessen auch Dein Problem von selber lösen.

Schöne Grüße,
Heiko

Danke sehr, ein entscheidender Tipp . Ich habe die Liste dahingehend verändert:

.lastseen {
	width: 			440px;
	font-size:		8pt;
	margin: 		5px;
	padding: 		0px;
	white-space: 		nowrap;
}
.lastseen li, .lastseen ul {
	font: 			10pt/18pt Georgia, Book Antiqua, Times New Roman, Times, serif;
	border-bottom: 		1px solid #8b96c7;
	padding-top:		5px;
	float: 			left;
	display: 		inline;
	list-style-type: 	none;
	white-space: 		nowrap;
}

Und mit dem Einfügen einer Text-Definition hat sich auch das Problem mit dem hover in Luft aufgelöst - keine Ahnung warum, aber ohne Textangabe hat er bei mir wahlweise in der zweiten, dritten oder fünften Zeile keinen Hover-Effekt gehabt.

Vielen Dank Euch allen, hab wieder was gelernt (Mein css ist zwar immer noch ein heilloses Durcheinander, aber davon abgesehen).

[Boris]

Noch ein Tip - pt als Schriftgröße ist nur für den Druck geeignet, nicht für die Darstellung auf dem Bildschirm. Nimm px oder besser noch em!

http://www.dciwam.de/faq/gute-websites/einheit-pt

[heiko_rs]

Zitat von tassetee

.lastseen li, .lastseen ul {
... }

Das .lastseen ul kannst Du weglassen, denn das kommt in Deinem geposteten Markup gar nicht vor