Pitchoune

Comme tout développeur le sait, IE n'est pas copain avec les CSS (2 & 3). Pour faire fonctionner le style de vBulletin 4 avec IE, on doit trouver quelques astuces afin de faire fonctionner le système de la même.

En ayant converti Project Tools avec le style vBulletin 4, je suis à la recherche de corrections pour faire fonctionner le produit sous IE. Les cas ci-dessous reprennent le style vBulletin 4 avec Project Tools sous Internet Explorer.

Premier premier cas : créer une ligne horizontale avec tous les éléments alignés à l'intérieur.

Voici l'élément désigné affiché sous un navigateur correct tel que Firefox / Safari / etc. (tout autre navigateur qu'Internet Explorer):

Capture d*écran 2010-05-12 à 23.35.10.png

Et voila son rendu sous Internet Explorer 7 :

Capture d*écran 2010-05-12 à 23.53.50.png

Avouons, cela n'est pas fameux.

Pour pouvoir effectuer ceci sur un navigateur correct, il suffit de quelques petites règles simplissimes:

1. Chaque texte est dans une balise
   qui a la propriété CSS 'display' défini sur 'inline-block' (pour avoir tout en ligne).
2. Le premier bloc (le plus à gauche) a un simple 'margin-left' de 53 pixels.
3. Les 2 autres blocs sont alignés dans le code source en partant de la droite (de droite à gauche , la colonne la plus grande et dynamique étant la première) et ont (de droite à gauche) un 'float' défini sur 'right' (droite) et un 'width' de 15 et 20 pixels.

Un truc tout bête mais que Internet Explorer ne veut pas comprendre.

Il y a une chose à savoir, c'est qu'Internet Explorer (au moins le 7) ne comprend absolument pas la valeur 'inline-block'. Soit on le « corrige » en ajoutant un 'width', soit on utilise la méthode qui suit (et correspond mieux dû au nombre d'éléments à aligner).

Pour tous les div à aligner, il suffit d'ajouter un 'zoom' de 1 et d'un '*display' (notez l'étoile, elle fait toute la différence - seul IE7 le comprend) sur 'inline'. Pour IE6, on peut ajouter un '_height' (avec le '_') de 24 pixels.

Voici le résultat maintenant :

Capture d*écran 2010-05-12 à 23.55.50.png

Ça s'arrange.

Maintenant, occupons-nous des 2 blocs à aligner à droite. En référence à l'image pour réduire / développer des parties (la flèche vers le haut / bas à droite de cette page), on va ajouter ces définitions pour chacun un 'clear' sur 'left' (gauche - afin de pouvoir coller les blocs les uns contre les autres), une 'position' sur 'relative' et mettre la valeur '*top' (bien mettre l'étoile) sur -20px (la barre grise fait 24 pixels de haut).

Voici le dernier résultat :

Capture d*écran 2010-05-13 à 00.01.27.png

On se croirait sur un autre navigateur

D'autres astuces vont venir (comme comment monter une simple interface pour une page personnalisé).

PS : par pur hasard, la page des rapports s'affiche parfaitement sous IE7