ik heb opnieuw een probleem in ie/win

kijk op http://www.klanten.yichalal.be/ecospot/

als je over een menu-item komt moet een afbeelding zichtbaar worden. dat doe ik zo:

ul#menu li a img.hover{
margin: 0 auto;
visibility: hidden;
display: block;
width: 0;
}
ul#menu li a:hover img.hover{
visibility: visible;
width: auto;
}

wat werkt in firefox en safari, maar niet in ie/win. ik zie wederom niet waarom dat niet lukt. heeft dat te maken met child of pseudo selectors? nog iets anders?

de

display:block;
op de img zorgt trouwens voor het breken van display:inline op li. die block staat er enkel omdat ik wil dat de tekst op een nieuwe regel komt. zijn daar alternatieven voor?

(Bewerkt door mozna om 16:47, 11-06-2007)

Kun je niet gewoon de hele afbeelding onderdeel maken van de "hover"?
Ik bedoel, even als voorbeeld:


a { background: #ffffff;
padding-top: 0px; }

a:hover { background: #ffffff url(/images/plaatje.gif) top left no-repeat;
padding-top: 25px; }


Zoiets zorgt er toch ook voor dat je een plaatje in de a verschijnt. Dan hoef
je hem niet "zelf" aan en uit te zetten maar gebeurt dit als direct gevolg
van de "hover". Het plaatje haal je dan als het ware uit de html en roept
het aan via de css!

(Een nadeel is dat het bij mouse-over traag kan lijken omdat de plaatjes
op dat moment worden geladen. Dat kun je echter eenvoudig voorkomen
door de plaatjes elders in je pagina in een onzichtbare laag aan te roepen
zodat ze 'gepreload' worden).

ja ultiem moet ik dat overwegen. waarom ik het niet deed was dat in elk menu-item een ander plaatje moet komen. valt op zich op te lossen met verschillende id's maar dan moet je en de html en de css aanpassen.

ja, het werkt behalve... dat in ie een zeer vervelende flikkering optreedt... soms voel ik mij echt wel onwetend...

Bij mij zie ik geen flikkering.. maar ik kan me voorstellen dat dat komt wanneer je voor de eerste keer de plaatjes laat verschijnen, omdat ze dan dus moeten worden ingeladen vanaf het net. Om dat te voorkomen kun je ze ergens onzichtbaar in je pagina zetten zodat de bestanden alvast op je computer aanwezig zijn wanneer je er overheen beweegt.

hey mvdg, ik had inderdaad op een andere pagina moeten verder werken. ik heb de situatie zoals hieroven beschreven zelfs niet bewaard. sorry hoor.

wat ik probeerde was dat de afbeelding die nu boven het menu-item komt eigenlijk in de tab kwam te  zitten en dus de tekst en button naar beneden duwt/groter maakt door een padding-top.  

ik heb de achtergrondafbeelding gecheckt en dat was niet het probleem. het was dus niet de afbeelding die flikkerde maar naar mijn gevoel de button die zijn hover status verloor als ik de muis er niet volledig stil over hield... het probleem zat hem volgens mij in de interpretatie door ie van display:block op mijn a-tag.

toch heel erg bedankt voor het meedenken.

Die flikkering kan kloppen... soms heb je dat wel eens omdat browsers (van wat ik begrijp)
het hoverplaatje laden op 't moment dat je daadwerkelijk "hovert".

Dit is op te lossen met een stukje javascript die de browser "dwingt" alle beelden te laden,
waardoor je die flikkering kwijt bent. Hoe dat werkt en welk stukje code dat is weet ik
helaas niet.

Een andere oplossing is door niet 2 beelden te gebruiken voor je menu (gewone status
en de hoverstatus), maar 1 beeldje te maken, en dan het plaatje te verschuiven.
Dan wordt de hover ook van tevoren al geladen, omdat het eigenlijk gewoon in één beeldje
zit tesamen met de originele staat van de button.

bedankt voor de hulp. maar het had dus niks te maken met de achtergrondplaatjes. uitgebreid onderzocht op een versie helemaal zonder plaatjes...