div display:none

[toto2525]

Salut,

J'ai un souci avec Internet Explorer 8 et 9, lorque je clique sur un bouton radio une div apparait juste en dessous et dans cette div il y a un block avec une bordure aux coins arrondis, avec Internet Explorer 6 et 7 + Firefox pas de soucis ma bordure aux coins arrondis est visible mais avec Internet Explorer 8 et 9 la bordure de ma div n'apparait pas (je vois le contenu de ma div mais pas la bordure), je pige pas pourquoi ?

J'utilise ce code css pour mettre en forme ma bordure arrondie :

.arrondi{-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;background: #FFFFFF;border: solid #C0C0C0 1px;font-size:65%;padding: 5px;margin: 3px;behavior: url("../scripts/PIE.htc");}

Et j'insère ce code dans mon code html :

<!--[if lte IE 8]><script type="text/javascript" src="../scripts/roundies.js"></script><![endif]-->

Merci pour votre aide.

 

[Force Referencement]

Tu dois avoir une erreur 404 avec ton fichier js.

Le mieux c'est d'avoir

src="http://www.monsite.com/scripts/roundies.js"

 

[toto2525]

Le mieux c'est d'avoir

src="http://www.monsite.com/scripts/roundies.js"

Merci pour ta réponse, j'ai essayé en ajoutant mon url devant le /scripts/roundies.js mais ça ne change rien, la bordure ne s'affiche toujours pas avec IE 8 et 9 :?

 

[Force Referencement]

Est-ce que tu as réussi à le faire fonctionner en local du genre : sur ton bureau index.html avec ton js à côté

Est-ce que tu appelles bien la classe arrondi ?

 

[toto2525]

Est-ce que tu appelles bien la classe arrondi ?

Je ne pense pas que ce soit un problème d'insertion de ma classe arrondi ou de mon fichier js car ça marche parfaitement avec Internet Explorer 6 et 7 et avec Firefox mais ça bug avec Internet Explorer 8 et 9, c'est donc plus un souci avec ces 2 IE (8 et9), mais comment corriger ce bug avec IE 8 et 9 ?

 

[Amauri]

Enlever la condition "< ie8" dans ce cas

<!--[if IE]>

et pas

<!--[if lte IE 8]>

 

[toto2525]

Enlever la condition "< ie8" dans ce cas

<!--[if IE]>

et pas

<!--[if lte IE 8]>

J'ai mis "if IE" mais c'est toujours pareil, la bordure s'affiche pas avec IE 8 et 9 :?

 

[Amauri]

Dans le CSS la taille de la bordure doit être spécifié en premier, je ne sais pas si ça peut venir de là

border:1px solid #C0C0C0;

 

[toto2525]

A priori IE 8 et 9 bug un peu avec roundies http://www.dillerdesign.com/experiment/DD_roundies/#supported_browsers je pense que le problème vient de là, mais ce que je ne comprends pas c'est que j'ai une div qui est toujours visible avec une bordure arrondie qui utilise le js roundies et elle s'affiche correctement avec IE 8 c'est uniquement la bordure arrondie qui est dans ma div cachée qui ne s'achiffe pas dans IE 8 et 9 quand je l'affiche en cliquant sur mon bouton radio

Connaissez-vous une méthode avec du css (sans image) pour faire des bordure arrondies et qui soit supporté par la majorité des browers ?

 

[Force Referencement]

Pourquoi sans image ?

 

[toto2525]

J'ai trouvé il fallait remettre cette ligne :

<!--[if IE]><script type="text/javascript" src="../scripts/roundies.js"></script><![endif]-->

dans ma div cachée, comme cela :

<div id="ma_div" style="display: none">
<!--[if IE]><script type="text/javascript" src="../scripts/roundies.js"></script><![endif]-->
</div>

et là ma bordure arrondie s'affiche correctement dans ma div cachée

 

[toto2525]

J'ai crié victoire trop vite lorsque je clique sur mon bouton radio tout de suite après le chargement de ma page la bordure arrondie dans ma div cachée s'affiche une fois sur deux, mais lorsque j'attends plus longtemps après le chargement de ma page la bordure ne s'affiche jamais, quelqu'un y comprend quelque chose

 

[toto2525]

J'ai testé avec Firefox, Chrome, Safari, IE 6 et 7 => ça marche parfaitement avec tous ces navigateurs mais ça bug avec IE 8 et 9.... punaise.... ça fou les boules quand on sait que +/- 50% de mes visiteurs utilisent IE je ne peux pas faire l'impasse sur ces 2 browsers... avez-vous une idée pour corriger ce bug d'affichage avec IE 8 et 9 ?

 

[floutchito]

Bonjour,

La solution est de donner un z-index (et donc une position, c'est une condition de fonctionnement du z-index) à l'élément. C'est un bug de PIE.htc avec IE8.

.arrondi{
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
     background: #FFFFFF;
     border: solid #C0C0C0 1px;
     font-size:65%;
     padding: 5px;
     margin: 3px;
     position: relative;
     z-index: 10;
     behavior: url("../scripts/PIE.htc");
}

Donnez une valeur de z-index supérieure à l'élément situé en dessous de celui qui est stylé.
La valeur de position peut aussi être adaptée en fonction du style souhaité. En sachant que seules les valeurs "relative", "absolute", et "fixed" donnent la possiblité d'utiliser z-index.

Cordialement.