CSS : FireFox vs IE

Eléphanteau du PHP | 42 Messages

03 oct. 2005, 10:05

Bonjour,

Je suis en cours de développement d'un portail WEB en PHP mais un souci commence à se poser, le design.

J'ai commencé à travailler le détail sous PhotoShop.
La charte graphique est plus ou moins OK même si j'ai toujours 2 3 évolutions à faire...

Le GROS HIC est que bien que ma feuille de styles soit correcte, je note des différences notables entre FireFox et IE.

Je n'ai pas regardé au début (Développement et tests sous IE, vu que ca reste encore le navigateur le plus utilisé) mais je m'appercois que le rendu est bien moins attrayant :(

Je ferais le détail des anomalies ce soir si j'ai le temps mais pour en citer 2 3, je dirais :
- IE fait un saut de ligne quand on ajoute un form et pas FireFox.
- Gestion différente des cellspacing et cellpadding...

Merci par avance pour vos idées.

Je crois que si le "look" varie trop, je mettrais 2 feuilles de styles différentes mais le but est quand même d'avoir une plateforme compatible avec les navigateurs les plus utilisés.
=> Si vous avez des tests complets ou liens pour le choix d'une feuille de styles selon le navigateur, je suis preneur.
=> Idem pour les corrections éventuelles, liées à la gestion propre de chaque navigateur.

Merci

Patrick

Mammouth du PHP | 19672 Messages

03 oct. 2005, 10:18

Le problème MAJEUR que pose IE, c'est une interprétation fausse par rapport aux standards CSS des dimensions de blocs, margin et padding : il faut donc à la base sur certains éléments forcer un padding et/ou un margin soi-même pour obtenir l'effet souhaité sur tous les navigateurs.

Un article sur le sujet est à lire sur alsacreations
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 42 Messages

03 oct. 2005, 10:22

Je vais essayer de corriger ca partout...

FireFox gère mieux les standards WEB mais hélas il est aussi moins utilisé (pour le moment en tout cas).

Par contre, comment corriger le saut de ligne que génère IE dès que l'on crée un form?

Je regarde ton lien tout à l'heure, je dois attaquer une mise en production ce matin...

Mammouth du PHP | 19672 Messages

03 oct. 2005, 10:31

Tu n'aurais pas par hasard rajouté un <br> après le </form> ?

Sinon, c'est encore un problème de margin sur le formulaire.

Tiens, un autre article intéressant sur le sujet
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Modérateur PHPfrance
Modérateur PHPfrance | 6037 Messages

03 oct. 2005, 10:46

Cherche les mots clés 'hack' 'IE' dans ton moteur de recherche préféré.

J'ai trouvé comme ça : http://www.positioniseverything.net/ dont la page http://www.positioniseverything.net/ie-primer.html t'intéresserait peut-être.
Règle n°2 du webmaster : Toujours commencer par le HTML qu'on veut obtenir....toujours ! :priere:
J'aime apprendre de nouvelles choses.

Eléphanteau du PHP | 42 Messages

03 oct. 2005, 11:21

Tu n'aurais pas par hasard rajouté un <br> après le </form> ?

Sinon, c'est encore un problème de margin sur le formulaire.

Tiens, un autre article intéressant sur le sujet
Après le FORM???
Je regarderais ce soir mais je ne vois pas le rapport entre mon form l'espace que j'ai AVANT celui-ci...
Je dois avoir un bouquin de Eric Meyer chez moi, je crois que je vais le zieuter plus en profondeur ce soir...

Ah là là, IE quand tu nous tiens... :(

Eléphanteau du PHP | 42 Messages

03 oct. 2005, 11:24

Cherche les mots clés 'hack' 'IE' dans ton moteur de recherche préféré.

J'ai trouvé comme ça : http://www.positioniseverything.net/ dont la page http://www.positioniseverything.net/ie-primer.html t'intéresserait peut-être.
Je ferais un petit tour des anomalies ce soir si j'ai le temps avec photos, vous me direz ce que vous en pensez...

Mammouth du PHP | 19672 Messages

03 oct. 2005, 12:10

Je dois avoir un bouquin de Eric Meyer chez moi
Si on considère que Eric Meyer est quasiment LA référence planétaire en matière de CSS, je dirais que ce livre devrais être en permanence à portée de la main ;)
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 42 Messages

03 oct. 2005, 14:14

Je dois avoir un bouquin de Eric Meyer chez moi
Si on considère que Eric Meyer est quasiment LA référence planétaire en matière de CSS, je dirais que ce livre devrais être en permanence à portée de la main ;)
YES :D
Mais bon, c'est le bouquin sur le CSS1 :(

Mammouth du PHP | 19672 Messages

03 oct. 2005, 16:26

Je te dirais que si on arrivait à exploiter à fond le CSS1 comme le fait Meyer, ce serait déjà de toutes façon quasiment mieux que ce qu'on arrive pour l'instant sans trop de références à bidouiller en CSS2 :D
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 42 Messages

03 oct. 2005, 21:09

1e anomalie du soir...

Code : Tout sélectionner

li { list-style-image: url(../../images/icones/entreeBlanc.gif); }
Sous IE, mes puces sont biens remplacées par mon image entreeBlanc.gif mais pas sous Firefox... :(

Mammouth du PHP | 19672 Messages

03 oct. 2005, 21:18

Mets l'adresse relative à partir de la racine du site (à tester, mais j'ai déjà eu ce genre de problème)
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 42 Messages

03 oct. 2005, 21:24

Mets l'adresse relative à partir de la racine du site (à tester, mais j'ai déjà eu ce genre de problème)
Sur le NET, ils sont tous en train de mettre des padding dans tous les sens mais je ne pense pas que cela influe...

Si je mets du relatif par rapport au site, faudrait pas que ce soit IE qui parte en LIVE :twisted:

Mammouth du PHP | 19672 Messages

03 oct. 2005, 22:03

Et si tu mets en relatif par rapport a la feuile de style et non par rapport à la page, as-tu encore une image quelque part ? Ça, je ne sais pas à quoi ça tient, mais je sais que c'est un problème suant avec lequel je me suis déjà baggarré :?

Je vais fouiller un peu les docs pour essayer de trouver une explication rationnelle de ce bazar
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 42 Messages

03 oct. 2005, 22:06

Et si tu mets en relatif par rapport a la feuile de style et non par rapport à la page, as-tu encore une image quelque part ? Ça, je ne sais pas à quoi ça tient, mais je sais que c'est un problème suant avec lequel je me suis déjà baggarré :?

Je vais fouiller un peu les docs pour essayer de trouver une explication rationnelle de ce bazar
Petit cadeau, on est en train de voir avec un pote et voici ce que l'on a fait pour qu'il n'y ait qu'une infime différence entre IE et FF :

Code : Tout sélectionner

ul { list-style-type: none; list-style-position: inside; padding: 0; margin-left: 5px; } li { list-style-image: url(../../images/icones/entreeBlanc.gif); list-style-position: inside; margin-left: 10px; }