zindex van link binnen div probleem in IE

[stevebravo]

Deze structuur heb ik ongeveer:

<div class="grandparent">
  <div class="parent>
     <a href="#" class="child"></a>
     <div class="child2">
           <a href="#" class="child3"></a>

     </div>
  </div>
</div>

de link met klasse "child" heb ik de volgende css regels toegekend:

div.parent a.child
{
   width: 490px;
   height: 136px;
   position: absolute;
   display:block;
   z-index:9999;
}

Nu merk ik dat niet de gehele block van de child functioneert, omdat ook de link child3 klikbaar blijft!!!
Dat moet dus niet!!!!

Hoe kan dit toch?

Alvast bedankt

 

[Snorvisable]

Dag Stevebravo,

probeer het door z-index te gebruiken op de div, niet op de hyperlink. Ik kan verder niet veel zeggen wat het beste is aangezien ik zo even niet kan zien wat je precies probeert te bereiken.

Vriendelijke groet,

Bart

 

[csshunter]

Hoi stevebravo,
Ja, Internet Explorer heeft soms rare kuren!
Ik heb je code even in een testpagina omgezet; daarbij de child-class een groen randje gegeven en iets opgeschoven, zodat je goed kunt zien wat er gebeurt. De child2-class, waar link child3 in zit, is geel.
Verder de links een bladwijzer-naam gegeven, zodat je bij hoveren kunt zien welke nu eigenlijk geactiveerd wordt.
Dat geeft deze:

• Test 1: z-index-in-IE-1.htm
  
  
• In echte browsers: hoveren binnen het groene gebied is mogelijk, en gaat altijd naar de child-link.
• In IE7: hoveren binnen het groene gebied is niet mogelijk (ondanks het {display: block}); alleen als je op de child-link zelf gaat staan, is deze te beklikken; maar de andere child3-link kan ook binnen het groene gebied aangeklikt worden!
• In IE7 is er ook een uitzondering: als de child-link een border heeft, gaat die border wel naar de link!
  Hier een groene border van 2px genomen, dat is wat makkelijker mikken dan een 1px border.
  - Maar dat is alleen het randje zelf: zodra je eroverheen bent, houdt de klikbaarheid (en het aanwijshandje) meteen weer op...

Valt IE te corrigeren?
Jazeker, met een truc uit de oude doos: zodra je het groene gebied een background-kleur geeft, gaat het goed!

• Test 2: z-index-in-IE-2.htm
  
  
• In echte browsers: als test 1.
• Een z-index van 9999 is niet nodig, met .child {z-index: 2} gaat het ook goed.
• IE7 doet zowaar alsof het een echte browsers is.

Mocht je om een of andere reden toch transparantie van het groene gebied nodig hebben, dan kan IE voor de gek gehouden worden door er een transparant background-image in te zetten. Als er maar een background benoemd is, gaat het goed (die niet "transparent" heet, want dat werkt niet).

Met een 1x1 transparant background-image:

• Test 3: z-index-in-IE-3.htm
  
  
• In echte browsers: als test 1 en 2.
• IE7 doet zowaar alsof het een echte browsers is.

=======
Het bovenstaande heb ik niet in IE8 en hoger kunnen testen.
Faalt IE8 en/of IE9 ook nog bij test 1? Ik had verwacht dat ze bij Microsoft deze bug intussen wel verholpen zouden hebben.

Met vriendelijke groet,
CSShunter

[edit]Sterker nog:[/edit] er is helemaal geen z-index nodig! z-index-in-IE-4.htm