nicht angemeldet
Firefox verschiebt Inhalt bei "overflow:hidden"
0 0 
MudGuard
Firefox verschiebt Inhalt bei "overflow:hidden"
Hi,
ich schreibe gerade eine Navigation, bei der die Unterpunkte zu einem Navigationspunkt "ausgeklappt" werden, wenn die Maus über diesen Navigationspunkt fährt. Soll in allen gängigen css2-fähigen Browsern und natürlich ohne Javascript funktionieren.
Bin auch fast am Ziel. Folgendes Beispiel funktioniert mit den neuen NS,IE,Opera. Dabei arbeite ich mit overflow visible/hidden.
Das Problem: Firefox ordnet die Menüpunkte allesamt NEBEN die div's, IN denen sie stehen sollten.
Lasse ich overflow:hidden weg, so sind die Punkte dort, wo sie sein sollten.
Hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>dropdownmenu ohne browserweiche</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
.huelldiv {
font-family: arial, sans-serif;
display:block;
float:left;
height:1.4em;
overflow:hidden; /*Hier hat Firefox ein Problem*/
}
a:hover.auss .huelldiv {overflow:visible;}
a.auss {font-style:italic;}
a:hover.auss {font-style:normal;}
a.inn {display:block;}
div {border: solid black 1px;}
-->
</style>
</head>
<body>
<div class="navidiv">
<a href="#" class="auss">
<div class="huelldiv">Navipunkt1
<a href="#" class="inn">Navipunkt11</a>
<a href="#" class="inn">Navipunkt12</a>
<a href="#" class="inn">Navipunkt13</a>
<a href="#" class="inn">Navipunkt14</a>
<a href="#" class="inn">Navipunkt15</a>
<a href="#" class="inn">Navipunkt16</a>
</div>
</a>
<a href="#" class="auss">
<div class="huelldiv">Navipunkt2
<a href="#" class="inn">Navipunkt21</a>
<a href="#" class="inn">Navipunkt22</a>
<a href="#" class="inn">Navipunkt23</a>
<a href="#" class="inn">Navipunkt24</a>
</div>
</a>
<a href="#" class="auss">
<div class="huelldiv">Navipunkt3
<a href="#" class="inn">Navipunkt31</a>
<a href="#" class="inn">Navipunkt32</a>
<a href="#" class="inn">Navipunkt33</a>
</div>
</a>
<a href="#" class="auss">
<div class="huelldiv">Navipunkt4
<a href="#" class="inn">Navipunkt41</a>
<a href="#" class="inn">Navipunkt42</a>
<a href="#" class="inn">Navipunkt43</a>
<a href="#" class="inn">Navipunkt44</a>
<a href="#" class="inn">Navipunkt45</a>
<a href="#" class="inn">Navipunkt46</a>
</div>
</a>
</div>
</body>
</html>
Bin für Vorschläge dankbar.
Grüße
Mrs. Olivander
-
hi,
Dabei arbeite ich mit overflow visible/hidden.
warum benutzt du nicht visibility oder display zum ein-/ausblenden von elementen?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
Dabei arbeite ich mit overflow visible/hidden.
warum benutzt du nicht visibility oder display zum ein-/ausblenden von elementen?Habe ich auch getestet. Dabei habe ich die "inneren" Links mit der Klasse "inn" in ein weiteres div gepackt und dann dieses per "visibility:hidden" bzw. "display:none;" ausgeblendet
und mit dem Selektor "a:hover.auss .huelldiv2"
per "visibility:visible" bzw. "display:block;" wieder eingeblendet.Funktioniert bei Firefox,NS und Opera, aber nicht beim IE. Ich suche eine Lösung für alle Browser ohne dabei eine Weiche einzurichten.
Grüße
Mrs. Olivander
-
-
Hi,
<a href="#" class="auss">
<div class="huelldiv">Navipunkt1
<a href="#" class="inn">Navipunkt11</a>a als inline-Element darf keine block-Elemente wie div enthalten.
Desweiteren darf a auch keine a-Elemente enthalten.Dein Code hat also mit (X)HTML nichts zu tun.
Schreib erstmal korrektes (X)HTML, dann kann man über irgendwelche Darstellungsfehler ggf. nochmal nachdenken.
Soll in allen gängigen css2-fähigen Browsern und natürlich ohne Javascript funktionieren.
Ok, da Du css2-fähigkeit forderst, stört es ja nicht, daß der IE :hover nur für a kann.
Für CSS2-fähige Browser kann man das z.B. mit verschachtelten Listen machen, wenn die Maus über dem äußeren li steht, wird für das innere ul display auf block gesetzt, sonst auf none.Solltest Du entgegen obiger Behauptung den IE doch berücksichtigen wollen, geht es nicht ohne Javascript, da der IE :hover nur für a-Elemente kennt und a-Elemente ja nicht verschachtelt werden dürfen.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
ok, lass es mich so formulieren: ich möchte eine Navigation haben, die in allen gängigen neuen Browsern ohne JS funktioniert. Einschließlich des IE. Da IE :hover nur bei <a> kennt, muß ich dieses verwenden.
Grüße
Mrs. Olivander-
Hi,
ok, lass es mich so formulieren: ich möchte eine Navigation haben, die in allen gängigen neuen Browsern ohne JS funktioniert.
dann richte es so ein, dass der IE die Navigation immer vollständig anzeigt.
Da IE :hover nur bei <a> kennt, muß ich dieses verwenden.
Nein, Du musst es nicht schwerwiegend falsch mit zwangsläufig unvorhersehbaren Effekten machen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Hat vielleicht jemand eine Idee, wie sich das "overflow"-Problem bei dem Firefox verhindern lässt?
Remember: Auch der Firefox stellt das gewünschte Ergebnis dar. Erst bei Benutzung von "overflow:hidden" tritt das Problem auf.Dabei möchte ich auf verschachtelte a-Tags nicht verzichten.
Ja, ich weiß, dass es nicht w3c-conform ist.
Nein, ein weiterer Hinweis darauf würde mir nicht weiterhelfen.Grüße
Mrs. Olivander-
Hi,
Hat vielleicht jemand eine Idee, wie sich das "overflow"-Problem bei dem Firefox verhindern lässt?
ganz einfach: Schreibe validen Code. Bei allem anderen ist *jedes* Ergebnis sowohl unvorhersehbar als auch zu rechtfertigen.
Remember: Auch der Firefox stellt das gewünschte Ergebnis dar. Erst bei Benutzung von "overflow:hidden" tritt das Problem auf.
Na und? Kaputt bleibt kaputt. Die Effekte hast Du damit der reinen Willkür überlassen.
Dabei möchte ich auf verschachtelte a-Tags nicht verzichten.
Genau das ist Dein Problem: Dieser Wunsch ist mehr als wirr.
Ja, ich weiß, dass es nicht w3c-conform ist.
Nein, es ist einfach idiotisch.
Nein, ein weiterer Hinweis darauf würde mir nicht weiterhelfen.
In dem Fall existiert nichts, was Dir helfen könnte.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi Cheatahm
... Dieser Wunsch ist mehr als wirr.
... Nein, es ist einfach idiotisch.
Gemach, gemach. Der Wunsch ist weder wirr noch idiotisch.
Ich habe den IE und auch andere Browser nicht programmiert, sondern muß für sie codieren. Ich wünsche mir ebenfalls eine bessere Einhaltung der w3c-Normen durch die Browser, insbesondere durch den IE. Wenn ich jedoch vor der Wahl stehe, entweder ein paar (auch nicht-conforme) Workarounds zu bauen oder aber für einen Großteil der Leser meiner Seiten eine nicht-adäquate Lösung anzubieten, suche ich halt nach Workarounds.
Grüße
Mrs. Olivander
-
-
Hi,
Dabei möchte ich auf verschachtelte a-Tags nicht verzichten.
Ja, ich weiß, dass es nicht w3c-conform ist.schön, daß Du das weißt. Dann solltest Du eigentlich auch die Lösung kennen: standardkonformen Browsern standardkonformes HTML zu liefern und dem IE Murks. Für so etwas bieten sich Conditional Comments an.
freundliche Grüße
Ingo
-
-
-
-