[css] a:hover wordt niet door IE weergegeven

[Geert.H]

Ik heb een rollover menu gemaakt. Dit heb ik gedaan aan de hand van dit voorbeeld.
Dit werkte perfect, maar aangezien het er een beetje anders uit moest zien heb ik het hier en daar een beetje aangepast, nu werkt het niet meer.

Dit is de css:

code:

#menu {
    z-index:4;
    position:absolute;
    left:306px;
    top:98px;
}

#menu a { 
    text-decoration:none;
    color:#000000;
    height:41px;
    width:41px;
    margin:10px;
    border:1px dotted #000000;
    } 
#menu a:hover {
    background-image: url(Afbeeldingen/holland.gif);
    text-decoration:none;
    }
#menu a div {
    width: 129px; 
    height: 11px;
    text-align:center;
    font-family: "verdana", arial;
    font-size: 11px;
    position: absolute;
    top: -16px;
    left: 124px;
    visibility:hidden;
    }

#menu a {
    padding-top: 0px; 
    padding-bottom: 0px;
    float:left;
    }   
#menu a:hover div {
    visibility:visible;
    }

en dit is het menu

code:

    <div id="menu">
        <a href="index.php"><div id="item">Beginpagina</div></a>
        <a href="#"><div id="item">Bestellen</div></a>
        <a href="#"><div id="item">Inhoud kar</div></a>
        <a href="#"><div id="item">Help</div></a>
        <a href="#"><div id="item">Informatie</div></a>
        <a href="#"><div id="item">Uitloggen</div></a>
    </div>

Ik heb de <li> en de <ul> tags weg gehaald, omdat die niet nodig waren, op dat punt werkte het menu nog.
Toen ben ik verder gegaan met het positioneren van de buttons (de vierkantjes om de rondjes). En sindsdien werkt het in internet explorer niet meer. Firefox heeft geen problemen ermee.
Ik kwam er pas wat later achter want ik keek keek alleen in firefox, en daar werkte alles perfect.

Ik heb alle nutteloze rotzooi al een keer weggehaald, maar daar lag het niet aan. Ik heb de css van het voorbeeld er ook al naast gehad maar kon daar ook niet de oorzaak in vinden.
wel heb ik

code:

display: block;

gestript uit het #menu a, omdat dit ervoor zorgde dat de tekst in internet explorer 25 px naar rechts ging.

Misschien dat jullie iets vinden wat ik over het hoofd heb gezien

[ Voor 38% gewijzigd door Geert.H op 17-12-2004 23:39 ]

[André]

Het werkt bij mij anders prima in IE, alleen de tekst verschijnt niet meer in het vakje boven het menu

[Geert.H]

Hmm, ok mijn fout.
Ik zal nog even duidelijk maken wat het probleem is. De bedoeling is dat bij IE dus wel tekst komt te staan in dat vakje daarboven.

En de vlag heb ik gedaan zodat ik zeker wist dat het geheel werkte

[TafkaT]

code:

#menu a    
    height:41px;
    width:41px;
    }

Dit klopt al niet...

edit: nogmaals kritisch kijken levert mij de vraag op: waarom wordt 3 maal hetzelfde gedaan?

[ Voor 35% gewijzigd door TafkaT op 17-12-2004 23:29 ]

[shnazzle]

IE en Mozilla pakken de 'visibility' iets anders aan heb ik gemerkt. Dus de enige optie die ik heb kunnen vinden is javascript, om een keuze te maken tussen de browsers. Hier is een stukje (werkende) code uit een van m'n vele sites :

code:

<SCRIPT language="Javascript">
    <!--
        n = (document.layers) ? 1:0
        ie = (document.all) ? 1:0
        nn6 = (document.getElementById) ? 1:0
        
        
        function hidemenus()
        {   
        if (n){ 
            document.linka.visibility="hidden";
            document.linkb.visibility="hidden"; 
            document.linkc.visibility="hidden"; 
            }
        else {
            document.getElementById("linka").style.visibility="hidden";
            document.getElementById("linkb").style.visibility="hidden";
            document.getElementById("linkc").style.visibility="hidden";
        }
        }
        
        function showmenu(themenu)
        {
        hidemenus();
        if (n){ 
            document.themenu.visibility="visible"; 
            }
        else {
            document.getElementById(themenu).style.visibility="visible"; 
        }
        }
        
    -->
    </SCRIPT>

Ik hoop dat je er wat aan hebt. maar in ieder geval, de visibility aanroeping is het probleem

[Geert.H]

Ik heb die dubbele waarde's er uit gehaald.
Ik ben bezig met het javascript, ben alleen niet echt een held in javascript dus moet even prutsen.

[André]

Het rare wat ik nu tegenkom is dat als ik de background image vervang door color het wel werkt

code:

#menu a:hover {
  background-color: #000000;
  text-decoration:none;
}

[ Voor 4% gewijzigd door André op 17-12-2004 23:49 ]

[Geert.H]

Heb ik ook. En als ik geen achtergrond neem, dan werkt het weer niet.

Hier kan je de hele css vinden.

[ Voor 44% gewijzigd door Geert.H op 17-12-2004 23:58 ]

[shnazzle]

btw.... mijn bijbel is al jaren een combinatie van
http://www.htmlgoodies.com

en

http://www.htmlcompendium.org

en

http://www.htmlhelp.com/reference/css/properties.html

Vooral die eerste staat dat hele gedoe van javascript, bovendien ook heeelle goede primers

[André]

Ja maar shnazzle, met js dit probleem oplossen is te veel van het goede. Het kan ook gewoon met css alleen

[Geert.H]

Ok, dit is de oplossing.
Beetje vies maarja.
Ik zet eerst de background-color op wit, en vervolgens de transparancy op 0.
Als andere mensen nog betere oplossingen hebben, dan hou ik mij aanbevolen.

code:

#menu a:hover {
    text-decoration:none;
    background-color:#ffffff;
    filter:alpha(opacity=0);    
    }

[Geert.H]

Met de bovenstaande oplossing werkt het in IE maar niet in firefox, ik heb het als volgt gedaan.
Dit staat in mijn css

code:

#menu a:hover {
    text-decoration:none;
    }

en dit staat tussen mijn <head></head>

code:

<!--[if IE]>
<style type="text/css">
#menu a:hover {
    text-decoration:none;
    background-color:#ffffff;
    filter:alpha(opacity=0);    
    }
</style>
<![endif]-->

En het werkt

[crisp]

shnazzle schreef op vrijdag 17 december 2004 @ 23:33:
IE en Mozilla pakken de 'visibility' iets anders aan heb ik gemerkt. Dus de enige optie die ik heb kunnen vinden is javascript, om een keuze te maken tussen de browsers. Hier is een stukje (werkende) code uit een van m'n vele sites :
[...]
Ik hoop dat je er wat aan hebt. maar in ieder geval, de visibility aanroeping is het probleem

Ondersteun jij nog echt Netscape 4 en/of IE4?
Zo niet, dan kan die hele browsersniffing er uit en kan je alles met getElementById doen

[shnazzle]

Compatibiliteit is nooit mis....toch?

[Verwijderd]

shnazzle schreef op vrijdag 17 december 2004 @ 23:33:
IE en Mozilla pakken de 'visibility' iets anders aan heb ik gemerkt. Dus de enige optie die ik heb kunnen vinden is javascript, om een keuze te maken tussen de browsers. Hier is een stukje (werkende) code uit een van m'n vele sites :
...

Ik hoop dat je er wat aan hebt. maar in ieder geval, de visibility aanroeping is het probleem

En als je nou het volgende gebruikt:

display: block;
of
display: none

i.p.v.
visibility: hidden;

[André]

Verwijderd schreef op zaterdag 18 december 2004 @ 14:22:
[...]

En als je nou het volgende gebruikt:

display: block;
of
display: none

i.p.v.
visibility: hidden;

Nee, dat maakt niet uit

[crisp]

shnazzle schreef op zaterdag 18 december 2004 @ 13:55:
Compatibiliteit is nooit mis....toch?

Als het zou werken, heb je dat wel getest?

[shnazzle]

errrr...WHO ASKED YOU?!?! ...

[Verwijderd]

welkom op GoT shnazzle, maar da's niet echt de manier om met elkaar om te gaan hier

volg crisps raad maar eens op

@Andre:
wat bedoel je daarmee? want ik neem aan dat je weet dat visibility: hidden; iets anders doet dan display: none; het laatste tekent namelijk je hele box niet, terwijl in het eerste geval dat wel gebeurt. Andere elementen houden er ook rekening mee, je ziet 'm alleen niet.

[ Voor 56% gewijzigd door Verwijderd op 18-12-2004 18:05 ]

[crisp]

shnazzle schreef op zaterdag 18 december 2004 @ 17:56:
errrr...WHO ASKED YOU?!?! ...

Wat ik bedoelde: je kan natuurlijk binnen scripting heel leuk afvragingen aanbrengen om voor zwaar verouderde browsers dingen anders te doen, maar dan blijft altijd nog de vraag: werkt de pagina dan ueberhaupt wel in die browser want anders zit je gewoon dingen voor niets te doen.
Feit is dat de CSS ondersteuning van IE4 en NS4 maar zeer minimaal is, dus de kans is groot dat deze browsers een dergelijke pagina sowieso al niet goed kunnen laten zien. Als je dat niet test weet je dat dus nooit zeker en slaat je compatibiliteits-opmerking gewoon nergens op, en 1 blik op de CSS van de topicstarter zegt mij al dat dit in IE4 of NS4 ueberhaupt niet het gewenste resultaat gaat opleveren ongeacht de JS erachter

[shnazzle]

m'n "unacceptable" post was trouwens een grapje...bedoelde er verder niks mee hoor! Uiteraard is de informatie hier in de Shnazzle-brein opgeslagen en wordt gewaardeerd, Dank Crisp!