[HaBo]

RemoteC · 27.04.10, 01:29

Ich hab mal wieder ein Problem und ausnahmsweise nicht mit dem IE sondern mit verschiedenen Versionen von Safari und Chrome, sprich webkit-engine.

Es handelt sich um die Website: http://www.johannes-raimann.at welche ich für einen Freund gemacht habe.

Die Website ist mit Wordpress erstellt, daher ist der HTML-Code weitgehend vorgegeben:

HTML-Code:

<div id="links">
<a class="bg-link" href="http://www.johannes-raimann.at" title="home">Zur Startseite</a>
<!--Kategorie anzeigen-->
	<li class="cat-item cat-item-4"><a href="http://www.johannes-raimann.at/category/blog" title="Alle unter blog abgelegten Artikel ansehen">blog</a>
</li>
	<li class="cat-item cat-item-5"><a href="http://www.johannes-raimann.at/category/galerie" title="Alle unter galerie abgelegten Artikel ansehen">galerie</a>
<ul class='children'>
	<li class="cat-item cat-item-8"><a href="http://www.johannes-raimann.at/category/galerie/portfolio" title="Alle unter portfolio abgelegten Artikel ansehen">portfolio</a>
</li>
</ul>
</li>
	<li class="cat-item cat-item-6"><a href="http://www.johannes-raimann.at/category/kontakt" title="Alle unter kontakt abgelegten Artikel ansehen">kontakt</a>
</li>
	<li class="cat-item cat-item-3"><a href="http://www.johannes-raimann.at/category/news" title="lalala">news</a>
</li>
	<li class="cat-item cat-item-7"><a href="http://www.johannes-raimann.at/category/uber-mich" title="Alle unter über mich abgelegten Artikel ansehen">über mich</a>
</li>

</div>

Nachdem ich erst nach einem Klick auf eine Kategorie die Unterkategorie(n) sichtbar haben wollte und im BE von WordPress keine Option gefunden habe, habe ich das ganze per CSS gelöst:

Code:

/*Kategorien formatieren*/
.current-cat{
font-style:italic;
}

li.cat-item ul.children li{
visibility:hidden;
margin-top:-44px;;
}

li.current-cat ul.children li{
visibility:visible;
margin:-10pt 0 -10pt -20px;
}

li.current-cat-parent ul.children li{
visibility:visible;
margin:-10pt 0 -10pt -20px;
}

li.cat-item{
visibility:visible;
}

Es passiert also nichts anderes als dass die children versteckt werden außer die Kategorie ist die aktuell ausgewählt. Die negativen margin sind notwendig damit die Abstände so bleiben "als ob nichts wäre" (was in älteren Versionen des IE und Opera auch nicht perfekt funktioniert, aber das ist halb so schlimm).

Mein Problem ist nun, dass bei bestimmten WebKit-Versionen eine Kategorie, die Unterpunkte hat, erst gar nicht in der Navigation angezeigt wird, anklickbar ist sie aber trotzdem noch. Der Text wird also nicht angezeigt.

Hier mal ein Browsershots:

http://browsershots.org/screenshots/...c8eb827c60887/

Unter Mac OS schaut das ganze auch bei neueren Versionen von WebKit so aus. Unter Windows anscheinend nicht.

Stimmt irgendetwas im CSS nicht? Habe ich da etwas schlampig formuliert und deshalb interpretieren das bestimmte Versionen von WebKit so? Wer weiß Rat?

mfg
RemoteC

PS: Wenn es eine andere Lösung gibt die Unterkategorien erst sichtbar zu machen wenn die Elternkategorie angeklickt wurde, ist mir auch geholfen. Leider habe ich da in WordPress keine Einstellung gefunden.

PPS: Wenn jemand mit Chrome od. Safari das Problem nicht hat bitte auch mit Browserversion melden, vielleicht ist das wirklich nur ein Bug in bestimmten Versionen unter Mac OS?!

copy` · 27.04.10, 18:02

Hi,

ich seh den Bug auch, unter Safari 3.2.1 Windows.

Der Inspektor sagt, dass das Element eine Höhe von 0px hat; das könnte an deinem rumgespiele mit den Margins liegen. Für das Verstecken von Elementen ohne Platzhalter sollte man allerdings visibility gar nicht benutzen, dafür gibt es die Display-Eigentschaft. Probier es mal damit.

Anzeige

- Anzeige -

RemoteC · 28.04.10, 01:45

Danke für die Antwort

An display lag es nicht, es lag daran, dass WP die Navigationspunkte als Listeneinträge darstellt aber keine <ul> erzeugt. Das ist natürlich nicht konform aber anscheinend reagiert nur webkit darauf.

Zumindest laut browsershots.org funktioniert das jetzt mit verschiedenen Versionen von Safari & Chrome.
A propos: Gibt es Alternativen zu browsershots.org? Extensions für Firefox, die andere Browser emulieren? Dass der IE Probleme macht ist bekannt, von webkit war mir das bis jetzt nicht bekannt ...

beavisbee · 28.04.10, 09:03

Zitat:

Zitat von RemoteC

Zumindest laut browsershots.org funktioniert das jetzt mit verschiedenen Versionen von Safari & Chrome.

mit Arora (ebenfalls Webkit) läuft's jetzt auch.

Anzeige

- Anzeige -

27.04.10, 01:29	#1 (permalink)
RemoteC Registriert seit: 11.07.05 Likes: 0	Problem mit webkit Anzeige Ich hab mal wieder ein Problem und ausnahmsweise nicht mit dem IE sondern mit verschiedenen Versionen von Safari und Chrome, sprich webkit-engine. Es handelt sich um die Website: http://www.johannes-raimann.at welche ich für einen Freund gemacht habe. Die Website ist mit Wordpress erstellt, daher ist der HTML-Code weitgehend vorgegeben: HTML-Code: <div id="links"> <a class="bg-link" href="http://www.johannes-raimann.at" title="home">Zur Startseite</a> <!--Kategorie anzeigen--> <li class="cat-item cat-item-4"><a href="http://www.johannes-raimann.at/category/blog" title="Alle unter blog abgelegten Artikel ansehen">blog</a> </li> <li class="cat-item cat-item-5"><a href="http://www.johannes-raimann.at/category/galerie" title="Alle unter galerie abgelegten Artikel ansehen">galerie</a> <ul class='children'> <li class="cat-item cat-item-8"><a href="http://www.johannes-raimann.at/category/galerie/portfolio" title="Alle unter portfolio abgelegten Artikel ansehen">portfolio</a> </li> </ul> </li> <li class="cat-item cat-item-6"><a href="http://www.johannes-raimann.at/category/kontakt" title="Alle unter kontakt abgelegten Artikel ansehen">kontakt</a> </li> <li class="cat-item cat-item-3"><a href="http://www.johannes-raimann.at/category/news" title="lalala">news</a> </li> <li class="cat-item cat-item-7"><a href="http://www.johannes-raimann.at/category/uber-mich" title="Alle unter über mich abgelegten Artikel ansehen">über mich</a> </li> </div> Nachdem ich erst nach einem Klick auf eine Kategorie die Unterkategorie(n) sichtbar haben wollte und im BE von WordPress keine Option gefunden habe, habe ich das ganze per CSS gelöst: Code: /Kategorien formatieren/ .current-cat{ font-style:italic; } li.cat-item ul.children li{ visibility:hidden; margin-top:-44px;; } li.current-cat ul.children li{ visibility:visible; margin:-10pt 0 -10pt -20px; } li.current-cat-parent ul.children li{ visibility:visible; margin:-10pt 0 -10pt -20px; } li.cat-item{ visibility:visible; } Es passiert also nichts anderes als dass die children versteckt werden außer die Kategorie ist die aktuell ausgewählt. Die negativen margin sind notwendig damit die Abstände so bleiben "als ob nichts wäre" (was in älteren Versionen des IE und Opera auch nicht perfekt funktioniert, aber das ist halb so schlimm). Mein Problem ist nun, dass bei bestimmten WebKit-Versionen eine Kategorie, die Unterpunkte hat, erst gar nicht in der Navigation angezeigt wird, anklickbar ist sie aber trotzdem noch. Der Text wird also nicht angezeigt. Hier mal ein Browsershots: http://browsershots.org/screenshots/...c8eb827c60887/ Unter Mac OS schaut das ganze auch bei neueren Versionen von WebKit so aus. Unter Windows anscheinend nicht. Stimmt irgendetwas im CSS nicht? Habe ich da etwas schlampig formuliert und deshalb interpretieren das bestimmte Versionen von WebKit so? Wer weiß Rat? mfg RemoteC PS: Wenn es eine andere Lösung gibt die Unterkategorien erst sichtbar zu machen wenn die Elternkategorie angeklickt wurde, ist mir auch geholfen. Leider habe ich da in WordPress keine Einstellung gefunden. PPS: Wenn jemand mit Chrome od. Safari das Problem nicht hat bitte auch mit Browserversion melden, vielleicht ist das wirklich nur ein Bug in bestimmten Versionen unter Mac OS?!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

27.04.10, 18:02	#2 (permalink)
copy` Registriert seit: 24.04.10 Likes: 0	Hi, ich seh den Bug auch, unter Safari 3.2.1 Windows. Der Inspektor sagt, dass das Element eine Höhe von 0px hat; das könnte an deinem rumgespiele mit den Margins liegen. Für das Verstecken von Elementen ohne Platzhalter sollte man allerdings visibility gar nicht benutzen, dafür gibt es die Display-Eigentschaft. Probier es mal damit.

28.04.10, 01:45	#3 (permalink)
RemoteC Themenstarter Registriert seit: 11.07.05 Likes: 0	Danke für die Antwort An display lag es nicht, es lag daran, dass WP die Navigationspunkte als Listeneinträge darstellt aber keine <ul> erzeugt. Das ist natürlich nicht konform aber anscheinend reagiert nur webkit darauf. Zumindest laut browsershots.org funktioniert das jetzt mit verschiedenen Versionen von Safari & Chrome. A propos: Gibt es Alternativen zu browsershots.org? Extensions für Firefox, die andere Browser emulieren? Dass der IE Probleme macht ist bekannt, von webkit war mir das bis jetzt nicht bekannt ...

[HaBo]

Problem mit webkit