[CSS]: Linkliste mit float:left;

[Squart]

Hallo,

auf meiner Webseite habe ich ein kleines Problem mit Safari. Die Links in der Linkliste auf der linken Seite kann man nur benutzen, wenn man nicht direkt auf dem Linktext, sondern am Rand daneben mit der Maus rüber fährt (z.B. im Bereich Software: www.squart.de/software/).

Die Linkliste wurde folgendermassen geschrieben:

<div id="side-menu">
	<h1>Software</h1>
	<ul>
		<li><a href="./postcard/">Postcard Gallery</a></li>
		<li><a href="./donations/">Donations</a></li>
		<li class="div_bar">-</li>
		<li class="title">Public Domain</li>
		<li><a href="blind/">Blind</a></li>
		<li><a href="ccb/">Carbon CapsBeeper</a></li>
	</ul>
</div>

Das Problem liegt meiner Analyse nach dort:

#side-menu {
	background: #f4e8af url(pictures/side-menu-bg.gif);
	width: 150px;
	border: 1px solid #333;
	margin-left: -160px;
	margin-right: 10px;
	[B][U]float: left;[/U][/B]
	display: block;
}

Selbst ein clear: left; später im Code (bei #foot) konnte keine Änderung hervorrufen und mittels google habe ich nichts Brauchbares gefunden. Vielleicht kennt jemand hier ja dieses Problem und hat eine saubere Lösung parat!?

Viele liebe Grüße
Squart

BTW: Der Code muss nicht IE tauglich sein, mir geht es nur darum dass Mac-User auf die Seite können. Und ja, der Code ist nicht wirklich schön (z.B. nicht richtig skalierbar), aber dies ist mir vorerst vollkommen ausreichend.

 

[Hilarious]

Eventuell wäre es besser auf den Anchor zu selektieren:

#side-menu li a:link {
display:block;
text-decoration:none;
}
#side-menu li a:hover {
/* blah */
}

 

[Squart]

Hm, ich erkenne leider nicht, was dadurch bewirkt werden soll, noch zeigt der Code (wenn ich ihn so einsetze) eine Verbesserung des Problemes.

Es ist wohl besser, einen direkten Link zu meinem jetzigen Code zu geben, denn immerhin werden jetzt auch nur die Anchor-Tags mittels der Pseudo-Klasse :hover angesprochen. Dort findet ihr den aktuellen Code:
http://www.squart.de/style/style.css

Seltsamerweise scheinen neuere Version von WebKit keine Probleme damit zu haben. Die Safari-Version welche mir Schwierigkeiten macht scheint also auch von belangen zu sein: v. 2.0.4

Trotzdem danke für deine Hilfe.

Gute Nacht
Alex

 

[stk]

Moin,

verstehe ich das richtig, das Du die Menupunkte der <ul> nebeneinander haben willst? Dann mußt den float:left auf <li> anwenden, nicht auf das <div>.

Vielleicht hilft Dir der List-o-Matic ein grobes Gerüst zu schneidern, das Du dann auf Deine Anforderungen, Deine Optik modizifierst.

Gruß Stefan

 

[Squart]

Hallo Stefan,

nein, es geht darum float:left auf das Div anzuwenden. Es sieht alles so aus, wie es aussehen soll, aber das Menü an der linken Seite weist bei Safari (2.0.4) ein seltsames Verhalten beim Überfahren mit der Maus auf. Es gibt 2 Menüs auf der Seite, einmal das main-menu (Orange unterlegt mit weissem Text) und dann das side-menu (linke Seite, links sind schwarz). Das Problem macht das side-menu.
Nämlich:
Wenn man mit der Maus über einen Menü-Punkt fährt, dann kann man den Link nur benutzen, wenn man nicht direkt auf den Text geht, sondern auf den Rand daneben (der Anchor ist ein Block und hat die größe des <li>).

Ich habe mal ein Bild gemacht und die Bereiche eines Linkes markiert, auf denen er funktioniert bzw. nicht funktioniert. Das Problem tritt übrigens nicht nur bei mir auf.

 

[stk]

Moin,

achso, dann weiß ich was Du meinst. Du mußt auf das <a href> ein display:block anwenden und mit paddings den Bereich um den Text herum austreiben, dann wird der komplette Teil klickbar.

Gruß Stefan

 

[Squart]

Hallo,

Moin,

achso, dann weiß ich was Du meinst. Du mußt auf das <a href> ein display:block anwenden und mit paddings den Bereich um den Text herum austreiben, dann wird der komplette Teil klickbar.

Gruß Stefan

in etwa so?

#side-menu ul li a {
	color: #000;
	text-decoration: none;
	display: block;
	padding-top:3px;
	padding-bottom: 3px;
}

Das ist nämlich der Code . Es funktioniert ohne das float:left;, aber mit float: left; gibt es die Probleme. Das ist ja was mich stört. FireFox kommt problemlos damit zurecht und neuere WebKit Versionen auch. Nur die, die bei dem aktuellen Mac OS Tiger dabei ist scheint Probleme damit zu haben.

 

[Squart]

Hm, ich habe mir das Verhalten noch einmal genau angeschaut und ein neues Bild gemacht. Es ist wirklich sehr seltsam...

 

[Squart]

So wie ich das mittlerweile sehe scheinen die Maus-Events außerhalb meines #wrap-Bereiches bei einem float:left ignoriert zu werden. Ohne das float left; ist der Kasten zwar immer noch an der Position (der Inhalt wird dann allerdings versetzt gezeigt), aber die Maus-Events funktionieren. Eine adequate Lösung die mich nicht dazu zwingt meinen MarkUp-Code zu ändern finde ich leider nicht... Vielleicht fälllt euch ja noch etwas sinnvolles ein.

Viele Grüße
Squart

 

[Squart]

OK, ich habe eine Lösung, allerdings nicht die schönste.
Ich habe #wrap, der Container der über dem #side-menu liegt, so breit gemacht, dass er über dieses Menü hinausgeht (mittels padding-left einfach vergrößert). Jetzt funktioniert alles.

Viele Grüße
Squart