18041 sujets

Questions générales et questions de débutants

Problème coins arrondis sous Internet Explorer 8

Bonjour,

J'ai suivi ce tuto http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html pour produire des cadres arrondis grâce à la fonction border-radius.
Cela fonctionne très bien sous Firefox et Safari, mais sous Internet Explorer, voilà ce que j'obtiens:

[Modération : Image trop grande] http://a.imageshack.us/img704/750/snapshot3738.png


[Modération : Image trop grande] http://a.imageshack.us/img836/4414/snapshot3739.png


Voici le code source de la page: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lte IE 8]> 
<script type="text/javascript" src="roundies.js"> 
</script><![endif]--> 
<html>

<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>

<body>
<div class="conteneur">

<img id="banniere" src="banniere.jpg">



<div id="menuindex">
<ul>
 <li><a href="index.html">Accueil</a></li>
 <li><a href="prestations.html">Prestations</a></li>
 <li><a href="contact.html">Contact</a></li>
 <li><a href="#">A voir</a></li>
</ul>
</div>

<div class="texte">
<p>Tarif unique 50 euro.</p>
<!--<p>Quel que soit le temps passé, quelle que soit la panne.</p>
<p>Payez toujours le même prix.</p>-->
</div>

</div>

<!--<p id="footer"><img src="footer.gif">-->

<!--<p id="footer"></br>Micronantes dépannage informatique</br>
micronantes@gmail.com</br>
070786110694
</p>-->
<div id="conteneurbas">
<div class="cg">
<p>0700000000</p>
<p>micronantes@gmail.com</p>
</div>
<div class="cd">
<p>Désinfection</p>
<p>Réinstallation système</p>
<p>Assemblage</p>
</div>
</div>

</body>
</html>







et voici la feuille de style:





body {
text-align: center;
margin: 0;
padding: 10px 0;
background: url(background.gif) fixed;
}

.conteneur 
{margin: 0 auto;
 width: 900px;
 height: 500px;
 background: black;
 border: 12px solid white;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 padding-bottom: 80px;
 color: #3399FF;
}

.conteneurpresta
{margin: 0 auto;
 width: 900px;
 height: 1500px;
 background: black;
 border: 12px solid white;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 padding-bottom: 80px;
 color: #3399FF;
 }
#banniere {
margin-bottom: 5px;}

#menuindex  
ul {
  padding-left: 199px;
 list-style-type:none; 
 }
li {
 float:left; /*pour IE*/
 border:3px solid white;
 }
ul li a {
 display:block;
 float:left;   
 width:120px;
 line-height:40px; 
 background:black url(1.png) repeat-x;
 color:#242424;
 text-decoration:none;
 text-align:center;
 font-family: Verdana;
 font-weight: bold;
 }
ul li a:hover {
 background:black url(8.png) repeat-x;
 color:white;
 }
 

.texte  {
border: 3px solid #808080;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
float: none;
text-align: center;
font-family: Georgia;
font-weight: bold;
padding: 0px 20px 0px 20px;
margin-top: 120px;
margin-left: 50px;
margin-right: 50px;
color: white;
}

.textepresta  {
border: 10px solid #808080;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
float: none;
text-align: left;
font-family: Georgia;
font-weight: bold;
padding: 0px 20px 0px 20px;
margin-top: 120px;
margin-left: 50px;
margin-right: 50px;
background: url(bigslug.gif);
color: white;
}

strong {
font-size: 1.1em;
font-weight: bolder;
color: #CC6600;
/*text-decoration: underline;*/
}

p#footer{
margin: 30px auto; 
width: 800px;
height: 30px;
background: black;
border: 5px solid white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
color: white;
font-family: Verdana;
padding: 0 auto;
}

#conteneurbas 
margin: 0 auto;
width: 900px;
height: 500px;
}

.cg {
float: left;
/*margin: 30px auto 25% 25%;*/
margin: 50px 0 0 20px;
width: 400px;
height: 120px;
background: black;
border: 6px solid white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
color: white;
font-size: x-large;
font-weight: bolder;
}
.cd { 
float: right;
/*margin: 30px 25% 25% auto;*/
margin: 50px 20px 0 0;
width: 400px;
height: 120px;
background: grey;
border: 6px solid white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
color: white;
font-weight: bolder;
}


Merci pour vos réponses!
Modifié par Laurie-Anne (06 Sep 2010 - 13:58)
Bonjour,

Le script (avec commentaires conditionnel) doit être placé dans head ou body (et surtout pas en dehors de l'élément html).
Bonjour Smiley smile

Je pense que tu as mal compris la réponse de Laurie-Anne ou mal lu le tuto de Raphaël. Oui les bords arrondis apparaissent chez toi, mais un peu façon grand n'importe quoi, donc c'est qu'il y a effectivement un souci quelque part.
Dans le code que tu nous as donné, tu mets ton javascript à l'extérieur de ton head (et de ta page d'ailleurs vu qu'il est pas dans le html). Comme ton script n'est pas dans le html ni dans le head, IE en fait un petit peu ce qu'il veut, d'où ton décalage.
Dans le tuto :
a écrit :
Puis, à l'aide d'un commentaire conditionnel judicieusement placé dans l'entête de votre page, liez roundies.js à votre document HTML.


Le mot entête signifie "head". Si tu jettes un coup d'oeil à la page test du tuto et que tu regardes le code source, tu constateras que le script est placé juste avant la balise de fermeture du </head> (enfin y a title avant ^^)

Du coup essaie de faire pareil, de placer ton commentaire juste avant la fermeture de </head> et dis nous si le problème persiste ou pas.
Modifié par InpIxelItrust (06 Sep 2010 - 14:43)
J'ai fait la modif, ça ne change rien snif!D'ailleurs, je n'avais pas essayé, mais lorsque l'on affiche la page test du tuto dans IE8, eh ben... ça marche pas non plus! Smiley eek
Oui effectivement je viens de tester sous IE8 et la page test a le même problème que chez toi, mais pas sous IE7 (mon premier test) étrange. Rien sur leur site dans les known issues non plus.
On dirait que c'est le fait de mettre une bordure qui vient tout casser Smiley decu

Au pire tu peux peut-être essayer un autre fixe pour IE qui s'appelle CSS3PIE et fonctionne avec les fichiers .htc. Par contre j'avoue que je ne l'ai jamais testé en mettant des bordures, donc à voir (je sais qu'il a un souci de transparence tu ne peux pas utiliser l'opacité avec ce fixe)

EDIT : bon, après test en local sous IE8 mais version IEtester voilà ce que j'ai avec CSS3PIE :
upload/29058-rounded2.png

Donc on dirait que ça marche. Ça te fais une solution alternative si roundies bug effectivement avec des borders sous IE8
Modifié par InpIxelItrust (06 Sep 2010 - 15:10)
Je viens aussi de tester, et je te remercie grandement pour ce coup de main qui a résolu mon problème!Bien pratique ce ptit biniou Smiley cligne
You're welcome .

Effectivement pratique surtout que tu n'as pas besoin de spécifier dans le javascript sur quels éléments l'appliquer.

Par contre j'avoue ne pas trop savoir les "risques" ou "inconvénients" de l'utilisation des fichiers .htc et l'avantage ou désavantage que cela comporte comparé au javascript (je serais curieuse si quelqu'un avait une réponse).
Salut

Moi j'ai lu un article sur .htc : sur Alsa. Je ne te donne pas l'adresse.
Mais dont les commentaires use de force : contre les .htc. Dû moins techniquement.

Moi même j'ai expérimenter mais je n'ai pas adopter.

++
Euh ... ok. Je ne vois pas l'intérêt de ne pas donner l'adresse, surtout qu'elle serait utile pour ceux qui vont débarquer comme une cheveux sur la soupe via google et vont pas trop comprendre de quoi il s'agit, enfin passons.

Si tu parles des commentaires sur cet article oui effectivement il semblerait que les htc ralentissent un peu IE (surtout le 6). Mais j'ai surtout l'impression que les autres commentaires usent de force contre le htc dont il est question dans l'article, car il n'est pas possible de faire des coins arrondis avec différentes valeurs.

Sinon, je ne vois pas de quel article il s'agit et une recherche avec le zouli petit bouton recherche n'a rien donné de probant.
Modifié par InpIxelItrust (06 Sep 2010 - 16:32)
Sujet clos
Aller à