Discussion :

[Crowell]

Bonjour, j'ai un probleme d'alignement assez difficile à résoudre.

Je pars d'un select, dans chacun des option je met 4 informations qui proviennent d'une BDD : un nom, prenom, code postal et ville. Evidement les champs sont de longueurs variables mais je souhaite que les champs soient alignés.

Voici ce que j'ai commencé par faire :
- je calcule la taille maximale de chacun des champs dans la BDD
maxNom, MaxPrenom, maxCp et MaxVille
- ensuite je creer une chaine de caracteres où j'insere tout d'abord le nom puis un nombre d'espaces égal à maxNom-tailleDuNom+4 (4 pour avoir un peu de marge entre le nom le + long et le champs suivant : prenom).
Je refais cette opération pour inserer les 4 champs.

Je défini dans mon css ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<style type="text/css">
      	option { 
font-family: Courier,"Courier New", "Nimbus Mono L", monospace;
		 }
</style>

Sous firefox tout va bien les champs sont parfaitement alignés, sous IE aieaieaie rien ne va plus ce n'est pas une police monospace qui est utilisée...

Que se passe-t-il? le code ne convient pas a IE? IE est mal réglé? IE c'est nul? (troll detected ^^)

Voila j'espère que vous pourrez m'aiguiller et vous remercie d'avance.

[Tober]

"Nimbus Mono L", monospace sont surement des polices non suportées par IE (et surement beaucoup d'utilisateur)
avec "courrier new" ca devrait passer normalement, essaye de mettre que celle là !

[Crowell]

Comme tu peux le voir "Courier New" est la 2e police a utiliser dans le cas où Courier n'est pas supporté, Nimbus ne venant qu'en 3e choix et monospace en 4e choix.

Le fait est que j'ai mis courier en choix unique et courier new en choix unique mais rien n'y fait, IE6/7 ont l'air de prendre une autre police par défaut.

[Tober]

J'ai testé avec les 4 polices, déjà, "Nimbus Mono L" ne marche pas sous IE ou FF chez moi.
Sinon les 3 autres marchent et on le même espacement de lettre chacune.
Donc peut être que ton script permettant de faire l'alignement est faux quelque part

[Crowell]

Ce qui semblerait bizarre puisqu'il fonctionne très bien avec Firefox sous nux et sous windows. Après la fonction peut foirer SI il n'y a pas la meme interpretation de   que j'utilise pour faire le padding de ma chaine.

En gros chaine = nom+paddingdunom (je complete la chaine nom avec   pour qu'elle ait la taille de maxNom+4) + prenom+paddingduprenom+cp...

J'utilise str_pad pour generer l'espace correct apres le champs.


J'obtiens de tres bons resultats pour firefox tout est parfaitement alignés, pour IE cela beau etre la meme fonction tout est décalé.

[edit] je met le code de ma fonction qui formate la chaine

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function formater_chaine($chaine,$taille_max)
{
$pad=($taille_max-strlen(utf8_decode($chaine)))*6+strlen(utf8_decode($chaine));
 
$machaine=str_pad($chaine,$pad," ");
 
return $machaine;
}

taille max est la longueur maximale du champs dans la BDD
j'enleve la longueur du nom actuel passé en parametre a la fonction,
j'obtient le nombre d'espace a ajouter a la suite du champs.
je multiplie par 6 car un espace vaut 6 caracteres (et oui : &bnsp; = 6 ^^)
j'ajoute la longueur du champs actuel c'est a cause du fonctionnement de str_pad

petit exemple : maxNom=8 nom actuel TAO
pad = 8-3=5 espace a mettre
5*6=30
30+3=33

$machaine=str_pad("TAO",33," ");

resultat :
$machaine == "TAO     "
la chaine fait 33 caracteres, interprétée elle done "TAO "

[Tober]

Essaye de remplacer les espaces de ta chaine par des "." pour que tu comptes si le nombre de points est égale sur firefox et ie (la réponse étant oui d'avance )
Si c'est bon, alors c'est bien la police de caractère qui fait n'importe quoi.
tu peux aussi afficher dans un alert javascript la police de caracter utiliser pour ff et ie.
si avec tout ça, tu ne notes aucune différence, eh ben t'es pas ds la ***
On finira par trouver

[Crowell]

Test des pts :
pour le 1er nom sous firefox (où tout s'affiche bien) : 18
IE ou l'affichage est anarchique : 18

Peux tu me donner la méthode d'affichage de la police utilisée si tu t'en rappelles, je suis déja en train de chercher ça devrait pas etre trop dur à trouver...

[Tober]

aucune idée, essaye

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('bla').font

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('bla').style.font

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('bla').baseFont

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('bla').style.baseFont

ou la vrai possibilité

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('bla').style.fontFamily

[Crowell]

J'ai testé alert(document.getElementById('a').fontfamily); =>affiche undefined sous firefox, rien sous IE

alert(document.getElementById('a').fontà; => affiche undefined sous firefox, rien sous IE...

c'est à n'y rien comprendre...


[edit]
alert(document.getElementById('a').style.fontFamily);
donne rien sous IE et une alert VIDE (donc chaine vide) sous Fox

[reedit]
sisi je viens de tester le code exact apres avoir vu ton propre edit (que d'edits...) mais le + etrange reste quand meme l'absence de popup sous IE...

[Tober]

t'as pas recopié ce que je t'ai mis !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('bla').style.fontFamily

arf, je vais test pour trouver le bon truc alors

[edit]j'ai essayé d'affiché les propriété et leur valeur, ca donne ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<style type="text/css">
p{
	font-family:Arial;
	font-size:20px;
}
</style>
<script>
<!--
function maiseuh(p){
	for(prop in p.style){
		alert(prop + " : '" + p.style[prop] + "'");
	}
}
-->
</script>
</head>
<body>
<p onClick="maiseuh(this);" id="bla">test</p>
</body>
</html>

et la plupart des propriétés n'ont pas de valeurs

j'ai fini par trouvé en regardant la liste des propriétés de l'élément p directement...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<style type="text/css">
p{
	font-family:Arial;
	font-size:20px;
}
</style>
<script>
<!--
function maiseuh(p){
	alert(p.currentStyle.fontFamily);
}
-->
</script>
</head>
<body>
<p onClick="maiseuh(this);" id="bla">test</p>
</body>
</html>

à toi de jouer maintenant