div display:none

WRInaute occasionnel
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 :
Code:
.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 :
Code:
<!--[if lte IE 8]><script type="text/javascript" src="../scripts/roundies.js"></script><![endif]-->

Merci pour votre aide.
 
WRInaute occasionnel
Force Referencement a dit:
Le mieux c'est d'avoir
Code:
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 :?
 
WRInaute discret
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 ?
 
WRInaute occasionnel
Force Referencement a dit:
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 ?
 
WRInaute occasionnel
Enlever la condition "< ie8" dans ce cas

Code:
<!--[if IE]>

et pas

Code:
<!--[if lte IE 8]>
 
WRInaute occasionnel
Amauri a dit:
Enlever la condition "< ie8" dans ce cas

Code:
<!--[if IE]>

et pas

Code:
<!--[if lte IE 8]>
J'ai mis "if IE" mais c'est toujours pareil, la bordure s'affiche pas avec IE 8 et 9 :?
 
WRInaute occasionnel
Dans le CSS la taille de la bordure doit être spécifié en premier, je ne sais pas si ça peut venir de là

Code:
border:1px solid #C0C0C0;
 
WRInaute occasionnel
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 ?
 
WRInaute occasionnel
J'ai trouvé :) il fallait remettre cette ligne :
Code:
<!--[if IE]><script type="text/javascript" src="../scripts/roundies.js"></script><![endif]-->
dans ma div cachée, comme cela :
Code:
<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 :D
 
WRInaute occasionnel
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 :eek:
 
WRInaute occasionnel
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 ?
 
Nouveau WRInaute
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.

Code:
.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.
 
Discussions similaires
Haut