28172 sujets

CSS et mise en forme, CSS3

Coins arrondis IE

Bonjour,

J'ai créée une colonne arrondie avec -moz-border-radius(et webkit aussi), cependant il ne prend pas en compte sur IE.

ma div c'est celle ci

<div id="menuv">

et sur le css
#menuv {
	-moz-border-radius:15px 15px 72px 15px;
	-webkit-border-radius:15px 15px 72px 15px;
	background:none repeat scroll 0 0 #BDDB7B;
	float:left;
	height:400px;
	left:194px;
	position:relative;
	top:72px;
	width:148px;
	
}[code]


J'ai bien mis l'appel pour le js 

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


et j'ai bien l'appel dans le js
DD_roundies.addRule('menuv', '15px 15px 72px 15px');

où je me suis trompé ? Pourquoi ça ne marche pas ?


Merci Smiley biggrin
Salut,

Parce que IE ne prend pas encore en compte cette propriété qui est une propriété css 3. Ca le sera avec IE9, normalement.

Mais au fait, question : pourquoi firefox et webkit n'utilisent pas la propriété border-radius (qui est w3c) et implémentent leurs propres syntaxes ?
Bonjour,
je te rassure pour -webkit-border et -moz-border tu ne t'es pas trompé mais ceux ci ne peuvent pas être pris en compte par IE. Pour l'appel des roundies (un paliatif, une béquille pour IE ?), c'est une bonne chose mais est-ce que le code qui suit (dans le body) fait appel à la fonction ? Sinon, un article sympa ici : une méthode Microsft plus compatible que les roundies voir dans cet article de Raphaël, le lien vers les comportements .htc.
Myother a écrit :
Mais au fait, question : pourquoi firefox et webkit n'utilisent pas la propriété border-radius (qui est w3c) et implémentent leurs propres syntaxes ?
Cette question, je me la suis mainte fois posée aussi. Je pense qu'ils essaient de donner forme à une chose abstraite, une recommandation ne donne pas la solution technique. Alors "ils tentent leur coup" chacun de leur coté pour coller au mieux avec l'idée de départ en espérant que leur solution sera la meilleure. S'ils n'utilisent pas la syntaxe W3C c'est sans doute parce qu'ils ne sont pas au bout de leurs efforts et tiennent à signer leurs progrès. Prenons Opera qui vient de sortir parait-il une compatibilité complète (border-radius) avec l'esprit W3C : C'est validé par qui ? aurait-il miieux valu qu'ils fassent un -O-border-radius ? Ont-ils coupé l'herbe sous le pied de certains au sortir du nouveau Microsoft ?

<edit : vu plus bas…
Ça arrive à tout le monde Smiley cligne
/>
Modifié par Aureance (27 Mar 2010 - 17:33)
Erf, je sais pas ce que c'est les roundies, je ferai mieux d'aller me renseigner avant de répondre la prochaine fois Smiley langue
En fati avec le js que j'ai mis, ça devrait marcher, car ça existe pour cela. je ne sais pas si j'ai mal défini la fonction, mais c'est sûr que que le js marche parce que j'ai testé avec un autre site
j'ai télécharger le fichier .htc et ça ne marche pas !



#menuv {

background:none repeat scroll 0 0 #BDDB7B;
float:left;
height:400px;
left:194px;
position:relative;
top:72px;
width:148px;
-moz-border-radius:15px 15px 72px 15px;
-webkit-border-radius:15px 15px 72px 15px;
-khtml-border-radius:15px 15px 72px 15px;
border-radius:15px 15px 72px 15px;
behavior:url(border-radius.htc);


}
Salut!
Pour ce qui est du fichier .htc, regarde dans les commentaires du tuto, il est dit qu'il ne fonctionne que lorsque tous les coins ont le même arrondi.

Quant au fichier roundies.js, j'ai eu le même problème, en enlevant le commentaire conditionnel il fonctionne.
j'utilise roundies.js puis j'ajoute une autre balise script en dessous, quelque chose du genre:

<script type="text/javascript" src="roundies.js"></script>
<script type="text/javascript">
DD_roundies.addRule('.arrondies', '0 0 10px 10px');
</script>
donc dans mon cas il suffit de mettre dans le header

<script type="text/javascript" src="roundies.js"></script> 
<script type="text/javascript"> 
DD_roundies.addRule('menuv', '15 15 72px 15px'); 
</script>


Je te rappelle mon css:

#menuv{
background:none repeat scroll 0 0 #BDDB7B;
float:left;
height:400px;
left:194px;
position:relative;
top:72px;
width:148px;
-moz-border-radius:15px 15px 72px 15px;
}



merci
un truc du genre oui.
Ne pas oublier le "#" avant ton "menuv" sinon ça ne fonctionnera pas c'est sûr.
Et bien vérifier que le chemin du script roundies est le bon.
j'ai mis bien, mais ça marche pas

Déjà le fichier est dans un dossier qui s'appeller JS. voici le code


<!--[if lte IE 8]> 
<script type="text/javascript" src="/js/roundies.js">
<script type="text/javascript"> 
DD_roundies.addRule('#menuv', '15 15 72px 15px');  
</script> 
<![endif]-->
Sujet clos
Aller à