Contribution pour les problemes de CSS et IE6

[garfield]

Bonjour,

J'ai resolue mes problemes de CSS et IE6 ainsi :

Dans le fichier index.php à la racine :

if (!empty($_SERVER['HTTP_USER_AGENT']))
{
$HTTP_USER_AGENT = $_SERVER['HTTP_USER_AGENT'];
}
else if (!empty($HTTP_SERVER_VARS['HTTP_USER_AGENT']))
{
$HTTP_USER_AGENT = $HTTP_SERVER_VARS['HTTP_USER_AGENT'];
}
else if (!isset($HTTP_USER_AGENT))
{
$HTTP_USER_AGENT = '';
}
if (ereg('Opera(/| )([0-9].[0-9]{1,2})', $HTTP_USER_AGENT, $log_version))
{
$nav_ver = $log_version[2];
$nav_agent = 'Opera';
}
else if (ereg('MSIE ([0-9].[0-9]{1,2})', $HTTP_USER_AGENT, $log_version))
{
$nav_ver = $log_version[1];
$nav_agent = 'Internet Explorer';
}
else if (ereg('OmniWeb/([0-9].[0-9]{1,2})', $HTTP_USER_AGENT, $log_version))
{
$nav_ver = $log_version[1];
$nav_agent = 'Omniweb';
}
else if (ereg('Netscape([0-9]{1})', $HTTP_USER_AGENT, $log_version))
{
$nav_ver = $log_version[1];
$nav_agent = 'Netscape';
}
else if (ereg('Mozilla/([0-9].[0-9]{1,2})', $HTTP_USER_AGENT, $log_version))
{
$nav_ver = $log_version[1];
$nav_agent = 'Mozilla';
}
else if (ereg('Konqueror/([0-9].[0-9]{1,2})', $HTTP_USER_AGENT, $log_version))
{
$nav_ver = $log_version[1];
$nav_agent = 'Konqueror';
}
else
{
$nav_ver = 0;
$nav_agent = 'Autre';
}

puis :

if ( $nav_agent == "Internet Explorer" and $nav_ver == "6.0" ){
include(dirname(__FILE__).'/headerIE6.php');
}
else {
include(dirname(__FILE__).'/header.php');
}

Apres il faut creer un fichier headerIE6.php dans lequel on indique un header.tpl et un global.css spécialement dédié à IE6.

Par precaution, j'ai aussi mis le chemin du global.css en dur dans le header.tpl dédié à IE6.

Voil&, c'est à ameliorer sans doute mais cela marche...

[Patric]

Fais gaffe, tu as été victime du forum farceur...

Il semble qu'il remplace les :

version[1]

par
version[1]

(Je la connaissais pas celle là)

Utilise la balise CODE.

[garfield]

lol oui exact

[DrÿSs']

Ce n'est pas très propre de créer une feuille de style par navigateur...

Et vu la longueur de ta fonction "détection du navigateur", je trouve cela très lourd comme manipulation.

En respectant les standards on dois normalement pouvoir arriver à une feuille compatible tous navigateurs.

[Lucas Cherifi]

Tout à fait, regardez le thème par default.

[Cédric Girard]

Ta ta ta, suis pas d'accord


IE 6 ne respectant pas les standards, je ne vois pas comment (même avec une page valide W3C à la norme XHTML 1.0 transitionnel / CSS 2.1) on peut uniformiser une mise en page un poil compliquée (même si je l'ai déjà fait)

Perso ça fait belle lurette que je ne développe plus pour IE6, je me limite à Firefox (versions 1.5, 2 et 3) et IE7 ; le reste est testé à l'arrache avec IETester. S'il y a un truc qui merdoie, c'est TOUJOURS sous IE6...

Ma technique consiste plutôt à écrire une feuille de style conforme FF/IE7/autres navigateurs, et SI il y a soucis avec IE6, d'utiliser une feuille de style complémentaire spécifique uniquement dans ce cas précis.


Ma méthode :


Dans le header.tpl de votre thème, sous le code suivant :

{if isset($css_files)}
   {foreach from=$css_files key=css_uri item=media}
       <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
   {/foreach}
{/if}

Insérer ceci :

<!--[if lt IE 7]>
    <link href="{$css_dir}ie6.css" rel="stylesheet" type="text/css" media="screen" />

Il vous suffit, dans le répertoire [i]css [/i]de votre thème, de créer une feuille de style [i]ie6.css[/i] spécifique qui reprend simplement les balises posant problème : elles seront alors interprétées (dans le cas du bout de code ci-dessus) uniquement si le navigateur est Internet Explorer et dans une version strictement antérieure à la 7.0...

NB : Le plus souvent les soucis viennent de l'interprétation foireuse des paddings (qui sous IE6 sont interprétés comme des margins...) ainsi que de la transparence des PNG 24 bits, pas prise en compte.

Enfin voilà ;-)

[DrÿSs']

Je le répète, cette technique n'est pas propre du tout, et en plus vous dupliquez du code...
Bref c'est la pire des solutions !

Je vous assure que développer une feuille de style unique et compatible IE6 est possible, Joël et Lucas nous l'ont fait pour le thème par défaut.

Cela reste compliqué, plein de petites astuces à prendre en compte, mais tout à fait faisable.

[Cédric Girard]

C'est effectivement possible (la plupart de mes sites - on dira 95% - passent sans soucis sous IE6 dont celui de mon profil) mais quand on sait qu'IE6 (et les versions antérieures) ne représente plus que 18% des navigateurs utilisés sur le web et que ce chiffre diminue chaque mois, personnellement je ne tiens pas à perdre un temps précieux... tant que mon code est conforme W3C !

D'ailleurs si j'ai adapté ma dernière boutique (je n'ai pas - trop - honte de le dire) c'est uniquement parce que mon client utilise encore cette version pourrie d'IE et qu'il m'a seriné parce qu'une sidebar partait en vrac (les joies de la créativité...)

[Lucas Cherifi]

Bonjour Cédric,

Vous pouvez vérifier simplement avec notre thème PrestaShop fourni dans la solution. Un seule feuille de style multi-navigateurs. Nette et claire. La mise en page du thème est pourtant très complète.

De plus je ne trouve personnelement pas très logique d'utiliser un unique pourcentage (bienque mensuel...) comme référence.

En effet, cet indicateur n'est pas toujours très proche de la réalité. Il faut pousser un peu plus loin la reflexion et bien prendre en compte la clientèle du site que l'on intègre, soit le contenu qu'il propose. Un site de destiné aux développeurs et intégrateurs (, gamers, etc.) n'aura pas les mêmes statistiques qu'un site marchand qui, lui, sera susceptible d'avoir tous types de clientèle (les internautes confirmés ou interessés par l'open source auront plus tendance à utiliser Firefox, les utilisateurs de Mac auront une courbe plus forte pour Safari, les persones plus agés ou moins experimentés resteront, en général, sur les navigateurs proposés par défaut IE6-7).

Et cela n'implique pas que j'apprécie IE pour autant. Il m'a fait perdre énormement de temps, et c'est le même problème pour beaucoup d'intégrateurs... Mais il faut aussi avoir de l'objectivité et se rappeler que tout le monde ne connait pas forcement aussi bien le web (et la bureautique) que nous et il n'y a pas de raison que les personnes ne sachant pas installer un second navigateur) n'aient pas le droit à une navigation de qualité.

En résumé, il est dangereux pour le webmarchand que son site ne soit pas adapté aux navigateurs des clients susceptible d'utiliser son site. Je conseille donc personnellement aux intégrateurs d'apprendre à adapter leurs sites à IE6.

[Cédric Girard]

Nous sommes bien d'accord ;-)

Ceci dit, tout est question de temps (et donc d'argent pour ceux qui en vivent) et dans cette optique, l'utilisation d'une feuille de style spécifique permet d'en gagner et de garder un code propre par ailleurs et conforme aux normes...

Mais bon c'est juste un point de vue parmi d'autres ! Je vais (juste par curiosité) regarder la proportion d'IE6 et antérieurs sur ma dernière boutique (orientée B2B et dont je sais qu'elle est consultée par des utilisateurs en entreprise de type TPE, là où les ordinateurs sont les moins récents finalement)

Accessoirement pour les limitations techniques propres aux anciens navigateurs (comme la gestion des transparences), même une feuille de style spécifique n'y peut rien (en fait si : elle permet de "corriger" la présentation pour obtenir quelque chose de présentable...) ; je ne suis pas accro aux astuces genre PngIEFix et compagnie...

[micm]

je ressort ce post car j'ai ce probleme d'affichage sois IE6 - la colonne de droite passe a gauche sous la colonne de gauche.

J'ai bien compris qu'il fallait un css spécial - mais comment le concevoir.


Si quelqu'un peut avoir la gentillesse de m'aider ce serait top.

merci d'avance.

[micm]

[résolu]

je me répond à moi meme car j'ai trouvé la solution

dans mon global.css - j'avais

#right_column {
       width: 190px;
   padding-left: 15px;

que j'ai complété en

#right_column {
   clear: right;
   width: 190px;
   padding-left: 15px;

tout betement et mainteant ça marche sous IE6

[mexicanos]

Merci Micm j'étais désespéré t'as solution fonctionne du premier coup!

[micm]

super ;-P

[tgayrard]

Mille merci MICM !! Tu viens de me sauver la vie Bon, ok, j'exagère un peu, mais grace à toi je suis devenu le héros de ma femme (propriétaire de la société de e-commerce pour qui je bosse )

[DrÿSs']

Déplacé sur le forum Graphisme.