28172 sujets

CSS et mise en forme, CSS3

[Résolu] Opacité non appliqué par IE7

Bonjour,

J'utilise un framework javascript pour afficher un beau tableau (Ext js Ext Js).

Lorsqu'on charge des données (appelle Ajax) avec ce tableau un masque de chargement apparait puis disparait une fois que les données ont été chargées.

Le problème est qu'IE7 n'applique pas la transparence sur la couleur de fond du masque de chargement.

Le masque de chargement est une div ayant pour classe css ext-el-mask dont voici le code : 

.ext-el-mask
{
    z-index:20000;
    position:absolute;
    top:0;
    left:0;
    -moz-opacity:0.5;
    opacity:.50;
    filter:alpha(opacity=50);
    background-color:#CCC;
    width:100%;
    height:100%;
    zoom:1;
}


le code html de ma page :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>

<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

	<!-- script pour que le masque de chargement s'arrête -->
	<!--
    <script type="text/javascript" src="../ext-all-debug.js"></script>
	-->
    
	<!-- script pour masque de chargement reste affiché  -->
	
    <script type="text/javascript" src="../ext-all-debug2.js"></script>
	
	
<script type="text/javascript" src="paging.js"></script>

</head>
<body>
<h1>Grille avec pagination</h1>
<br/>

<table>
	<tr>
		<td>
			<div id="topic-grid"></div>
		</td>
	</tr>
</table>



</body>
</html>


Etant donné que c'est la librairie javascript qui ajoute beaucoup d'élément au dom il me parait difficile de vous expliquer avec du texte tous ce qu'elle fait. C'est pourquoi j'ai fais un exemple qui contient le strict minimum (html+js+css) fonctionnel sur votre poste dont voici le lien : ici Il vous suffit de récupérer le zip, et d'ouvrir avec IE la page examples/paging.html.

Dans la page html si vous importez ext-all-debug.js la grille le masque de chargement apparait puis disparait. Si vous utilisez ext-all-debug2.js le masque reste tout le tps affiché.
Dans le html vous avez juste a ajouter et supprimer des commentaires sur les import pour utiliser l'un ou l'autre.
La classe css .ext-el-mask se trouve ligne 17 du fichier resources/css/ext-all.css



Le bug disparait si j'ajoute un doctype ou que je supprime le tableau qui encapsule la table mais malheureusement je ne peux ni ajouter de doctype ni supprimer le tableau Smiley decu .

Merci d'avance pour votre aide Smiley cligne
Modifié par Cyberal (01 Oct 2008 - 14:18)
Tu ne peux pas ajouter de DOCTYPE ? Et pourquoi donc ?

De plus sur un forum comme alsacréations je me doute que tu va te faire tirer les oreilles sans doctype Smiley smile

Il y'a un article expliquant les différences avec le mode quirk il me semble dans le blog ou les tutos d'alsacréations.

Peut être qu'après lecture ca te donnera une idée.

Rude.

Edit : Qliquer ici Smiley langue
Modifié par ffwrude (23 Sep 2008 - 19:27)
Bonjour et merci de ta réponse.

Je ne peux malheureusement pas mettre de doctype car c'est une application java/j2ee qui est veille et qui utilise des taglib (kk chose qui génère du code html) que je ne peux pas modifier. Le fait de mettre le doctype comme tu t'en doutes génère un très grand nombre de problème que je ne suis pas sur de pouvoir résoudre car certain élément de style sont porté par le code html qui est généré. De plus le fait d'ajouter le doctype et de corriger tous les problèmes engendrés a un coût trop important.

Et enfin ça ne résout pas le problème sous ie6 alors que mise a part sur l'exemple que j'ai donné la transparence marche sous ie6.

Si jamais je n'ai pas été claire dans l'explication de mon problème ou que vous voulez des précisions n'hésitez pas Smiley cligne

A+ et merci
Smiley smile
Bonjour,

j'ai enfin résolu mon problème.

sous ie 7 lorsqu'il n'y a pas de doctype il faut que height et width soit sur auto

sous ie 6 dans tous les cas il faut que height et width soit sur auto.

lien vers le forum ext js

Merci de votre aide et a une prochaine fois Smiley cligne
Bonjour,

Tant qu'on y est, on peut virer le -moz-opacity qui date des temps immémoriaux où le principal navigateur de la fondation Mozilla était celui incorporé à la suite Mozilla. Firefox supporte opacity (en plus de -moz-opacity) depuis avant même la sortie de la version 1.0.
Je n'ai pas compris comment tu as résolu ton problème d'opacité pour ie7 ...

Voici mon code :

.bg1	{ 
background-color: #738fd9 ;
-moz-opacity:0.6;
opacity: 0.6;
filter:alpha(opacity=60); 
}

... qui ne fonctionne pas pour ie7 Smiley decu
Bonjour,

je ne passe pas régulièrement sur le forum.

Mon problème était qu'une div n'était pas transparente sous ie7 car elle était dans une cellule de tableau et que je ne pouvais pas mettre de doctype strict. J'ai résolu mon problème en faisant en sorte que ma div et une height et width en auto.

Essai de mettre un doctype strict et ajoute zoom:1; a ta classe c'est sans doute un problème de haslayout.

a+
Sujet clos
Aller à