Magento IE6, IE7 débeuger le CSS

décembre 11, 2009 18 Commentaires

Comment débeuguer le CSS de magento pour les navigateurs IE6 et IE7 ? Le code CSS de magento est compatible avec ces navigateurs, les choses se compliquent lorsque l’on rajoute des éléments CSS, il se peut que des beug apparaissent.

CSS magento et Internet explorer IE

Incontestablement, le navigateur qui pose le plus de problèmes est internet explorer 6 « IE6″ suivi de prêt par son cousin éloigné IE7. IE8 semble s’être assagi. Magento prévoit un CSS correctif ; il est placé sur le site dans le layout page.xml. Voici le code :

 <action method="addItem"><type>skin_css</type><name>css/iestyles.css</name><params/><if>lt IE 8</if></action>
 <action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action>

Beug CSS IE

Lors de l’intégration de la maquette voici le genre de beug que j’ai rencontré avec IE6 et IE7. Vous pouvez voir la maquette originale sans beug dans la section site magento, ou dans les autres tutoriels de cette section création de site magento.

L'intégration sous IE6 est catastrophique, il faut modifier le css

L'integration sous IE6 est catastrophique, il faut modifier le css style-ie.css

Sous IE6 il manque les images de fond, et les éléments sont décalés. Tout ceci peut paraître déroutant et compliqué à débeuger, mais pas tant que ça…

Utilisez un programme pour visualiser la page dans les différents navigateurs IEtester .

Pour corriger cette page, il suffit d’appliquer au CSS style-ie.css un zoom aux éléments sans images de fond. Seulement sur les éléments ne contenant pas de propriété « haslayout » voir la liste sur ce très bon tutoriel.
Donc ici zoom:1 sur les éléments CSS contenant un fond non visible. Le beug disparaît magento affiche la page correctement.
Pour les décalages (quad moto, location buggy) IE6 double les marges des éléments contenant une série de « float » (plusieurs float left ou right dans une div avec des marges) Pour pallier à ce problème il suffit de mettre un display:inline sur ces éléments. Il faut l’ajouter sur le CSS style-ie.css de magento.
J’ai également enlevé des marges sur les images pour supprimer le beug du panier et corriger des beug sur les listes li.

La page d’accueil a retrouvé son état « normal ». IE6, qui est encore, bien que cela paraisse surprenant utilisé par un peu moins de 10% des internautes. Son éradication totale est prévue pour 2012.

Page debeuguée sous IE6 et IE7, magento l'affiche correctement

Page debeuguer sous IE6 et IE7, magento l'affiche correctement

Vous avez des beug CSS avec Internet explorer ou d’autres navigateurs ? Contactez moi.

Liens complémentaires

CSS et magento

Design magento, structure d’une page

Décalage css magento : problème encodage fichier

Intégration d’une maquette magento : page accueil

Changer le favicon de magento pour un design personnalisé

Design
18 commentaires : “Magento IE6, IE7 débeuger le CSS”
  1. Fireball2009 dit :

    Salut,

    Voici mon problème:

    Suite à ma demande sur le forum de fragento j’ai réussi à apporter quelques modifications au css pour ie.

    Mais j’ai encore quelques bugs avec le menu qui est décalé à droite et le plus gros souci et l’image principale qui ne veut pas s’afficher alors qu’elle est bien présente dans le répertoire.

    Sur Firefox et Chrome pas de souci tout est là et en place.
    Sur ie8 le menu est bien placé mais l’image ne s’affiche
    Sur ie6 et 7 le menu est décalé et l’image ne s’affiche.

    http://www.labaguettemagique.ch/v2

    Merci d’avance pour l’aide que tu pourras m’apporter car là je commence à avoir le cerveau qui va exploser.

    Je reste à ta disposition pour toute question.

    A+

  2. admin dit :

    Salut,
    je l’ai cherché longtemps celle là, pour l’image elle est encodée au format CMJN non reconnu par IE 6 ,7 et 8 re encode la en RVB.

  3. Fireball2009 dit :

    Bonjour,

    Voilà le problème de l’image étant résolu il me reste à trouver une solution pour le menu qui ce décale avec ie6+7.

    Si vous trouvez une solution n’hésitez pas à me contacter.

    Merci

  4. admin dit :

    Salut,
    Pour le menu il faut enlever le float:left et mettre left:0
    et mettre le header en position relative.
    Ce qui réglera le problème de décalage de menu sous internet explorer. IE6 IE7 et IE8.

  5. Fireball2009 dit :

    Big merci,

    Voici les codes qui posait problème :

    Dans /skin/frontend/default/modern/css/boxes.css

    Avant

    .header { margin-bottom:12px; z-index:999; text-align:left; }

    Après

    .header { position:relative; margin-bottom:12px; z-index:999; text-align:left; }

    Ensuite dans skin/frontend/default/modern/css/menu.css

    Avant

    #nav { float:left; margin-top:32px; margin-left:5px; font-size:1.1em; z-index:999; position:absolute; top: 95px; }

    Après

    #nav {font-size:1.1em; left:0; margin-left:5px; margin-top:32px; position:absolute; top:80px; z-index:999; left :0;}

    Et voilà le problème à disparu.

    Merci admin

  6. VR... dit :

    Petit retour d’expérience sur le debug IE6.

    Le cas :
    - template 3 columns
    - une table (product-grid) avec un cellspacing/padding (vu que border-spacing en CSS ne marche pas sur IE…)
    - une left-margin négative sur la product-grid pour recentrer la table.

    > Résultat : une colonne centrale qui, toutes margins et paddings mis bout à bout a une largeur supérieure à la largeur de col-main

    > Rendu IE6 : la colonne centrale qui descend et se trouve sous le contenu du site (classique me direz-vous)

    > Solution : bien sûr, vérifier que, de façon générale, la largeur des colonnes n’est pas agrandie par leurs contenus. Et surtout : mettre overflow:hidden sur les css des colonnes. Et tout revient en ordre.

  7. cédric rousset dit :

    Bonjour,
    Merci pour le partage.
    Je ne connaissais pas ce beug, j’ai pas encore travaillé en 3 colonnes avec IE6. Maintenant je serais ou allez chercher pour débeuguer. Je suis sur que magento réserve bien d’autres surprise avec ce navigateur.

  8. Geor dit :

    Personrllement j’ai arrêter Internet explorer 6. Ie7 oui plus facile a debeuguer. J’ai lu un article a ce sujet de plus en plus de d intégrateur laisse de cotes ie6. Les clients l’exige desfois.

  9. Dr.Malcom dit :

    Bonjour,

    J’ai souhaité utiliser une police spéciale pour le 1er niveau apparent du menu. Pour cela j’ai inséré une image representant ce menu, j’ai fait correspondre les différentes catégories du menu à ceux de l’image. Et comme on voit toujours le menu initial s’afficher au dessus de cette image, j’ai changé la couleur de la police en transparent dans style.css.

    Pas de problème sous firefox, mais le menu reste apparent en noir sur IE8. Y’a-t-il une manip à faire ? Ou sinon, il faudrait indiquer que l’image de ce menu soit au dessus du texte, mais comment faire ?

  10. cédric rousset dit :

    Bonjour,
    Je ne pense pas qu’une image soit nécessaire pour avoir une font spéciale sur le 1er niveau.
    Tu ajoutes ton css sur le menu
    #nav (corresponds au niveau 1) les autres auront
    #nav level0
    #nav level1
    Donc #nav{font-familly:ta police}

  11. Dr.Malcom dit :

    Bonjour,

    C’est ce que j’ai pensé aussi au début, mais apparement, il faut que cette police soit reconnue par les explorateurs ou installée sur le pc de celui qui navigue.

    Et comme elle est assès « rare » (Hemi Head 426), il y a beaucoup de chance pour qu’elle n’apparaisse pas sur la plupart des navigateurs et donc que l’explorateur bascule sur la police de « secours » (arial ou autre). Voila mon dilemme :)

  12. cédric rousset dit :

    Oui si c’est une police exotique, il faut passer par une image de fond. Je me suis jamais penché sur le problème.

  13. Dr.Malcom dit :

    Bonjour,

    Le résultat est super en utilisant une image de fond et une police transparente sous FF et Opéra. Je fais correspondre le texte transparent avec le menu en reglant le padding.

    Mais je suis toujours bien em***** avec ce problème sous IE…

    J’ai pensé prévoir l’insertion de l’image directement dans le fichier indiquant l’affichage des catégories, ou peut-on le trouver ? A moins qu’il s’agisse des fichiers core ou peut être la manip est-elle possible depuis le panneau d’administration en insérant un code ou bloc cms ??

    Sinon, j’ai pensé utiliser le code « span » au lieu de div mais débutant en css je ne suis pas sur de la facon de l’utiliser…

    Merci IE de compliquer nos vies (surtout qu’il est encore utilisé par une petite majorité…)

  14. cédric rousset dit :

    L’affichage des catégories est dans le fichier top.phtml
    catalog/navigation/top.phtml
    mais c’est généré dynamiquement dans le fichier php
    Il me semble qu’une Id et attaché a tous les li des menu,
    tu peux attacher ton fond en css.
    Pour IE6 j’ai laissé tombé trop chronophage je sous traite avec un excellent intégrateur qui me debeuge ça rapidos.
    Je fais mais mise en page et il me debeugue IE7 et 6.

  15. Dr.Malcom dit :

    J’ai essayé une autre solution : en hébergeant le fichier .ttf de la police voulue sur mon site et en y faisant référence dans le code css. J’ai trouvé ce bout de code que j’ai essayé d’intégrer à style.css dans la partie navigation :

    @font-face {
    font-family: « Kimberley »;
    src: url(http://www.princexml.com/fonts/larabie/ »
    kimberle.ttf) format(« truetype »);
    }

    donné sur http://itx-technologies.com/blog/16-comment-importer-une-police-avec-css

    Mais sans résultat, la police ne change pas… Ou est-ce que je devrais intégrer ce code pour qu’il fonctionne ?

  16. cédric rousset dit :

    Bonjour,
    Pour les questions Css pointue, pose les questions sur alsacréation (forum css) tu aura ta réponses :)
    je n’ai jamais importé de police pour un site magento.

  17. Dr.Malcom dit :

    Salut,

    Problème résolu ! Pas trop compliqué en fait, mais même lorsque on connait rien au css, on finit bien par y arriver.

    Dans l’ordre, il faut faire plusieurs fichiers de police .ttf, .otf, .oet (car IE ne reconnait pas le format .ttf)
    Le mieux c’est d’utiliser ce site qui fait un pack à partir du fichier .ttf

    http://www.fontsquirrel.com/fontface/generator

    Placer les différents fichiers de police dans le dossier css (dossier skin).
    Ensuite dans le fichier styles.css, insérer le code suivant :

    @font-face {
    font-family: ‘Nom de la police’;
    src: url(‘Nom de la police’);
    src: local(‘?’), url(‘Nom de la police.woff’) format(‘woff’), url(‘Nom de la police.ttf’) format(‘truetype’), url(‘Nom de la police.svg#webfontNelzwN78′) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    Ensuite il suffit d’appeler la police voulue, pour ma part je l’utilise pour la barre de menu comme cela :

    #nav li { float:left; font-family: Nom de la police; font-size:25px }

    Voila pour l’essentiel ;)

    Du coup j’ai plus besoin d’utiliser la technique de placer une image de cette police. J’aurais aimé affiner un peu la chose, j’ai vu qu’on pouvait utiliser le fichier styles-ie.css pour du code spécifique IE. Est-ce que tu aurais une astuce pour par exemple faire une exception en sorte que ce code :

    .nav-container { background:#fff url(../images/bkg_nav00.jpg) 50% 0 repeat; }
    #nav { width:918px; margin:0 auto; padding:0 16px; font-size:13px; }

    qui donne la même image pour chaque navigateur en envoie une autre à la place pour le navigateur IE ??

    Merci pour le lien aussi (bien utile)

  18. cédric rousset dit :

    Salut,
    Tu as fini par y arriver c’est bien :)
    C’est quand même lourd une police… je pense que la technique d’image de fond serait mieux..
    Pour style-ie.css les css que tu appliques sont pour IE. donc oui si tu mets un style sur .nav-container il s’appliquera pour IE.

Poster un commentaire

(obligatoire)

(obligatoire)