Bonjour !
J'utilise le petit PIE.htc pour m'amuser un peu même sous ie, le problème, c'est que PIE utilise le zoom:1 qui d'après ce que j'ai compris, a quelque-chose à voir avec un certain haslayout !!! Sacré nom d'oiseau celui là !!!
Mon réel problème, c'est que mes cadres arrondis se décale sous ie7 lorsque j'inscris un margin-top à ce cadre. Encore plus étrange, seulement les 2 premiers cadres (ceux affichés à l'écran, les autres sont affichable en scrollant) sont décalés, par contre, aucune marge n'est appliquée aux autres.
Ma page ici
Voici la partie de mon CSS qui d'adresse à cette page
cette partie de CSS uniquement pour IE qui supprime les ombres de boites :
Enfin, j'ai aussi une feuille conditionnelle IE7.css pour les versions antérieures à IE8 sur laquelle je fais mes tests pour ce problème.
J'ai déjà essayé de mettre la div en position:relative, son contenant "contenu" en relative aussi, tenté de jouer avec des zoom:1 mais là, il me manque des connaissances...
Pour vous aider à vous y retrouver, seules les divs de classe simplecenter devraient avoir une marge haute de 50px.
Merci d'avance si quelqu'un me trouve une solution !!!
Pour le moment, ma seule solution est d'ajouter
à ma feuille IE7.css !!! Mais bon, je suis certain que l'on peut faire mieux !!!
Modifié par jojoledemago (09 Aug 2011 - 15:51)
J'utilise le petit PIE.htc pour m'amuser un peu même sous ie, le problème, c'est que PIE utilise le zoom:1 qui d'après ce que j'ai compris, a quelque-chose à voir avec un certain haslayout !!! Sacré nom d'oiseau celui là !!!
Mon réel problème, c'est que mes cadres arrondis se décale sous ie7 lorsque j'inscris un margin-top à ce cadre. Encore plus étrange, seulement les 2 premiers cadres (ceux affichés à l'écran, les autres sont affichable en scrollant) sont décalés, par contre, aucune marge n'est appliquée aux autres.
Ma page ici
Voici la partie de mon CSS qui d'adresse à cette page
/*boites (cadres)*/
.simplecenter {margin-top:50px}
.simpledr, .simplega , .simplecenter{
margin-bottom:20px;
/*Bords Arrondis*/
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
/*ombre box*/
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5),
0 -1px 0 rgba(255,255,255,0.4);
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5),
0 -1px 0 rgba(255,255,255,0.4);
box-shadow: 3px 3px 3px rgba(0,0,0,0.2),
-2px -2px 0 rgba(255,255,255,0.6);
behavior: url(../Arrondis/PIE.htc);
/* -pie-lazy-init:true;*//*C'était censé éviter d'utiliser trop de ressources en n'activant pie que pour ce qui est affiché, c'est à dire que les bords des divs cachées (scroll) ne seraient pas dessinés, seulement lorsque l'écran les fait apparaitre. Bref, ça ne fonctionne pas sous ie8 !!!*/
}
.simpledr hr, .simplega hr, .simplecenter hr {clear:both;visibility:hidden; height:0;line-height:0;}
/*titres*/
.simplecenter h2 {text-align:center;}
h2 + p{padding-top:15px}
.sstitre { background-color:#666666;}
dt {text-align:center; font-size:1.3em; font-weight:bold}
/*autres textes*/
.simpledr p:first-letter, .simplega p:first-letter, .simplecenter p:first-letter {padding-left:30px}
.simpledr p, .simplega p, .simplecenter p, .simpledr ul, .simplega ul, .simplecenter ul {margin:10px 10px 0 10px; text-align:justify;font-size:1em}
#cheval li {margin-left:20px;list-style-type:disc}
/*images seules*/
.simpledr dd > img {float:right; max-width:50%;margin: 0 0 -2px 10px; max-height:350px;
-webkit-border-radius:0 15px 15px 0;
-moz-border-radius:0 15px 15px 0;
border-radius:0 15px 15px 0;
behavior: url(../Arrondis/PIE.htc)
}
.simplega dd > img {float:left; max-width:50%;margin: 0 10px -2px 0; max-height:350px;
-webkit-border-radius:15px 0 0 15px;
-moz-border-radius:15px 0 0 15px;
border-radius:15px 0 0 15px;
behavior: url(../Arrondis/PIE.htc)
}
cette partie de CSS uniquement pour IE qui supprime les ombres de boites :
.simpledr, .simplega, .simplecenter {box-shadow:none; border-top:1px outset #E1E0DF; border-right:2px outset #706C69; border-bottom:2px outset #706C69; border-left:1px outset #E1E0DF}/*voir remarque plus haut : #gauche li.relief1 , j'utilise ici une troisième méthode pour éviter de voir l'ombre de la div sous ie en annulant le box-shadow et en créant des bordures, tout simplement !!!...*/
Enfin, j'ai aussi une feuille conditionnelle IE7.css pour les versions antérieures à IE8 sur laquelle je fais mes tests pour ce problème.
J'ai déjà essayé de mettre la div en position:relative, son contenant "contenu" en relative aussi, tenté de jouer avec des zoom:1 mais là, il me manque des connaissances...
Pour vous aider à vous y retrouver, seules les divs de classe simplecenter devraient avoir une marge haute de 50px.
Merci d'avance si quelqu'un me trouve une solution !!!
Pour le moment, ma seule solution est d'ajouter
.simplecenter {margin-top:0}à ma feuille IE7.css !!! Mais bon, je suis certain que l'on peut faire mieux !!!
Modifié par jojoledemago (09 Aug 2011 - 15:51)
En écrivant tout ça, je me dis que je vais vérifier où est-ce que le problème se voit le plus et là !!!... tout à disparu... JE N'AI PLUS DE PROBLEME !!! Les marges sont respectées sous IE7 comme ailleurs, les sous-titres des boîtes ne touchent plus les bordures hautes des boîtes. C'est génial !!!