[CSS 2] Coin arrondi IE8 dans un compteur [Résolu]

[luchet]

Bonjour

j'utilise un comteur sur une liste ordonnée "ol" et je voudrais que les coins de l'élément qui affiche le comteur soient arrondis
j'ai pour tester utiliser le fichier behavior: url(./images/PIE.htc);dans une balise div et cela fonctionne par contre dans la partie

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
li:before
{
content:counter(repas);
padding:0px 15px 6px 15px;
margin-right:8px;
vertical-align:top;
background:#678;
border-radius: 5px;
behavior: url(./images/PIE.htc);
font-weight:bold;
font-size:0.8em;
color:white;

cela ne fonctionne pas j'ai toujours des angles droits
Quelqu'un a -t-il réussi a mettre des arrondis dans un compteur ?
Si oui peut-il me donner une solution
Merci d'avance

[captain28]

Bonjour voici une petite aide

border-radius est une propriété CSS3, finalisée (Candidate Recommandation depuis février 2011) et déjà tout à fait utilisable en production dans les navigateurs modernes. Elle permet de manière très intuitive d'arrondir un ou plusieurs angles d'un élément en indiquant la valeur de l'arrondi souhaité

[NoSmoking]

Bonjour,
il existe également, à défaut de support CSS3
- Coins arrondis CSS
- Créer des coins arrondis à l'aide de Sprites CSS

[luchet]

Merci pour vos réponses mais elles ne sont pas utilisables sur un compteur de liste !!!!!

[NoSmoking]

à tout hasard, as tu essayé avec une background-image?

[eckerdecker]

Après un rapide check du css que tu as utilisé, qui selon ce que j'ai trouvé devrait fonctionner sur IE8, je dirai que ton problème vient surement de ton behavior.
Le chemin vers PIE.htc doit être relatif au document auquel est liée ta feuille de style et non pas à la feuille elle-même comme tu le ferais pour un background-image.
Vérifies déjà ça.
Sinon vérifie que PIE.htc peut être utilisé dans les :before, les fonctionnalités de cette librairie reste, mine de rien, assez limitées.

[luchet]

bonjour
comme précisé dans mon premier post je peut obtenir un Div avec coin arrondi avec les valeurs css suivantes :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 
body
{
width:8.5in;
background-color:#ccf;
letter-spacing:.1em;
font-family:times,serif;
 
}
div 
{
height:200px;
background-color:#EEEEEE;
 
}
div.arrondi { 
border-radius: 25px; 
behavior: url(./images/PIE.htc);
height:40px;
padding-left:20px;
      }
 
 
a
{
color:#000000;	
}
ol{
 
counter-reset:repas;	
}
li
{
list-style-type:none;
counter-increment:repas;
margin-bottom:10px;
}
 
li:before
{
content:counter(repas);
padding:0px 15px 6px 15px;
margin-right:8px;
vertical-align:top;
background:#678;
border-radius: 5px;
behavior: url(./images/PIE.htc);
font-weight:bold;
font-size:0.8em;
color:white;
}

j'ai bien un Div avec 4 coins arrondis
mais pas dans la balise li

[NoSmoking]

oui mais un li:before n'a pas de "consistance", c'est un ajout en début de li, donc le PIE.htc ne peut pas à mon sens s'appliquer dans ce cas.

à tout hasard, as tu essayé avec une background-image?

est ce que cela donne quelque chose ?

As tester sur "tous" les navigateurs pour voir la(es) différence(s) de rendu.

[luchet]

bonjour
je n'est pas tester le background-image car je ne sais pas comment faire !!!
peut-tu me donner quelques explications pour utiliser cette propriété dans mon compteur de liste
Merci

[guilhem91]

Salut

Si les solutions présentées plus haut ne marchent pas, je te conseille d'utiliser roundies. C'est un petit script en javascript qui génère des coins arrondis sous IE, et qui a l'avantage d'être très léger (une petite recherche google te dira comment l'utiliser). Je l'utilise sur mon site, et avec IE 7 et 8, aucun problèmes

Et pour IE 9 et les autres navigateurs, border-radius est maintenant suffisamment bien supportée pour être utilisée en production.

[NoSmoking]

en reprennant depuis le début je me rend compte
- que tu n'as pas mis de border dans ton li:before,
- que la définition du rayon ne prend pas tous les navigateurs CSS3 en compte, il te faut donc mettre au moins...

Code :

1
2
3
4
border : 1px solid blue; /* par exemple */
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;

[luchet]

bonjour
Pour guilhem91 j'ai le même problème avec Roundies les coins de mon compteur de liste reste carré
Pour répondre a NoSmoking voici le code Css modifié selon vos instructions

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
body
{
width:8.5in;
background-color:#ccf;
letter-spacing:.1em;
font-family:times,serif;
 
}
div 
{
height:200px;
background-color:#EEEEEE;
 
}
div.arrondi { 
height:50px;
padding-left:20px;
border-radius: 10px;
behavior: url(./images/PIE.htc);
      }
a
{
color:#000000;	
}
ol{
 
counter-reset:repas;	
}
li
{
list-style-type:none;
counter-increment:repas;
margin-bottom:10px;
}
 
li:before
{
content:counter(repas);
border: 1px solid blue; 
padding:0px 15px 6px 15px;
margin-right:8px;
vertical-align:top;
background:#678 url(./images/bg4.jpg);
font-weight:bold;
font-size:0.8em;
color:white;
border-radius: 10px;
behavior: url(./images/PIE.htc);
 
}

et voici une image du résultat

le Div est bien arrondi mais pas les éléments du compteur

[NoSmoking]

Envoyé par luchet

Pour répondre a NoSmoking voici le code Css modifié selon vos instructions

il manque encore

Code :

1
2
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

sur quel navigateur testes tu ?

[luchet]

comme le sujet le précise je teste sous IE8

les deux instructions précitées sont utiles pour les autres navigateurs

A+

[NoSmoking]

sur quel navigateur testes tu ?

sorry il manque les S.

les deux instructions précitées sont utiles pour les autres navigateurs

dans ce cas les navigateurs sont des CSS3 inside, à l'exception de IE8 donc.

La solution du background sur les OL reste, à mon sens la plus crossbrowser, en mettant une image de fond à bord arrondie.

[luchet]

Bonjour
j'ai suivi votre conseil et j'ai placé une image a bords arrondis en background après plusieurs tâtonnements sur la taille de l'image et les paddings voici en pièce jointe le résultat:

je pense que cela peut convenir Merci encore d'avoir pris le temps de me répondre