> Tous les forums > Forum des Webmasters
 Différence d'affichage entre Firefox3 et IE 7
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
pilotebien
  Posté le 25/03/2009 @ 13:49 
Aller en bas de la page 
Petit astucien

Bonjour,

Je suis confronté a un problème sur mon site.

Mon site http://www.1rsma.fr fonctionnait jusqu'au 23 mars 2009 correctement sous IE7 ou Firefox 3. Depuis cette date il m’affiche sous certaines pages des changements de couleurs, des caractères plus gros, des alignements tronqués. (http://www.1rsma.fr/pbc_form_mili.php3 ou http://www.1rsma.fr/pbc_form_mili_fcg.php3 )

Voila les pages plus toutes celles sur Formation professionnelle qui sont en mauvaise lecture sous IE.

De quoi ça peut venir ?

De plus je ne maitrise pas le CSS. Je commence a ma documenter dessus mais d’abord faire le tri dans les sites, trouver le site de base ….

Comment peut t'on sous dreamweaver chunter ou mettre le CSS a zero ou aucun et affine apres le CSS quand je le maitriserai.

Merci du coup de main.

Publicité
warpShadow
 Posté le 26/03/2009 à 01:42 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Tout dépend du site en lui-même, de la façon dont il a été fait.

Et oui, tout est une histoire de CSS, ils y a certaines choses à faire pour mettre IE7 et Firefox au même niveau, à commencer par corriger une petite entorse aux règles W3C de la part de firefox (eh oui) qui affiche un padding automatique lors de l'utilisation d'une liste, au lieu d'un margin (ou l'inverse, mais peu importe), ce qui peut amener à des différences de positionnement. Entre autres en tout cas. Afin de palier à cela, on utilise cette propriété CSS :

body, div, form, fieldset, ul, table
{
margin: 0;
padding: 0;
}

Ensuite, le seul truc à faire, c'est de reprendre ligne par ligne le CSS, en observant les effets à la fois sur IE6, IE7 et IE8, Firefox 3 et même Safari. Pour cela, on peut utiliser IEtester (multiversions d'IE). La grosse différence entre IE6/7 et IE8 et FF, c'est la gestion des hauteurs. Ainsi, il va falloir utiliser un hack css, que seul IE6 et 7 interprêtent, et pas les autres. Ce hack, c'est "!important!" (ne pas confondre avec "!important", qui ne donnera pas le bon effet, n'oublies donc pas le ! à la fin). Par exemple :

.logo
{
position: absolute;
top: -15px;
top: 0px !important!;
left: 0px;
z-index: 2;
}

Dans cet exemple, la position en hauteur (axe Y) sera d'abord réglée sur -15px, et ensuite re-réglée pour IE6-7 à 0px. Il faut perséverer dans la réalisation de son CSS. Je lutte activement contre tous les sites "optimisés pour firefox", crachant méchamment au visage des concepteurs web qui n'ont juste pas voulu se donner la peine de faire un site professionnellement, c'est à dire compatible avec la majorité des navigateurs.

Et pour remettre un css à zéro... il suffit de supprimer tout le contenu (utilise dreamweaver en mode code, le mode création WYSIWYG est une abomination du monde du web).

Voilà, j'espère t'avoir aidé (même si c'est tard par rapport à ta demande), ou au moins que ça pourra aider quelqu'un qui se pose les mêmes questions.

elle
 Posté le 26/03/2009 à 01:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Sur la gestion des hauteurs par IE6, d'accord, mais pourquoi IE7? Je n'ai jamais eu de problème avec lui.

fleuretta
 Posté le 26/03/2009 à 01:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Le !important! pour IE7 fonctionne-t'il pour tout dans la css? Parfois IE7 me chifonne pour quelque pixels par rapport à FF et j'aimerais bien savoir si cela marche pour tout ou seulement pour le margin ou le padding.

De toute façon je vais l'essayer à chaque fois qu'il me chiffone mon affichage.

Pour IE6, je mets dans ma css un trait avant le code. Exemple: _margin-left:5px

Merci

pilotebien
 Posté le 26/03/2009 à 23:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci pour les reponses.

Je cherhce l'erreur mais pas facile.

warpShadow
 Posté le 27/03/2009 à 15:02 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Salut (content de voir que mon explication sert à des gens ^^)

Donc :
le !important! va fonctionner pour tout et n'importe quoi, c'est juste qu'il n'y aura que les IE 6 et 7 qui vont les lire. ainsi, si on veut, on peut avoir une présentation totalement différente entre IE6-7 et firefox, safari, opéra, chrome, ie8.

Quant à la gestion des hauteurs pour IE7, hé bien elle est différente de celles de FF par exemple.

De manière générale, si vous avez une grosse différence entre margin et padding de l'un à l'autre, essayez d'abord de changer, et de mettre padding à la place de margin (et inversement). Des fois, c'est juste qu'on a pas mis le bon :)

elle
 Posté le 27/03/2009 à 15:38 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

warpShadow a écrit



Quant à la gestion des hauteurs pour IE7, hé bien elle est différente de celles de FF par exemple.

De manière générale, si vous avez une grosse différence entre margin et padding de l'un à l'autre, essayez d'abord de changer, et de mettre padding à la place de margin (et inversement). Des fois, c'est juste qu'on a pas mis le bon :)

Ce qui m'amène à dire que cette différence de hauteur pour IE7 résulte souvent d'un codage inadéquat.

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
Tablette 11 pouces Xiaomi Mi Pad 6 (120 Hz, Snapdragon 870, 6Go/128Go, Android 13) à 213 €
213 € 290 € -27%
@AliExpress
Les promotions du Singles Day le 11/11
-1 -27%
@AliExpress
Smartphone Poco C65 (6,74'', Full HD+, Helio G85, 8 Go Ram, 256 Go, Android 13) à 84,28 €
84,28 € 159 € -47%
@AliExpress
Chargeur rapide VOLTME 35W GaN 2xUSB C à 14,99 €
14,99 € 30 € -50%
@Amazon
Batterie externe OUKITEL P2001 Ultimate 2000Wh, 2000W, LifePOE4 à 749 €
749 € 929 € -19%
@Geekbuying
Adaptateur Bluetooth 5.4 USB Ugreen à 7,69 €
7,69 € 11,99 € -36%
@Amazon

Sujets relatifs
Différence entre enregistrer...acheter un « nom de domaine
différence entre répertoires public_html et www
Difference entre navigateurs
Slash ou pas - Différence entre local et site
pb affichage entre IE et Firefox
différence entre i-france et wanadoo
différence d'affichage
Difference entre 2 balises [résolu]
Difference entre iframe et frame ???
Affichage 4:3 sur toutes résolutions
Plus de sujets relatifs à Différence d''affichage entre Firefox3 et IE 7
 > Tous les forums > Forum Forum des Webmasters