Problème de différence de rendu dans IE7

Bonjour,

J'ai réalisé la site : pizza-bella.fr pour un ami.

J'ai des différence de rendu dingues entre les différents navigateur, j'ai passé tout mon Week End à essayer de résoudre les bug, j'ai parcouru les forums, la FAQ, ...

Si quelqu'un peut m'aider je serais très reconnaissant.

Dans les soucis que j'ai : le bandeau en position fixe sous IE7 qui est tout en vrac si je n'ai pas un top:15px. Je voudrais un top 0 mais dès que je fais ça, tout se décale sans respecter les valeurs que j'ai choisies.

D'autre part la div 'cat_list' malgré un fond transparent vient recouvrir des éléments sous IE7, ce quelle ne fait pas sous les autres navigateurs.

Sous opéra, la div bottom n'est pas à sa place.[/résolu]

Aidez moi, je deviens chèvre.

Ce sujet fais suite à ce sujet
Modifié par FoW (30 Nov 2007 - 10:53)

Bonjour,

Pour commencer, ton utilisation d'une feuille de style conditionnelle pour IE7 est erronée. Tu appliques une feuille de style complète en plus de la feuille de style normale. Il est très largement préférable de ne placer que des correctifs ponctuels dans cette feuille de styles.

Pour le positionnement du menu: le ul dans le bloc de menu a un margin-top par défaut dans Firefox correspondant à 1em (du coup lorsqu'on redimensionne le texte, le menu bouge...), et à zéro dans IE. D'où le décalage.
Corriger la marge du ul, ou bien le padding de div#menu.

Pour le bug dans Opera, il ne se pose plus si je supprime le clear: both sur div#bottom.

Pas trouvé pour le bug de div.cat_list dans IE7. À part le fait que ça soit lié à la marge négative, bien sûr.

Ok merci de ta réponse.

Pour la feuille de style IE7, je venais de mettre ça en place pour faire des test uniquement avec IE7 et je ne l'ai pas enlevée de la version en ligne.

Pour le reste je vais tester ça.

EDIT : Ok, j'ai enlevé le clear: both du bottom pour faire disparaitre le mauvais positionnement dans opéra.
J'ai réglé le problème des margin / padding différents entre IE et FF.
Modifié par FoW (26 Nov 2007 - 14:35)

Je suis toujours en galère avec ce problème et comme vous pouvez le voir, le site est en production.

Je ne souhaite pas devoir refaire tout le design juste pour ça. Si quelqu'un avait un piste pour que je puisse continuer à chercher ça m'arrangerait bien.

Déjà je me concentrerai que sur explorer 7 et Mozilla car la plus part des autres navigateurs utilisent leurs moteurs.

Ensuite peu de secrets, le splus gros problèmes viennent du fait que les naigateurs ajoutent des marges mais pas tous de la même taille.

A toutes tes balises récuurentes div, p, br, h1, h2, h3, h4,h5,h6,li et ul tu appliques un margin et un padding à 0. Au moins avec celle-ci tu es tranquille. Si tu veux leur appliquer un style tu peux par la suite.

Fait très attention aux margin et aux paddings par la suite comme j'ai dis et sache qu'à certains endroits il te faudra faire un compromis entre ce que tu veux et ce que les navigateurs te donnent. Parfois on peut jouer avec le rendu innatendu d'un navigateur aussi.

Merci pour ta réponse mais c'est un peu trop général. Je viens du coup d'éditer le titre du sujet qui était lui même un peu trop général.
J'ai supprimé les références aux autres navigateurs.

J'ai des problèmes bien spécifiques, un qui est lié au traitement de la marge négative sous IE7 et là il me faudraait les conseil de quelqu'un assez pointu je pense. Pour l'autre problème j'ai l'impression que je me suis trompé quelques part mais je n'arrive pas à voir où.

J'ai toujours mon problème.

Il n'y a vraiment personne qui puisse m'aider,s'il vous plait.

Mon client va finir par s'impatienter.

Ripper Roo a écrit :
Déjà je me concentrerai que sur explorer 7 et Mozilla car la plus part des autres navigateurs utilisent leurs moteurs.

Attention à ne pas raconter n'importe quoi non plus…

Salut,

Sans toucher au code html, tu peux déjà essayer cette piste:

div#menu {
  background: #FDD008 url("../images/interface/entete.jpg") top center repeat-x;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
}

div#menu ul {
margin: 0;
padding: 0;
position: absolute;
bottom: -30px;
left: 60px;
font: 14px Verdana, sans-serif;
}

div#menu ul li {
  background: #FDD008 url("../images/interface/fond_li.jpg") bottom left no-repeat;
  float: left;
  list-style: none;
  padding-left: 20px;
  height: 30px;
}

div#menu a {
  background: transparent url("../images/interface/fond_a.jpg") bottom right no-repeat;
  display: block;
  border: none;
  color: #fff;
  font: bold 1.1em sans-serif;
  text-decoration: none;
  text-align: center;
  padding-right: 22px;
  padding-top: 0px;
  height: 30px;
}

div#menu a:link {
}

div#menu a:visited {
}

div#menu a:hover {
  color: #FDD008;
}

div#menu p {
position: absolute;
margin: 0;
padding: 0;
position: absolute;
bottom: -30px;
right: 20px;
color: #ff0000;
font-weight: bold;
font-size: 1.5em;
}

Tu places ton menu en fixed avec les dimensions de ton image de fond (le height et le ul de ton menu en position absolute sous ton image (bottom négatif de la hauteur de tes li... Ça devrait régler ce problème...
Modifié par ghost (02 Dec 2007 - 18:09)