Problème positionnement

Hello,

je suis en train de mettre au propre tous les css que j'utilise depuis plusieurs années et je me retrouve avec un problème d'alignement que je n'arrive pas à résoudre. En image :

Comme vous le voyez la puce de la checkbox est parfaitement aligné, ce qui n'est pas le cas des boutons radio.

Voici le css concerné :

 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

input[type="checkbox"],
input[type="radio"]
    display none

input[type="checkbox"] + label:before
    background-color #fff
    border 1px solid form-input-textarea-border-color
    content ""
    display inline-block
    width 1.35em
    height 1.25em
    vertical-align middle
    margin -2px 6px 0 0
    font-size .75em
    line-height 1.25em
    text-align center

input[type="radio"] + label:before
    background-color #fff
    border 1px solid form-input-textarea-border-color
    border-radius 1.25em
    content ""
    display inline-block
    width .6em
    height .6em
    margin -2px 6px 0 0
    font-size 1.65em
    line-height .6em
    text-align center

input[type="checkbox"]:checked + label:before
    content "\2713"

input[type="radio"]:checked + label:before
    content "\2022"

Une idée ?

Un vertical-align middle ne fonctionne pas non plus ?

Nop, ça change strictement rien

c'est normal qu'il n'y ait pas d'accolade dans ton truc? tu utilises un preprocesseur?

Sinon, sur le net on trouve cette solution :

1
2
3
4
5

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

Euh j'utilise Stylus et donc il n'y a ni accolade, ni double point, ni point virgule etc …

À quoi correspond vertical-align: baseline; ?

EDIT; je viens de regarder ton lien, en fait tu n'as pas compris le problème, mon alignement c'est pas avec le texte mais le petit bouton noir qui indique que le bouton est selectionné

Y'a moyen d'avoir un exemple en ligne où on peut tester ?

http://ceriselabs.com/form.html

HS: Sur ton site (en haut à droite du header) j'ai la même chose en fond d'écran mais en Ruby

Salut,
Le décalage vient de la "div.fields-group" qui a un "margin-bottom: 1.45em;" définit à la ligne 623 du fichier "cow.css".

Astuce : utilise les outils de développement de ton navigateur. Sur Firefox tu peux faire clique droit sur un élément puis "Inspect Element". (il doit y avoir la même chose sur les autres navigateurs)

On ce comprend pas, le décalage dont je parle c'est pas avec le texte mais avec l'intérieur du bouton radio comme indiqué par la fléche rouge ici :

Ah ok, ça on n'y peut pas grand chose, c'est le navigateur qui est foireux. Chrome c'est pas un bon navigateur tu sais.

Je comprend pas en quoi le navigateur est en faute. Il ne s'agit pas d'un bouton radio classique mais fait en css, mon problème c'est de l'alignement pur, le petit rond (tout noir) au millieu du plus gros rond aux bordures grise.

1
2
3
4
5

  width: 0.7em;
  height: 0.7em;
  margin: -2px 6px 0 0;
  font-size: 1.65em;
  line-height: 0.6em;

Ca fait la même chose sous FF

Pour le fond d'écran, j'avais déjà lu ça quelque part, j'avais bien aimé

ça ne change rien, par contre je viens de remarquer que quand mon radio est check le label (qui dessine le radio button) remonte (cf le screen) du coup c'est encore plus incompréhensible :s

Sous FF :

CSS :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

form .fields-group input[type="radio"] + label:before {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 1.25em;
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin: -2px 6px 0 0;
  font-size: 1.65em;
  line-height: 0.6em;
  text-align: center;
}

Je n'ai modifié que le width et height.

Hummm, sur Opera et Chrome le fait de mettre with & height à 0.7 ne résous rien

Pour régler cela, tu peux mettre ton caractère "\2022" tout le temps et changer sa couleur de "transparent" vers "black" quand le label est cliqué

C'est qu'il est malin merci problème résolu