IE 7 z-index aanpassen bij hover - Softwareontwikkeling

vrijdag 16 januari 2009 11:25

Acties:

0 Henk 'm!

Topicstarter

Hoi hoi,

Heb het forum al door zitten spitten, maar ben nog niet de oplossing voor onderstaand probleem tegen gekomen. Wellicht dat iemand hier de oplossing weet.

Heb de test code even hieronder geplaatst (is even niet netjes, gezien de vele hovers die in principe niet nodig zijn). Wat ik wil is dat ik meerdere links heb die elkaar iets overlappen. Dit doe ik door ze absolute te plaatsen met een z-index er aan mee gegeven. Op die manier overlappen ze elkaar.

Punt is nu alleen dat ik wil, dat wanneer ik met de muis er op ga staan, de z-index verandert zodat de link boven op de andere links komt liggen. Dit werkt prima in IE 6, FF, Safari en Chrome. Alleen in IE 7 niet.

Is hier een hack of work-around voor?

code:

<style media="screen">
    a.a,
    a.a:visited { position: absolute; top: 0; left: 0px; z-index: 5; display:block; width: 100px; height: 40px; background: #FF0000;}
    a.a:hover { position: absolute; top: 0; left: 0px; z-index: 6; display:block; width: 100px; height: 40px; background: #00FFFF;}
    a.b,
    a.b:visited { position: absolute; top: 0; left: 20px; z-index: 4; display:block; width: 100px; height: 40px; background: #00FF00;}
    a.b:hover { position: absolute; top: 0; left: 20px; z-index: 6; display:block; width: 100px; height: 40px; background: #00FFFF;}
    a.c,
    a.c:visited { position: absolute; top: 0; left: 120px; z-index: 3; display:block; width: 100px; height: 40px; background: #0000FF;}
    a.v:hover { position: absolute; top: 0; left: 120px; z-index: 6; display:block; width: 100px; height: 40px; background: #00FFFF;}
    a.d,
    a.d:visited { position: absolute; top: 0; left: 180px; z-index: 2; display:block; width: 100px; height: 40px; background: #FFFF00;}
    a.d:hover { position: absolute; top: 0; left: 180px; z-index: 6; display:block; width: 100px; height: 40px; background: #00FFFF;}
</style>

code:

<body>
    <div style="position: relative; float: left; z-index:10;">
        <a href="#" class="a">test 1</a>
        <a href="#" class="b">test 2</a>
        <a href="#" class="c">test 3</a>
        <a href="#" class="d">test 4</a>
    </div>

vrijdag 16 januari 2009 11:57

Acties:

0 Henk 'm!

Michali

Hmm, wel een eigenaardig probleem.

Als ik met javascript events definieer en zo de z index aanpas, dan lijkt het wel te werken. Je zou voor IE7, met conditional comments, een scriptje kunnen toevoegen die events bind; die ervoor zorgen dat het ook daar goed werkt.

Noushka's Magnificent Dream | Unity

vrijdag 16 januari 2009 13:00

Acties:

0 Henk 'm!

Lifelogger

Topicstarter

Zou dat wel werken? In principe doe je dan toch hetzelfde als nu met de CSS?

vrijdag 16 januari 2009 13:31

Acties:

0 Henk 'm!

mcDavid

hmm volgens mij zou dat wel moeten werken, heb het wel eens toegepast, met een :hover op een li-element.

offtopic:
Ik zou trouwens sowieso even alles wat niet veranderd bij :hover, uit de css halen. Maakt het erg onoverzichtelijk en het doet verder niets.

vrijdag 16 januari 2009 13:46

Acties:

0 Henk 'm!

Lifelogger

Topicstarter

Heb ik komend weekend weer iets te doen! Mocht er intussen nog iemand een andere css oplossing hebben, hoor ik dat natuurlijk graag. :-)

vrijdag 16 januari 2009 14:00

Acties:

0 Henk 'm!

mcDavid

http://duft.nl/fs6/ hier gaat het wel goed met de z-index op de uitklapmenu's.
(subtiel verschil: de uitklap menu's zijn 2px te breed, zonder verhoogde z-index zou de volgende knop over het uitgeklapte menu vallen (zoals in IE6 uiteraard nog wel het geval is))

maandag 19 januari 2009 08:16

Acties:

0 Henk 'm!

Lifelogger

Topicstarter

Dank voor de link. Zal er even naar kijken, al weet ik niet zeker of ik er iets mee kan. Gaat in mijn geval niet om een uitklap. Maar wie weet kan ik er nog iets uit halen. :-)

maandag 19 januari 2009 10:58

Acties:

0 Henk 'm!

Tehkram

Het is goed mogelijk dat de float die in de div staat deze bug veroorzaakt, ben al vaker soortgelijke problemen met float en z-index tegengekomen in IE7.

Dus misschien even kijken of je in de div de float weg kunt halen en kijken of het dan wel werkt

maandag 19 januari 2009 13:48

Acties:

0 Henk 'm!

dB90

Note: Z-index only works on elements that have been positioned (eg position:absolute;)!

Bron

Webberry Webdevelopment

maandag 19 januari 2009 19:12

Acties:

0 Henk 'm!

Lifelogger

Topicstarter

Tehkram schreef op maandag 19 januari 2009 @ 10:58:
Het is goed mogelijk dat de float die in de div staat deze bug veroorzaakt, ben al vaker soortgelijke problemen met float en z-index tegengekomen in IE7.

Dus misschien even kijken of je in de div de float weg kunt halen en kijken of het dan wel werkt

Heb het geprobeerd zonder de position relative en ook nog geprobeerd met een position absolute op de div, maar hebben beidde geen effect in IE 7.

dinsdag 20 januari 2009 00:06

Acties:

0 Henk 'm!

dB90

Heb je ook de float:left; weggehaald?

Webberry Webdevelopment

dinsdag 20 januari 2009 09:24

Acties:

0 Henk 'm!

Tehkram

Het ging inderdaad om de float en niet om de positioning van de div.

Zoals dB90 al aangaf, heb je al geprobeerd om alleen de float weg te halen om te testen of daar het probleem ligt?

woensdag 21 januari 2009 08:53

Acties:

0 Henk 'm!

Lifelogger

Topicstarter

Tehkram schreef op dinsdag 20 januari 2009 @ 09:24:
Het ging inderdaad om de float en niet om de positioning van de div.

Zoals dB90 al aangaf, heb je al geprobeerd om alleen de float weg te halen om te testen of daar het probleem ligt?

Yep. Ook als de float er uit is, werkt het niet in IE 7. Ze link krijgt wel een andere z-index, maar je ziet het niet in de browser.

Ben er wel achter dat het met behulp van Javascript helaas wel werkt.