[CSS] popup werkt niet onder IE - Softwareontwikkeling

dinsdag 27 juli 2004 14:19

Acties:

Topicstarter

De volgende (vereenvoudigde) HTML laat in firefox keurig een infolabel zien al ik over de link hover. In IE gebeurt echter niks.

code:

<html>
    <head>
        <title>titel</title>
        <style>
         a.info {
            position:relative;
            z-index:24;
        }

        a.info:hover{
            z-index:25;
        }
        a.info span{
            display: none
        }
        a.info:hover span{
            display:block;
            position:absolute;
            top:2em; left:2em; width:15em;
            z-index:25;
            background-color: #b8ccff;
        } 
        </style>
    </head>
    <body>
        <div class="contentitem">
            Dit is 
            <a class="info" href="#">een 
            <span>Mooie duidelijke uitleg.</span></a>test
        </div>
    </body>
</html>

Ik heb verschillende dingen geprobeerd, maar ik kom er niet uit. Voor alle duidelijkheid, als ik over de link hover wil ik graag de tekst in de span zien. Iemand enig idee?

Oops! Google Chrome could not find www.rijks%20museum.nl

dinsdag 27 juli 2004 14:22

Acties:

André

Analytics dude

Volgens mij werkt deze constructie niet in IE, maar kon je hem wel werkende maken met HTC:

[rml][ css] meer css met htc voor IE[/rml]

[ Voor 170% gewijzigd door André op 27-07-2004 14:31 ]

dinsdag 27 juli 2004 14:28

Acties:

drm

f0pc0dert

Dit gaat je niet lukken in IE. Welkom in de wondere wereld van IE die CSS niet snapt

edit:

Los het op met een simpel javascriptje, dan komt het helemaal goed:

HTML:

<style>
   a.info {
      position:relative;
   }
   
   a.info span{
      visibility:hidden;
      position:absolute;
      top:2em; left:2em; width:15em;
      z-index:25;
      background-color: #b8ccff;
   }
</style>
<script>
   function on ( a ) {
      a.getElementsByTagName('span').item(0).style.visibility='visible';
   }
   function off ( a ) {
      a.getElementsByTagName('span').item(0).style.visibility='hidden';
   }
</script>

<div class="contentitem">
Dit is 
<a onmouseover="on(this)" onmouseout="off(this)" class="info" href="#">een 
<span>Mooie duidelijke uitleg.</span></a>test
</div>

[ Voor 81% gewijzigd door drm op 27-07-2004 14:31 ]

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

dinsdag 27 juli 2004 14:30

Acties:

Verwijderd

code:

1	Dit is <a href="" title="Mooie duidelijke uitleg">een</a> test.

dinsdag 27 juli 2004 14:31

Acties:

Ramon

hover werkt alleen op een a in IE, dus als je die .info weghaalt dan zou het moeten werken. Hoewel dan natuurlijk je CSS opbouw zou moeten veranderen daarvoor.

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

dinsdag 27 juli 2004 14:35

Acties:

P_de_B

Topicstarter

André schreef op 27 juli 2004 @ 14:22:
Volgens mij werkt deze constructie niet in IE, maar kon je hem wel werkende maken met HTC:

[rml][ css] meer css met htc voor IE[/rml]

LOL, ik probeer je nu voor de 3e keer te quoten, wil je het niet weer wijzigen

drm schreef op 27 juli 2004 @ 14:28:
Dit gaat je niet lukken in IE. Welkom in de wondere wereld van IE die CSS niet snapt

iIk wilde het graag met puur CSS doen, maar dit werkt idd prima. Mijn dank is groot, ook de rest die gereageerd heeft..

Oops! Google Chrome could not find www.rijks%20museum.nl

dinsdag 27 juli 2004 14:43

Acties:

P_de_B

Topicstarter

Hmmz, nu moet IE weer in Quirks mode omdat anders alle onderliggende DIV's verdwijnen op het moment dat de span visible wordt

Oops! Google Chrome could not find www.rijks%20museum.nl

dinsdag 27 juli 2004 14:44

Acties:

drm

f0pc0dert

P_de_B:
Hmmz, nu moet IE weer in Quirks mode omdat anders alle onderliggende DIV's verdwijnen op het moment dat de span visible wordt

Hoe bedoel je?

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

dinsdag 27 juli 2004 14:57

Acties:

P_de_B

Topicstarter

drm schreef op 27 juli 2004 @ 14:44:
[...]
Hoe bedoel je?

Afbeeldingslocatie: http://www.tweakers.net/ext/f/38092/thumb.jpg

Afbeeldingslocatie: http://www.tweakers.net/ext/f/38093/thumb.jpg

Nou, de eerste afbeelding is zoals het er nogmaal uit moet zien, de tweede is zoals het eruit ziet nadat ik gehovered heb over de link. Alles lager dan de link wordt ineens onzichtbaar. Voeg ik een lege HTML comment toe aan de pagina gaat alles wel goed.

Oops! Google Chrome could not find www.rijks%20museum.nl

dinsdag 27 juli 2004 14:59

Acties: