IE vs FireFox : la catastrophe 4 problèmes en vue

Version imprimable

10/06/2009, 12h23
anxious

IE vs FireFox : la catastrophe 4 problèmes en vue

Bonjour,

et voilà c'est reparti pour le problème d'internet explorer. :aie:
évidemment, le rendu que je souhaite avoir est comme celui de Firefox (pourquoi cela ne m'étonne pas...)

Page d'accueil
>> sous IE :
* toutes mes images du bloc partenaires sont toutes décalées vers la gauche. (ou plutôt elles ne sont pas décalées vers la droite)
* mes bordures du menu de l'accueil sont bien plus grosses

Page d'une structure
>> sous IE :
* tout mon menu est décalé vers la gauche
* les bordures sont biens plus grosses sur IE que sur FireFox.

Cliquez sur une photo
>> sous IE :
* au lieu, comme firefox, que le background vire au noir par un fading sur toute la page... ben la on se demande pourquoi... le fading ne s'applique que sur une moitié de page.

Je vous remercie d'avance :oops:
10/06/2009, 12h30
lifty

Tu parles de quelle version d'ie ? 6, 7, 8 ?

pour le décalage si c'est sous ie 6 j'ai une petite idée : test ce tuto

Pour le fading il ne s'applique que sur la partie visible du navigateur, si tu scroll le layout ne suit pas :/ j'ai le même problème sur un de mes projets :aie:
10/06/2009, 12h35
anxious

je parle de la version d'IE sous windows 7, donc j'imagine la 8, (donc a priori la 7 aussi par effet ricochet :p)

(c'est possible avec IE tab de selectionner un moteur spécifique d'IE ?)

et comment on fait alors pour le fading ? :calim2:
10/06/2009, 13h55
Macmillenium
Citation:

Envoyé par anxious

Page d'accueil
>> sous IE :
* toutes mes images du bloc partenaires sont toutes décalées vers la gauche. (ou plutôt elles ne sont pas décalées vers la droite)
* mes bordures du menu de l'accueil sont bien plus grosses

Fixer la largeur du body est un mauvais choix d'intégration.
- Englobe plutôt l'ensemble des éléments dans une div ayant une largeur 960px (que tu devrais enlever du body).
- Centre cette div globale via les marges automatiques : margin:0 auto;
- Rajoute un text-align:center sur le body pour corriger le problème d'IE7- qui interprète mal le margin:auto;
Citation:

Envoyé par anxious

Page d'une structure
>> sous IE :
* tout mon menu est décalé vers la gauche

Enlève le margin-left:-20px; sur #menuGauche ul, li et rajoute :
Code:

1 2 3 4 ul { margin:0; padding:0; }
Les styles appliqués par défaut différent d'un navigateur à l'autre, ce reset permet de remettre les valeurs (padding et margin) de l'élément <ul> à 0.

Citation:

Envoyé par anxious

* les bordures sont biens plus grosses sur IE que sur FireFox.

Pareil c'est une différence de style par défaut, rajoute un border-width:1px sur tes blocs.

Citation:

Envoyé par anxious

Cliquez sur une photo
>> sous IE :
* au lieu, comme firefox, que le background vire au noir par un fading sur toute la page... ben la on se demande pourquoi... le fading ne s'applique que sur une moitié de page.

Rajoute un height:100% sur l'élément html
Code:

1 2 html { height:100% }
10/06/2009, 15h28
anxious

woow je vais de ce pas mettre tout ça en application.

et je promets que lorsque j'en saurais suffisamment pour aider les autres, j'aiderais mon prochain :bug:

parce que j'imagine que ça doit pas être évident tous les jours de se répéter.

merci :ccool:
10/06/2009, 16h09
anxious

ok, alors tout fonctionne je suis vraiment très reconnaissant !

seul petit bémol, mon centre de page ne se centre pas

Exemple n°1

Exemple n°2

faut t'il que je joue avec margin-left pour ajuster ? ou peut être ai-je fait une erreur bête :aie: .

merci.

La div #global n'est pas fermée (ou alors tu as une fermeture qui manque quelque part dans ton code).

EDIT : Tu as un </div> de plus :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
	  <div id="menu">
            <ul>
              <li><a href="index.php"> <img src="images/menu_accueil.jpg"  width="186" height="50" alt="logo de la page d'accueil du mouvement d'acion sociale"></a></li>
              <li><a href="foyer-liotard.php"><img src="images/menu_liotard.jpg"  width="186" height="50" alt="foyer maurice liotard"/></a></li>
              <li><a href="cao.php?page=accueil_cao"><img src="images/menu_cao.jpg"  width="186"  height="50" alt="centre d'accueil et d'orientation" /></a></li>
              <li><a href="info-victimes.php"><img src="images/menu_victimes.jpg"  width="186"  height="50" alt="logo d'info victimes" /></a> </li>
              <li><a href="diabolo.php"><img src="images/menu_diabolo.jpg" width="186"  height="50" alt="logo de pause diabolo" /></a></li>
            </ul>

          </div>
      </div>

A viré.

10/06/2009, 16h21
anxious

han la honte... au risque de me répéter merci !
mon menu.html est appellé en php, c'est pour ca que je l'avais pas vu, il étais pas devant moi :o
10/06/2009, 18h43
_jey_

Citation:

Envoyé par anxious

(c'est possible avec IE tab de selectionner un moteur spécifique d'IE ?)

Pour émuler IE de la version 5.5 à la version 8, tu peux utiliser IETester.