IE-Problem mit floatender Navigationsliste
AK
- css
Hallo !
ich habe eine normale Navigationsliste in einen Rahmen mit runden Ecken eingebettet. Die <a href=""> - Elemente sind, wie in Selfhtml beschrieben, mit display:block und einer zusaetzlichen Breitenangabe fuer den IE auf die gesamte Breite der Liste ausgedehnt. Das funktioniert auch alles, aber: sobald ich diese Navigation in einen weiteren Container mit float:left einbette funktioniert im IE6+7 die Ausdehnung der Verweise auf die Breite der Liste nicht mehr - einen hover Effekt gibt es nur noch direkt auf dem Verweistext, nicht mehr ueber die gesamte Breite.
Uebrigens: als "einfache" Verweisliste ohne die Hintergrundgrafik funktioniert es auch bei floatender Navigation im IE richtig.
Das Beispiel und den Quelltext gibt es unter http://www.dsignt.de/fehler/ Weiss jemand Abhilfe?
Vielen Dank schon mal!
AK
Hallo,
in meinem IE6 habe ich die gleiche (von Dir gewünschte) Darstellung wie in Firefox, mit dem kleinen Unterschied, dass untere Navibox und Content nicht bündig sind, ca. 5 px in der Höhe).
Gruss city
Hallo AK,
funktioniert im IE6+7 die Ausdehnung der Verweise auf die Breite der Liste nicht mehr - einen hover Effekt gibt es nur noch direkt auf dem Verweistext, nicht mehr ueber die gesamte Breite.
Aber es fällt auf, dass der Hovereffekt nicht verschwindet, wenn du mit der Maus wieder aus dem Textbereich herausfährst, sondern erst, wenn du dessen Blockbereich verlässt.
Die Lösung wäre, dass du dem Link auch im nicht gehoverten Zustand eine Hintergrundfarbe verpasst. Wenn background-color:transparent
nicht hilft, dann versuch es mit einem transparenten Blindpixel als Hintergrundbild.
Gruß Gernot
Hallo Gernot,
Super, Problem geloest!
background-color:transparent hilft zwar nichts - seltsamerweise aber jede andere Hintergrundfarbe ?! - aber das transparente Hintergrundbild funktioniert.
Vielen Dank + Gruesse,
AK
Hallo AK,
funktioniert im IE6+7 die Ausdehnung der Verweise auf die Breite der Liste nicht mehr - einen hover Effekt gibt es nur noch direkt auf dem Verweistext, nicht mehr ueber die gesamte Breite.
Aber es fällt auf, dass der Hovereffekt nicht verschwindet, wenn du mit der Maus wieder aus dem Textbereich herausfährst, sondern erst, wenn du dessen Blockbereich verlässt.
Die Lösung wäre, dass du dem Link auch im nicht gehoverten Zustand eine Hintergrundfarbe verpasst. Wenn
background-color:transparent
nicht hilft, dann versuch es mit einem transparenten Blindpixel als Hintergrundbild.Gruß Gernot
Hallo AK,
Aber es fällt auf, dass der Hovereffekt nicht verschwindet, wenn du mit der Maus wieder aus dem Textbereich herausfährst, sondern erst, wenn du dessen Blockbereich verlässt.
Die Lösung wäre, dass du dem Link auch im nicht gehoverten Zustand eine Hintergrundfarbe verpasst. Wenn
background-color:transparent
nicht hilft, dann versuch es mit einem transparenten Blindpixel als Hintergrundbild.
Ich hatte mal ein ähnliches Problem mit einem floatenden Teaser, in dem sich u.a. ein über Javascript animierter Countdown mit Bildern als Ziffern befand. (Sowas wie: "noch 2 Tage, 7 Stunden, 35 Minuten und 12 Sekunden bis zu unserer Sonderaktion"). Dieser Teaser sollte komplett verlinkt sein; also habe ich ein A-Element mit 100% Weite und 100% Höhe als Kindelement absolut an diesem positioniert mit in den Teaser gelegt.
Das funktionierte in allen Browsern, nur im IE waren die Textteile des Teasers von der Verlinkung ausgenommen, das darüber liegende A-Element hatte da offensichtlich Löcher, da erschien dann auch der Text-Cursor und der Pointer/Hand-Cursor verschwand, wenn man mit der Maus drüberfuhr. Ich musste auch da mit einem Blindpixel als Hintergrundbild im Link arbeiten, damit er endlich auch im IE alles flächig abdeckte.
Ich vermute, dass es sich letzlich um ein und denselben Bug des IE handelt, wenn auch irgendwie komplementär: Bei dir war nur der Text im A-Element verlinkt, bei mir alles außer den Stellen, unter denen Text lag. Es wäre interessant zu wissen, ob diese(r) IE-Bug(s) schon einmal irgendwo beschrieben wurde(n). Falls nicht, wäre deine "Fehlerseite" ja schon mal ein Anfang, das noch ausführlicher zu tun.
Gruß Gernot
Hallo Gernot,
... »» Ich vermute, dass es sich letzlich um ein und denselben Bug des IE handelt, wenn auch irgendwie komplementär: Bei dir war nur der Text im A-Element verlinkt, bei mir alles außer den Stellen, unter denen Text lag. Es wäre interessant zu wissen, ob diese(r) IE-Bug(s) schon einmal irgendwo beschrieben wurde(n). Falls nicht, wäre deine "Fehlerseite" ja schon mal ein Anfang, das noch ausführlicher zu tun.
ich wollte gerade mal auf der Internet Explorer Feedback Seite nachgucken ob etwas aehnliches schon berichtet wurde, die ist aber zur Zeit geschlossen :((
city2000 hatte uebrigens geantwortet das auf seinem IE6 hover in beiden Faellen korrekt funktionierte - vielleicht haengt das Verhalten auch noch von installierten ServicePacks und aehnlichem ab, da moechte ich erst gar nicht tiefer einsteigen.
Um das Chaos perfekt zu machen habe ich noch eine Variante auf http://www.dsignt.de/fehler/ gestellt: dabei ist nur der dem Navigations-div nachfolgende Absatz mit font-style:italic umformatiert. Im IE6 bleibt alles beim alten, im IE7 geht der hover-Effekt nun auf einmal richtig ueber die ganze Elementbreite - dafuer gibts nun aber einen neuen Fehler beim Rahmen.
Da seh ich dann gar keinen Land mehr, denn der Container mit dem eigentlichen Fehler ist ja unveraendert geblieben!
Zum Glueck hilft pragmatisch bleiben, den IE einen IE bleiben lassen, und dein transparentes Hintergrundbild benutzen...
Danke + Gruesse,
AK