Voir le flux RSS

Pitchoune

Quelques astuces CSS / Internet Explorer #1

Noter ce billet
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
Catégories
Sans catégorie

Commentaires

  1. Avatar de Lumina
    Vu le nombre de problèmes d'affichage de Project Tools (et pas seulement avec IE), je pense que tes astuces peuvent devenir caduques au fur et à mesure des corrections des problèmes rencontrés.

    Par exemple, pour ce type d'alignements (des éléments à gauche, puis des éléments à droite en partant de la droite), il manque un max-width pour empêcher les inline-block de s'élargir et casser l'affichage. Mais est-ce compatible avec le rendu des navigateurs actuels ?

    Pour ma part, je préfère encore garder le type « tableaux » quand veut faire des trucs bien alignés, au lieu de jouer les acrobates des éléments flottants.
  2. Avatar de Pitchoune
    Tout vB4 se joue sans tableau (sauf certains endroits), ça s'améliore toujours
  3. Avatar de Pitchoune
    Pour la 2.1.1, le style devrait être mieux supporté par IE (7/8 uniquement, à bas IE6). Et si cela ne va toujours pas, ça sera pour la 2.1.2

    Je suis confiant pour cette version
  4. Avatar de falak
    Great Discussion. I am an engineer. Thanks for this forum discussion, I have found answer of my query at last. I also write about engineering stuff for a education website www.cleariitmedical.com Discussions like these help lot of seekers like me. Thanks Again!

Trackbacks

Nombre de trackbacks 0
Lien du trackback: