[Résolu] Hack IE ou Firefox ???

Bonjour,

je voudrais juste faire une petite mise au point sur les fonctionnalité de positionnement de CSS avec les différents navigateurs...

En effet, j'ai remarqué que souvent nous devions recourir à des hack CSS pour faire passer à Firefox et autres Opera des infos innaccessibles à IE.

Je suis donc surpris, que l'on parle de Hack IE lorsque l'on est obligé de créer un code spécifique pour obtenir une représentation correcte dans un autre navigateur ??? Ne devrait-on pas parler ici de Hack Firefox ?

Bref , au delà de cette petite remarque purement sémantique, je trouve que IE (loin de moi d'avoir un intérêt particulier pour Microsoft ), interprète certains codes CSS de manière beaucoup plus logique que ses concurrents...

Un petit exemple ? Allez rien que pour vous...
Le CSS :

div {
margin:5px;
padding:10px;
border:1px solid #000;
}
#gauche {
width:20%;
float:left;
background-color:#990000;
}
#centre {
float:left;
}
#droite {
width:20%;
float:right;
background-color:#3366CC;
}

Le HTML :

<div id="gauche">Gauche <p>Texte Long </p></div>
<div id="droite">droit <p>Texte Long</p></div>
<div id="centre">centre <p>Texte Long </p>
</div>

On voit bien avec cet exemple, q'un bout de code qui serait bien pratique à utiliser, car très simple à comprendre et à mettre en oeuvre, part à la bene car Firefox exige que l'on définisse une largeur pour le div de centre, inférieur à la largeur totale moins la largeur des boites de côté moins les marges... Donc si pour une page donnée, je doit afficher plus trois mais deux colonnes simplement, il faut que je prévois un CSS spécifique pour page à deux colonnes ! Débile !

Mais c'est vrais que c'est mieux !!!

En tous cas, si quelqu'un à une idée aussi simple pour permettre à Firefox et autres navigateurs "respectant les standards" d'avoir une vrais modularité dans la présentation en colonnes... je ne demande qu'à voir !


Modifié par dav50 (08 Nov 2005 - 15:19)

Salut,

dav50 a écrit :

En effet, j'ai remarqué que souvent nous devions recourir à des hack CSS pour faire passer à Firefox et autres Opera des infos innaccessibles à IE.

Je suis donc surpris, que l'on parle de Hack IE lorsque l'on est obligé de créer un code spécifique pour obtenir une représentation correcte dans un autre navigateur ??? Ne devrait-on pas parler ici de Hack Firefox ?

J'avoue avoir du mal à comprendre. On ne fait pas passer à Firefox ou Opéra des infos inaccessibles à IE : on fait comprendre à IE des choses qu'il ne comprend pas spontanément, quand on lui parle en bon français. On fait donc une "traduction" spécifique à IE. Il s'agit donc bien de hacks IE. Ou alors le sens de ta phrase m'a échappé.

Ton exemple est assez perturbant : je ne vois pas en quoi le fait que les css d'une mise en page à 2 colonnes et à 3 colonnes soient différentes est étonnant. Deux mises en pages, deux css.

Tout d'abord, pour te répondre, il me semble que d'écrire un truc du style : html>body #centre { etc.....} pour informer à tout autres navigateurs que IE ce qu'il faut faire, c'est bien scripter en plus, puisque IE lui comprend bien les arguments passés sous la forme #centre {}...

On développe bien ici un code spécifique qui n'est pas compris par IE, mais qui est compris par les autres, alors que ces derniers comprennent aussi le code destiné à IE (puisqu'il est basique....)

Maintenant, pour mon exemple, imagine que les 3 colonnes, ne soient pas destinées à afficher un site, mais à structurer le contenu de celui ci. On peut facilement imaginer que certaines page du site auront recourt à une présentation en trois colonnes (contenu principal + encarts gauche et droit), et que d'autres pages n'auront besoins que de deux colonnes (contenu principal et encart gauche ou encart droit).
Avec IE, pas de problème, puisqu'il me suffit de supprimer un de mes div nommé "droite, ou gauche", et le div "centre" se redimensionne automatiquement occupant la place ainsi laissée vide. Je n'ai donc pas besoin de recréer un CSS pour définir spécifiquement la présentation de mon contenu global à deux colonnes.

Avec les autres navigateurs : si ...

Bonjour,

Oui il existe une méthode simple, facile, claire et compréhensible, qui s'appuie sur une propriété CSS faites pour ça : display:table.

Proriété standards et tout ce qu'il faut, implémenté dans tous les navigateurs modernes...

Allez, je te laisse deviner quel navigateur n'implémente pas cette propriété standard tellement pratique...

Sinon une petite recherche genre "colonnes en css" sur cet excellent forum pourrait sans doute t'apporter quelques précisions sur tes soucis...

Et aussi le billet Des colonnes de même hauteurs en CSS du toujours impecable blog-blueser-temesien

Et aussi la technique du toujours indispensable Position is Everything : In search of the One True Layout

Jean-pierre

Mais dis moi, à tu vraiment cherché ou était-ce juste une petite crise d'urticaire ?

merci je regarde ça tout de suite !

J'ai fait une recherche au préalable, mais j'ai dû mal chercher alors !

DSL

Et merci ! (uniquement si ça marche !!! )
Modifié par dav50 (08 Nov 2005 - 11:54)

dav50 a écrit :
Tout d'abord, pour te répondre, il me semble que d'écrire un truc du style : html>body #centre { etc.....} pour informer à tout autres navigateurs que IE ce qu'il faut faire, c'est bien scripter en plus, puisque IE lui comprend bien les arguments passés sous la forme #centre {}...
On développe bien ici un code spécifique qui n'est pas compris par IE, mais qui est compris par les autres, alors que ces derniers comprennent aussi le code destiné à IE (puisqu'il est basique....)

Je pense que tu interprètes mal : le code en question n'est en effet pas compris par IE, mais il s'agit ici d'un défaut d'IE : la grammaire ci-dessus est parfaitement normale, et devrait donc être lue par tous les navigateurs; je ne considère donc pas ça comme un "hack".
Pour ma part, je qualifierai plutôt de "hack" un code comme * html #centre, code qui sera interprété par IE, en raison d'une erreur de sa part (il n'existe pas de parent à l'élément html, donc la règle ne devrait pas être interprétée).
De plus, on ne peut pas reprocher à la plupart des navigateurs de se comporter "comme il faut" sous prétexte que le navigateur dominant fait des bêtises. Ce serait comme reprocher aux bons conducteurs les fautes de conduite des mauvais.
Ceci dit, je pense qu'une méthode (faire en sorte que les styles que IE n'est pas capable de comprendre lui soient cachés) comme l'autre (utiliser un bug d'interprétation grammaticale css pour que certaines règles ne soient lues que par ie) est peu souhaitable : si on souhaite utiliser des css spécifiques à IE pour corriger ses erreurs, autant le déclarer carrément en utilisant une feuille de style spécifique IE qui ne sera utilisée que par lui. C'est plus propre et ça ne fait pas appel à des défauts du navigateur pour en corriger d'autres.
Modifié par Marvin Le Rouge (08 Nov 2005 - 13:21)

Je suis d'accord avec toi sur la bonne pratique à tenir en terme de développement, mais je trouve dommage que la logique de la simplicité (IE est c'est vrai un peu basique dans son interprétation du code) ne soit pas la base de l'élaboration des standards. En effet Zeldman prone la simplicité et déclare (en gros) que le design avec les CSS est plus simple à mettre en place et à modifier... Il serait donc bon qu'une logique de simplicité prévale dans l'interprétation des standards par les développeurs de browsers... mais ceci est une autre histoire... Enfin, mis à part l'aspect accessibilité, le type de sites purement XHTML strict/CSS lorgnent souvent dans un design à la structure identifiable (www.cssbeauty.com ou zen garden) (vous savez, quand au premier coup d'oeil on se dit :"tiens, c'est du CSS ça ! et plus :"Me--e ! Comment il a fait ça ?! )

Enfin, je vais donc tenter d'utiliser le display:table et voir ce que ça donne pour résoudre mon problème...

Bon voilà, grace à vos info voici la soluce avec display:table

le css:

#container {
width:95%;
margin-right:auto;
margin-left:auto;
}
div {
margin:5px;
padding:5px;
border:1px solid #000;
}
#gauche {
float:left;
width:20%;
background-color:#900;
}
#centre {
float:left;
}
#droite {
float:right;
width:20%;
background-color:#36c;
}
html>body #centre {
display:table;
float:none;
}

Ce qui est important ici, c'est la dernière partie html>body #centre, ou j'annule le float:left, et ou je passe le display:table. Me demandez pas pourquoi ça marche...ça marche !

Le html :

<div id="container">
<div id="gauche">Gauche <p>Texte long</p></div>
<div id="droite">droit <p>Texte long</p></div>
<div id="centre">centre<p>Texte long</p><p>Texte long</p><p>Texte long</p><p>Texte long</p></div>
</div>

Merci donc à tous (JPV ), pour cette soluce simple et claire, qui j'en suis persuadé remplira de bonheur tous les petis codeurs... et ça rime en plus