[Résolu] AlphaImageLoader + A + Display:Block

Bonjour

En désespoir de cause je viens vous soumettre un petit soucis avec Internet Explorer que j'espère vous aurez le temps de m'aider à résoudre.

Html > http://img.noklio.org/alsa/
Css > http://img.noklio.org/alsa/style.css

Je vous explique donc :

Mon div#sidebar ul li a:hover ne fonctionne pas correctement sous Internet Explorer. En effet seul le survol du texte fait reagir ie et non pas toute la surface définit par width et height. Le display:block; ne fonctionne pas correctement, ou quelquechose le gêne...

J'ai pensé qu'ie avait besoin de davantage de valeur et j'ai donc définit les largeur de #sidebar, de #sidebar ul et de #sidebar ul li, ainsi que la hauteur de #sidebar ul li. J'ai essayé d'ajouter un display:block sur #sidebar ul li mais en vain...

Voilà, si vous y comprenez quelquechose je veux bien un coup de main

Merci.

[EDIT]

Je viens de cerner le problème, l'utilisation du filter Microsft pour ie (pour une bonne gestion du canal alpha des PNG) empeche le display:block de fonctionner correctement... Malheureusement pour moi, sans PNG transparent il me faut bcp trop d'image pour créer le même effet sous IE... Le soucis vient du fait je pense que le filter se place au dessus du a et donc empeche son survol...

Néanmoins je ne desespère pas de trouver une solution pour faire cohabiter les deux avec un a déclencheur en position absolute via javascript par exemple. Paye ta bidouille... Merci IE !

Si vous avez d'autres solutions ou une expérience de ce soucis je suis tout ouïe

[EDIT#2]

Bon bah j'ai finalement résolu mon problème tout seul . J'ai donc comme prévu payé ma bidouille puisqu'aucune des méthodes trouvées sur alsa ne marchait pour mon problème (positon:relative; z-index...)

Ma solution pour simuler mon display:block est donc en Javascript :

function ieFix() {
	var li=document.getElementById('sidebar').getElementsByTagName('ul')[0].getElementsByTagName('li');
	for (i=0; i<li.length; i++) {
		li[i].onmouseover=function() {this.className='hover'; this.getElementsByTagName('a')[0].className='hover';}
		li[i].onmouseout=function() {this.className='normal'; this.getElementsByTagName('a')[0].className='normal';}
		li[i].onclick=function() {document.location.href(this.getElementsByTagName('a')[0].href);}
	}
}

Et voilà et ça marche très bien (J'ai du ajouter un cursor:pointer; dans li.hover pour simuler le lien)[/i][/i][/i]
Modifié par noklio (27 Sep 2006 - 16:25)