28172 sujets

CSS et mise en forme, CSS3

Filter microsoft alphaloader et input type button ?????

Bonjour à tous et à toutes !

Je viens de me retrouver, assez perplexe face à un problème que j'ai sur une div.
J'ai une div avec un fond png et un texte et un input type button dedans.

Pour que le fond png soit transparent sous IE6 je passe par ce petit bout de code CSS :

.madiv {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src:'monurldimage');
background:none;
}

souci !!! :
le bouton n'est plus cliquable avec ce filtre.... quelqu'un a déjà rencontré ce type de problème ??? Smiley eek Smiley eek
Bonjour mymygo et bienvenue Smiley cligne ,

Essaye de mettre l'input en position relative, le problème vient en principe de ça dès que l'on utilise ce filtre pour IE6.
Le bouton n'est plus cliquable, de même que les liens, et le texte n'est plus sélectionnable. Jouer sur le position: relative permet généralement de s'en sortir, sauf dans les cas particuliers et cas particuliers de cas particuliers. Smiley cligne

Voir notamment l'article dont je viens de rajouter l'URL dans l'item de la FAQ qui va bien.
J'ai esayé en appliquant un :
.maclass input (et meme essayé avce un .maclass *
{position:relative;}

Ca ne marche pas mieux Smiley ohwell

La div maClass est une div en position:absolute;
Par contre à l'intérieur rien d'extraordinaire, c'est un bête tableau avec un texte et un bouton de validation.

Je ne peux pas mettre maClass en relatif car elle se superpose (c'est un système d'infobulle) sur les autres éléments graphiques du site.

une idée ?
Pas de chance la position absolute est je crois un des cas particuliers cités par Florent.

Je ne connais pas ton code mais de tête comme ça le positionnement relatif permet de jouer également sur le z-index non?

EDIT:

Je viens de lire le lien en anglais, si j'ai bien compris, la feinte consiste à rajouter également un z-index en plus du position:relative dans le cas d'un conteneur en position absolute? (pas encore testé)
Modifié par knarf (03 Oct 2008 - 20:47)
knarf a écrit :
Je viens de lire le lien en anglais, si j'ai bien compris, la feinte consiste à rajouter également un z-index en plus du position:relative dans le cas d'un conteneur en position absolute? (pas encore testé)

Il me semble qu'il faut utiliser un élément «tampon» non positionné entre le conteneur positionné en absolu avec filtre AlphaImageLoader, et l'élément que l'on veut positionner en relatif pour le rendre à nouveau actif.
J'avais déjà tester avec un z-index :
la div maClass ayant un z plus faible et le input et le texte un z plus grand.

vous voulez dire qu'il suffirait de rajouter une div encapsuleur dans la div maClass qui contient tous les éléments et qui a comme propriété position:absolute



ca donnerait :
<div class="maClass">
<div style="position:relative">
blabla bouton
</div>
</div>

?
Non, ça donnerait plutôt:
<div class="maClass"><!-- Positionné en absolu, avec filtre AlphaImageLoader -->
	<div style="position: static"><!-- Valeur par défaut de la propriété position -->
		<div style="position: relative">
			Ici tous les contenus qu'on veut
		</div>
	</div>
</div><!-- .maClass -->

Mais c'est un peu lourd, et je n'offre aucune garantie sur le fait que ça marche.

(Pour ma part, j'ai tendance à éviter l'utilisation d'AlphaImageLoader autant que possible, quitte à offrir un rendu graphique dégradé dans IE6 en basculant sur des images opaques, du PNG-8, etc.)
Ce qui peut aider la résolution de ce problème est à la place de 
background:none
de mettre un 
background:url('dummy.gif')


dummy.gif étant une image gif transparente (10px x 10px suffit largement) qui se répete

J'offre pas de garantie là dessus non plus, mais cela ma souvent sauvé, ça permet de donner une "consistance" à l'élément, sinon IE6 semble considérer que tout ce qui est transparent (même semi-transparent) n'existe pas et n'est donc ni sélectionnable, ni cliquable.
Modifié par Tymlis (04 Oct 2008 - 13:42)
En fait le filtre doit être sur l'élément tampon (sur le lien anglais il joue avec les class pour changer l'élément qui a le filtre) donc rajouter un div qui contient le filtre.


Donc :

<div class="maClass"> /* positionné en absolute */
<div class="maClassFiltre"> /* avec le filtre en static */
l'élément voulu  /* en position relative */
</div>
</div>


Attention par contre au "haslayout" .

D'ailleurs je trouve l'exemple assez complexe pour quelque chose de simple.

Si l'on as un élément positionné en absolute il ne faut pas y placer le filtre mais uniquement l'utiliser pour positionner un ensemble qui recevra le filtre et utiliser le position relative sur l'élément qui fait défaut.


Rajouter un exemple concret en français (plutôt que le lien anglais qui rends le truc imbuvable) serait peut-être bien (Florent si tu est overboocké je peux m'en occuper Smiley cligne )
Modifié par knarf (04 Oct 2008 - 16:03)
Modérateur
Florent V. a écrit :
Non, ça donnerait plutôt:
<div class="maClass"><!-- Positionné en absolu, avec filtre AlphaImageLoader -->
	<div style="position: static"><!-- Valeur par défaut de la propriété position -->
		<div style="position: relative">
			Ici tous les contenus qu'on veut
		</div>
	</div>
</div><!-- .maClass -->

Mais c'est un peu lourd, et je n'offre aucune garantie sur le fait que ça marche.

(Pour ma part, j'ai tendance à éviter l'utilisation d'AlphaImageLoader autant que possible, quitte à offrir un rendu graphique dégradé dans IE6 en basculant sur des images opaques, du PNG-8, etc.)



Cette regle est presque bonne et fonctionne avec quelques details a mettre en avant

1) le parent en absolu et sans fond et sans filtre
La source même du bug insoluble vient de l'association du filtre et du positionnement en absolute.

2) l'element , dit 'tampon' (qui sert a dissocier le positionement absolue et le filtre ).
Pour s'assurer de la suite , il faut explicitement mettre dans le css , au moins pour IE6 : position:static; , même si cette valeur est celle par defaut j'ai eu l'occasion a plusieurs reprise de constaté , dans ce cas de figure , que IE6 avait besoin d'une piqure de rappel (sans raison apparente ).

Ensuite il faut imperativement doté l'element 'tampon' de layout .
Un zoom:1; se suffit si l'on ne souhaite pas dimensionné cette element .

C'est aussi sur cette element que l'on appliquera le filtre proprietaire de IE

3) Appliqué un position:relative; au element enfant de l'element 'tampon' que l'on veut rendre accessible a la souris , comme les liens , les elements de formulaire .

Petites réserves :
Il est plus sur de ciblé precisement les elements que l'on veut repositionné au dessus du filtre . comme : ul li a , form input , form textarea , div p , ... passer juste le parent en relatif peut ne rendre que son premier enfant cliquable (ou visible) si c'est la cas , ne reste a ciblé que les enfants .

IE6 est plutot instable , la surcharge sur les styles , mêm les valeurs dites par défaut , permet souvent de le 'recadrer' .

GC
j'ai tout essayé :
le fond transparent, le position static et relative... rien n'y fait, ie6 ne veut toujours pas rendre le bouton cliquable...
Snif, doit on alors revenir à un vieux gif ?

ci-dessous le code exact : 



<!--[if lt IE 7]>
<style>
.errorPanier {
z-index:10;
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src:'images/bulle_notif.png');
background-image:url('images/spacer.gif');
}

.errorPanier table {
z-index:20;
position:relative;
border:1px solid black;
}

.errorPanier input {
position:relative;
border:1px solid black;
z-index:30;
}

</style>
<![endif]-->



et la div : 




<div style="position:static">
  <div style="position:relative">
	<TABLE cellSpacing="0" cellPadding="0" border="0">
   	  <TR>
	     <TD height="20">&nbsp;</TD>
	  </TR>
	  <TR>
	     <TD vAlign="middle" height="50"><IMG src="images/warning.gif">
<STRONG>
	     <span id="Lbl_erreur_panier" class="error">Vous devez renseigner les infos skieur (prénom, mensurations) pour tous les articles choisis. </span></STRONG>
</TD>
</TR>
<TR>
<TD height="15"></TD>
</TR>
<TR>
<TD align="center">
<input type="submit" name="Btn_erreur_panier" value="OK" id="Btn_erreur_panier" style="color:#732525;" />
</TD>
</TR>
</TABLE>
 </div>
</DIV>



NB : le code ci-dessus est dans la div class="errorPanier" Smiley smile
Modifié par mymygo (06 Oct 2008 - 10:17)
a écrit :
Si l'on as un élément positionné en absolute il ne faut pas y placer le filtre mais uniquement l'utiliser pour positionner un ensemble qui recevra le filtre et utiliser le position relative sur l'élément qui fait défaut.


Vu ton code je suppose que "errorPanier" qui reçoit le filtre est l'élément positionné en absolu hors justement c'est ce qu'il ne faut pas faire ?

Donc en simplifiant :

Html :

<div class="errorPanier"> <!-- ne doit pas recevoir le filtre -->
<div id="mon_id"> <!-- recoit le filtre -->
<input />
</div>
</div>


Css spécifique IE:

#mon_id
{
background : none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bulle_notif.png", sizingMethod="crop");
}

#mon_id input
{
position:relative;
}


Ne pas oublier de doté l'élément "mon_id" du "layout" (soit avec une largeur soit avec zoom:1).

De plus, les feuilles de styles via les commentaires conditionnels ne sont là que pour amener des correctifs spécifiques à IE par rapport à la feuille de style initiale et non pour créer une deuxième feuille de style complète donc je ne suis pa sur que les z-index, bordure et bakground-image aient leur place dans celle-ci.
Modifié par knarf (07 Oct 2008 - 02:44)
oui en effet, j'avais laissé les border et z-index pour faire des tests Smiley smile

Et j'avais pas compris que le filter devait etre appliqué dans une div interne !!
Une larme a coulé sur ma joue quand enfin, le bouton redevenait cliquable !!! Smiley biggrin Smiley biggrin Smiley biggrin

Merci Knarf et merci à tous pour cette solution !!
Sujet clos
Aller à