COMPATIBILITE FIREFOX ET IE BORDER RADIUS

Bonjour à tous et toutes,

J'imagine que le sujet est récurrent et nous sommes nombreux débutants à chercher des solutions.

Mon site sera bientôt en ligne, et il apparait que certaines lignes de mon css et précisément mon border radius SOIENT CORRECTEMENT INTERPRETEES PAR IE tandis que d'autres NE LE SONT PAS.

Cela fait 1 semaine que je cherche à comprendre pourquoi sans réponse.J'ai tout lu tout essayé et je désespère.

Espérant trouver soutient,au plaisir.

Bienvenue à toi

il faut respecter un ordre quand tu mets les propriétés...
d'abord les propriétés 'vendor' en premier, et la propriété générique en dernier..

exemple:

-moz-border-radius:10px;
-webkit-border-radius:10px;  
-khtml-border-radius:10px;  
border-radius:10px;

ceci dit si tu ne nous montres pas un exemple, difficile de t'aider.
Modifié par lionel_css3 (02 Sep 2012 - 18:17)

Bonjour,

Voici donc ce qui marche pas sous ie ( attention code couleur aussi):

.h1 strong {
background: #28343b; /* Old browsers */
background: -moz-linear-gradient(left, #28343b 39%, #828c95 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(39%,#28343b), color-stop(95%,#828c95)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #28343b 39%,#828c95 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #28343b 39%,#828c95 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #28343b 39%,#828c95 95%); /* IE10+ */
background: linear-gradient(to right, #28343b 39%,#828c95 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343b', endColorstr='#828c95',GradientType=1 ); /* IE6-9 */
border-radius: 6px;

}

J'ai bien essayé dans tous les sens les webkit et mozkit pourtant

Soyons fou,voici mon code css que j'ai personnalisé,certaines choses fonctionnent et d'autres non et je ne vois pas le probleme (arff c'est compliqué):

#zone-achat {
	background-color: #ededed;
	border: 1px solid #d2d2d2;;              
        border-radius: 6px;
}

#btn-newsletter span span {
	background: #665052;
	color: #ffffff;
        border-radius: 6px;

}

.titre-bloc-lat strong {
	display: block;
	padding: 6px 10px;
	text-transform: uppercase;
        border-radius: 6px;
}

.h1 strong {
         display: block;
	padding: 6px 10px;
	text-transform: uppercase;
        border-radius: 6px;
        
}

img {
	border-radius: 6px;
        
}

#c1-compte-pop {
	border-color: #000000;
	background: #f5f9f0;
        border-radius: 6px;
}

#compte-pop ul li a strong {
	color: #000000;
        border-radius: 6px;
}

#compte-pop ul li {
	color: #000000;
        border-radius: 6px;
}

#fil-ariane span {
	color: #ad1283;

}

#btn-newsletter span span {
	background:  #ad1283;
	color: .comboBoxList .current {
	background: #4f3f40 !important;
       
};

}

#btn-recherche span span {
	background: #ad1283;
	color: #00000;
        border-radius: 6px;
        
}

#retour:hover, #retour:focus {
	color: #ad1283;
}

.list-prod .prod {
	border-color: #00000;
	background: #f5f9f0;
        border-radius: 6px;
}

.list-prod .bas-prod {
	background: #f5f9f0;
        border-radius: 6px;
}

#titre-fiche {
	color: #ad1283;

}

.h1 {#0
	border-color:#00000;
	color: #f5f9f0;
        border-radius: 6px;
}

.h1 strong {
	background: #28343b; /* Old browsers */
background: -moz-linear-gradient(left, #28343b 39%, #828c95 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(39%,#28343b), color-stop(95%,#828c95)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #28343b 39%,#828c95 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #28343b 39%,#828c95 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #28343b 39%,#828c95 95%); /* IE10+ */
background: linear-gradient(to right, #28343b 39%,#828c95 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343b', endColorstr='#828c95',GradientType=1 ); /* IE6-9 */
    border-radius: 6px;

}
       
}

.h2 {
	color:#ff5db1;
      
        
}

.h3 {
	color: #ff5db1;
       
}

#liste-infos li a.current, #liste-infos li a:hover, #liste-infos li a:focus, #liste-infos li#li-cross-sell a.current, #liste-infos li#li-cross-sell a:hover, #liste-infos li#li-cross-sell a:focus {
	background-color: #0e0e0e; /* Old browsers */
background: -moz-linear-gradient(top, #0e0e0e 16%, #7d7e7d 94%, #7d7e7d 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#0e0e0e), color-stop(94%,#7d7e7d), color-stop(95%,#7d7e7d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* IE10+ */
background: linear-gradient(to bottom, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=0 ); /* IE6-9 */;
        border-radius: 6px;
}

#liste-infos li a {
	background: #0e0e0e; /* Old browsers */
background: -moz-linear-gradient(top, #0e0e0e 16%, #7d7e7d 94%, #7d7e7d 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#0e0e0e), color-stop(94%,#7d7e7d), color-stop(95%,#7d7e7d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* IE10+ */
background: linear-gradient(to bottom, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=0 ); /* IE6-9 */;
        border-radius: 6px;
}

#liste-infos {
	border-color: #ad1283;
}

a {
	color: #ad1283;
}

.list-prod .brand a {
	color: #ff5db1;
}

.bloc-variations .titre-variation, .titre-personnalisation {
	color: #ffffff;
	background: #ad1283;
	background-image: -webkit-gradient(
	    linear,
	    left top,
	    left bottom,
	    color-stop(0, #ad1283),
	    color-stop(1, #ad1283)
	);
	background-image: -moz-linear-gradient(
	    center top,
	    #ad1283 0%,
	    #ad1283 100%
	);
}

#menu li a {
	color: #ffffff;
}

#menu #li-accueil a span {
	background: url(../images/h-picto-accueil.png) no-repeat 10px 11px;
}

.msie6 #menu #li-accueil a span {
	background: url(../images/h-picto-accueil-ie6.png) no-repeat 10px 11px;
}

#menu li a:hover, #menu li a:focus, #menu li.current a, #menu li.ssm a.over {
	background:background: #cb60b3; /* Old browsers */
background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#ad1283), color-stop(100%,#de47ac)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* IE10+ */
background: linear-gradient(to bottom, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=0 ); /* IE6-9 */ ;
 border-radius: 6px;


}

.msie6 #menu #li-accueil a:hover span, .msie6 #menu #li-accueil a:focus span, .msie6 #menu #li-accueil.current a span, .msie6 #menu #li-accueil.ssm a.over span {
	background: url(../images/h-picto-accueil-ie6.png) no-repeat 10px -52px;
}

#menu #blog a {
	border-color: #8F352D;
	color: #ffffff;
}

#menu li ul li a {
	color: #000000;
}

#menu li.ssm ul li a:hover, #menu li.ssm ul li a:focus, #menu li.ssm ul li.current2 a {
	color: #cec8b6;
}

#ssmenu {
	background: #ffffff;
	border-color: #ad1283 ;
        border-radius: 6px;

}

#ssmenu ul li a {
	color: #000000;
	background: url(../images/h-fleche-ssm.png) no-repeat 3px 7px;
}

.msie6 #ssmenu ul li a {
	background: url(../images/h-fleche-ssm-ie6.png) no-repeat 3px 7px;
}

#ssmenu ul li a:hover, #ssmenu ul li a:focus, #ssmenu ul li.current2 a {
	background: #ad1283 url(../images/h-fleche-ssm.png) no-repeat 3px -65px;
	color: #ffffff;
        border-radius: 6px;
}

.msie6 #ssmenu ul li a:hover, .msie6 #ssmenu ul li a:focus, .msie6 #ssmenu ul li.current2 a {
	background: #8F352D url(../images/h-fleche-ssm-ie6.png) no-repeat 3px -65px;
}

.btnT1 span span, #w_dialog-message #w_pagepanier span span, .btn-ajpan-fiche span, .btnT4 span, .wizicss-zone-btn-commande .wizicss-button span span {
	background: #000000;
	background-image: -webkit-gradient(
	    linear,
	    left top,
	    left bottom,
	    color-stop(0, #000000),
	    color-stop(1, #000000)
	);
);
	border-color: #000000;
	color: #ffffff;
}

#compte-panier {
	background: #0e0e0e; /* Old browsers */
background: -moz-linear-gradient(top, #0e0e0e 16%, #7d7e7d 94%, #7d7e7d 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#0e0e0e), color-stop(94%,#7d7e7d), color-stop(95%,#7d7e7d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* IE10+ */
background: linear-gradient(to bottom, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=0 ); /* IE6-9 */;
        border-radius: 6px;
}

#mon-compte a {
	color: #f5f9f0;
      
}

#mon-panier a {
	color: #f5f9f0;
       
}

#form-recherche {
	background: #0e0e0e; /* Old browsers */
background: -moz-linear-gradient(top, #0e0e0e 16%, #7d7e7d 94%, #7d7e7d 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#0e0e0e), color-stop(94%,#7d7e7d), color-stop(95%,#7d7e7d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* IE10+ */
background: linear-gradient(to bottom, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=0 ); /* IE6-9 */;
        border-radius: 6px;

}


#form-recherche legend {
	color: #f5f9f0;
}


#nb_prod {
	background: #ad1283;
	color: #ffffff;
       -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
        border-radius: 6px;
            
}

.list-prod .prix a {
	color: #000000;
}

#prix-fiche span {
	color: #000000;
}

.titre-bloc-lat strong {
	background: #0e0e0e; /* Old browsers */
background: -moz-linear-gradient(top, #0e0e0e 16%, #7d7e7d 94%, #7d7e7d 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#0e0e0e), color-stop(94%,#7d7e7d), color-stop(95%,#7d7e7d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* IE10+ */
background: linear-gradient(to bottom, #0e0e0e 16%,#7d7e7d 94%,#7d7e7d 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=0 ); /* IE6-9 */;
        border-radius: 6px;

}

.titre-bloc-lat a {
	color: #ffffff;
        
        
}

.menu-lat li {
	border-color: #000000;
        border-radius: 6px;

}


.comboBox {
    background: #ffffff;
    border-color: #000000;
}

.menu-lat li a {
	color: #000000;
}

.menu-lat li a:hover, .menu-lat li a:focus, .menu-lat li.current a {
	color: #ffffff;
	background: #000000;

}

ul#menu {
	background:  #000000;
	background-image: -webkit-gradient(
	    linear,
	    left top,
	    left bottom,
	    color-stop(0,  #000000),
	    color-stop(1,  #000000)
	);
	background-image: -moz-linear-gradient(
	    center top,
	     #000000 0%,
	    #000000 100%
	);
}

#footer {
	background: #000000;
	border-color: #000000;
 
}

#logo #nom-boutique {
	color: #FFFFFF;
}

#logo #slogan-boutique {
	color: #FFFFFF;
}


#logo #nom-boutique {
	color: #FFFFFF;
}

#logo #slogan-boutique {
	color: #FFFFFF;
}

#content {
	background: #ffffff;
	-moz-box-shadow: 0 0 5px #665052;
	-webkit-box-shadow: 0 0 5px #665052;
	box-shadow: 0 0 5px #665052;
        border-radius: 6px;
        
}



body {
	background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top, #000000 0%, #000000 0%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(0%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000000 0%,#000000 0%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #000000 0%,#000000 0%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #000000 0%,#000000 0%); /* IE10+ */
background: linear-gradient(to bottom, #000000 0%,#000000 0%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

Modifié par 6l20 (02 Sep 2012 - 21:30)

Edite ton message en utilisant le highlighter CSS parce que là, c'est illisible ...

Avec plaisir,comment faire svp?

En séléctionnant ton code, et en cliquant sur le bouton de code correspondant en bas de la zone de texte

Note de modération :
* Tu y étais presque pour le code
** Plutôt que de longues lignes de "code indigeste", une page en ligne suffira amplement à te venir en aide de manière plus efficace.
Modifié par 6l20 (02 Sep 2012 - 21:33)

C'est bon, ça s'affiche bien sur l'edi de ton message précédent, pas la peine de reposter tout le code.

Par contre, y a beaucoup d'endroits où t'as juste la propriété générique, border-radius, et pas les vendor prefixes, moz-border-radius, ...
Modifié par Stephanelam (02 Sep 2012 - 21:34)

Désolé pour les désagréments vraiment

Pas de sushis !

Je viens d'éditer mon message précédent au sujet de ton problème de code.

Malgré les variations webkit et mozkit ca ne fonctionne pas pourtant pourrasi tu me prendre une ligne et me montrer où insérer ce compléments?

Ici, par exemple :

#zone-achat {
	background-color: #ededed;
	border: 1px solid #d2d2d2;;              
        border-radius: 6px;
}

Tu devrais rajouter les vendor prefixes

Comme fait ici:

#content {
	background: #ffffff;
	-moz-box-shadow: 0 0 5px #665052;
	-webkit-box-shadow: 0 0 5px #665052;
	box-shadow: 0 0 5px #665052;
        border-radius: 6px;
        
}

*Merci de penser au balisage du code...

Ce qui est fou c'est que cette ligne fonctionne sous ie mais pas lorsque je l'intègre à celle que vous citez et d'autres.

Où intégrieriez-vous ( francais ca??? *Pas tout à fait : intégreriez) les variables dans votre exemple?debut?fin?après le border?
Modifié par 6l20 (03 Sep 2012 - 12:24)

C'est pas normal ... tu n'aurais pas un exemple en ligne à me donner ?
Un site en cours de construction ?

Site en construction il me manque à regler ces problemes et c est tout?Comment pourrais vous montrer?

Je place peut etre mal les variables.

Bon, je vais plus pouvoir répondre ce soir, je dois partir, mais ce que je te demande, c'est si tu as un exemple en ligne de ton code, pour identifier le problème plus facilement.

Le code copié ci dessus sera celui qui sera en ligne et qui pose donc probleme car quand je visualise mon site,selon que l'on se trouve sous ie ou les autres,l'affichage diffère.

Néanmoins merci

Ah, je n'avais pas eu cette expérience avec filter. Mais je note.

Bonjour,
Je ne suis pas un expert en css ces modifications que vous voyez je les ai faites avec firebug et autre logiciel pour mes fondus et radius mais je née comprends pas concrètement ce que vous me demandez de faire.

Merci pour votre retour