[Résolu] Problème d'affichage sous IE7

[Sand33]

Bonsoir,

A quelques jours d'ouvrir ma boutique en ligne officiellement, on vient de me prévenir que l'affichage sur IE7, dès lors qu'on appelle une rubrique, est assez catastrophique...
Sur FF, IE8 et Safari, pas de souci par contre.

Je ne sais pas du tout comment règler ce gros bug...
Je joins une copie d'écran (en pièce jointe).
Mon site : www.lilot-educatif.com

Merci à tous ceux qui pourront m'aider à règler ce problème ! ;-)

[Atch]

Bonjour,

Essayez d'attribuer une hauteur à l'id "header" ligne 195 : height:170px;

#header {
float:left;
height:170px;
text-align:right;
width:71%;
}

V++

Atch

[Sand33]

Merci. Je viens de le faire...Le hic est que je n'ai pas IE7...mais IE8.
Si vous avez, vous, IE8, pouvez-vous regarder pour moi ce que çà donne ?
Merci beaucoup !

http://www.lilot-educatif.com/

[Atch]

Bon maintenant c'est bon pour le header , c'est juste que vous avez la colonne de droite qui se retrouve sous la gauche...

Edit : je viens de voir, vous n'avez rien modifié? du moins le header n'a toujours pas de hauteur d'attribué.

Atch

[jeckyl]

Salut,

Je viens épauler Atch sur le coup et vous conseiller d'utiliser http://ipinfo.info/netrenderer/ pour visualiser votre site sous différentes versions de IE

[Sand33]

@ Atch : merci pour votre aide.
Si, j'ai modifié, dans le global.css, la hauteur (170px) de mon header...exactement comme vous me l'aviez conseillée.
Que puis-je faire d'autre ? C'est sûr que la colonne de droite sur celle de gauche ne peut pas être acceptable...
Quelle galère, ces rendus de navigateurs différents !!

@ Jeckyl : je vais aller voir çà de ce pas. Merci.

[Atch]

ah là je le vois mieux, mais c'est pas encore ça...

Essayez de mettre la hauteur à 180px eu lieu de 170px

En faite, la colonne central, étant un bock flottant, vient se coller contre votre logo (image) qui est plus large que la colonne de gauche.

V++

Atch

[Sand33]

Oh oh...mais c'est carrément catastrophique, ce rendu sous IE7 de mon site!! Je n'ai même plus mon diaporama et aucun de mes blocs de droite!!

Fort utile, ce netrenderer que je ne connaissais pas...! Merci.

Merci de m'aider car là, je galère totalement et ne sais nullement que faire ! :red:

[Sand33]

OK, j'ai mis à 180px la hauteur du header.
Mais maintenant, mon diaporama, cependant réapparu, ne fonctionne plus...et je ne parviens pas à visualiser l'ensemble de mes blocs sur les colonnes de droite et de gauche (il me manque tout le bas). Pas encore çà mais c'est mieux...
Merci.

[jeckyl]

Je n'ai même plus mon diaporama et aucun de mes blocs de droite!!

Attention, le rendu ne prend pas en compte Flash, donc votre diaporama et la colone de gauche passe sous le reste car il n'ya pas assez d'espace pour tout contenir en largeur, il faut donc modifier les marges entres votre colonne de gauche, le centre et la droite.

[Atch]

Oh oh...mais c'est carrément catastrophique, ce rendu sous IE7 de mon site!! Je n'ai même plus mon diaporama et aucun de mes blocs de droite!!

Fort utile, ce netrenderer que je ne connaissais pas...! Merci.

Merci de m'aider car là, je galère totalement et ne sais nullement que faire ! :red:

ça y est c'est mieux, la colonne de droite a retrouvé sa place

(un ptit [résolu] dans le titre, siouplé)

Edit : Par contre, votre menu fonctionne sous IE mais pas sur mon FF, mais le reste fonctionne ou j'ai loupé un bloc

Bonne continuation.

V++

Atch

[Sand33]

Ah non, ce n'est pas résolu du tout !
Essayez de naviguer dans mon site sous IE7...c'est totalement impossible; on a la main sous rien ! Non, c'est même pire qu'avant. Je ne peux pas rester comme çà...

[jeckyl]

Pour pouvoir faire une visualisation des pages sous une ancienne version d'IE il suffit d'installer http://www.debugbar.com/download.php qui permet après de choisir de consulter vos site en IE7 IE6 ou autre.

Cela vous permet de contrôler l'affichage sur IE qui est le navigateur le plus pourri de tous les navigateurs mais qui malheureusement est le plus répandu, donc on est obligé de travailler avec.

[jeckyl]

Ok, sinon, tu passes par http://ietester.softonic.fr/ pour installer le testeur

[Atch]

Ah non, ce n'est pas résolu du tout !
Essayez de naviguer dans mon site sous IE7...c'est totalement impossible; on a la main sous rien ! Non, c'est même pire qu'avant. Je ne peux pas rester comme çà...

Par rapport à la question intiale, oui

mais reprenons tout dans l'ordre...

Votre header est a reprendre en parti ....

Voici comment il se compose :

D'une balise

qui fait 21% de largeur et d'une balise div "header" qui fait 79%...

Dans h1 vous mettez une image (logo) qui fait 100% de la largeur de votre site dans un bloc qui fait 21%
déjà là, ça fonctionne, mais c'est pas le bon choix niveau compatibilité et interprétation des différents
navigateurs...

ensuite vous utilisez un système de mapping pour mettre vos 3 liens toujours dans la balise h1 et là FF n'arrive plus à l'intégrer correctement...

Seul le premier bouton fonctionne car il se trouve dans les 29% du header, les autres sortent du cadre et donc ne fonctionnent pas. (c'est mon interprétation)

Je pense qu'il faut repenser votre header différement.

V++

Atch

[Sand33]

Ok. Merci pour ces précises explications.
Mais à deux jours d'ouvrir ma boutique (après 2 mois acharnés de boulot sur ce site), c'est assez inimaginable pour moi...
Mais vous avez raison...Débutante, j'ai sans doute un peu trop bidouillé et le résultat n'est pas sain...

Selon vous, pas d'autre solution pour règler ce souci des deux boutons du menu horizontal qui ont perdu leurs liens sous FF (qui est quand-même un navigateur prisé et bien utilisé...derrière IE ) ?

Merci. ;-)

[Yoya]

qui est quand-même un navigateur prisé et bien utilisé…derrière IE

... devant IE (46.3% pour FF, 14.3% IE8 et 11.7% IE7)

Cdlt,
Pierre.

[jeckyl]

Je ne sais pas ce que va dire Atch, mais personnellement je reprendrais l'image en utilisant le fond comme background de la div header et réintégrer les images du lien principal et des menu sous forme d'image.

[Sand33]

Bah, je n'ai pas tout suivi, là...

Perso, j'ai conçu ce bandeau sous Photoshop en un seul tenant, puis créé des zones réactives avec Dreamweaver, puis mis mes liens dans le header.tpl.

Alors, qu'aurais-je dû faire en définitive ?
Merci pour vos conseils. :-)

[Atch]

Jeckyl vous a mis sur va voie..

edit : mettez 60% à la largeur de h1 et 40% a header...Cela va regler votre probleme de bouton malgré que cela ne me plaise pas ( map dans H1)


V++

atch

[Sand33]

Merci infiniment à tous les deux!
Tout fonctionne parfaitement désormais...a priori, sur tous les navigateurs.

Atch : le message est bien reçu...Dès que le rythme sera plus calme, je reprendrai ce header, de manière plus saine.

Merci et bon week-end ! :-)