[Résolu] Différence d'affichage entre IE et les autres.

Bonjour,

Mon site s'affiche différemment dans IE,
le footer n'apparaît pas,
une barre de scroll vertical permet certes de le visualiser,

alors que dans firefox et autres,
la page figure entièrement sans barre de scroll.

D'autre part, certaines pages nécessitant un scroll vertical,
se voient donc affublées d'un double scroll dans IE.

J'ai bien essayé de rechercher ce qui pouvait provoquer cette "anomalie",
problème de margin et padding interprétés de manière particulière par IE,
mais je ne réussis pas à trouver la solution.
Merci de m'aider.

Mon site :
http://perso.orange.fr/trotteurs-koant
Modifié par vivaldi (27 Sep 2006 - 21:16)

[modeTROLL='on']

c'est la base de ta css qui ne va pas du tout.

Quand je rétréci ma fenetre sous Firefox ton footer passe au milieu de l'écran au lieu de rester en bas.

Tu as choisi une mauvais solution.
De toute façon ton découpage est trè biarre. Exemple :

<div id="gauche-accueil">
  <p>
     <img class="top20" src="images/quinoa-ns.jpg" title="Quinoa Koant" alt="Quinoa Koant" height="430" width="430" />
<img class="img-left" src="http://pages.perso.wanadoo.fr/client/php/compteur.php?df=compteur1&amp;url=trotteurs-koant&amp;image=images/941_jaune350.gif" alt="compteur" />
  </p>
</div>

Pourquoi mettre une balise <p> ici?
Sinon tes attributs "alt" ne sont pas très explicites.

[modeTROLL='off']

Désolé je me suis acharné mais j'avais envi de me défoulé n'y voit rien de personnelle
Modifié par masseuro (26 Sep 2006 - 17:03)

Masseuro a dit :

a écrit :
c'est la base de ta css qui ne va pas du tout.

Ben, peut-être, mais ta réponse ne m'éclaire pas beaucoup.
J'aimerais comprendre ce qui provoque cette différence d'affichage,
J'ai bien mis les margins et paddings à 0,
mais il y a qq chose qui m'échappe.

Merci à ceux qui me permettront de progresser.

Re-

J'ai complètement dépouillé ma page index,
(les autres sont construites sur le même modèle)
et sous IE, le problème persiste,
voir ici :
http://perso.orange.fr/trotteurs-koant/page-mod3.html
où l'on constate toujours le défaut signalé sous IE dans mon 1er post,
à savoir,
footer non visible au premier abord,
présence de la barre de scroll vertical qui permet de voir ce footer,

le total height représente pourtant bien 100%
8(header)+ 10(bienvenue)+ 2(box1)+ 75(gauche-accueil et droite-accueil)+ 2(box1)+ 3(box2)

Que pourrais-je faire pour obtenir un affichage dans IE similaire à celui de firefox (par exemple) ?
Modifié par vivaldi (26 Sep 2006 - 21:35)

Salut Vivladi,

J'ai jeté un oeil à ton HTML tout à l'heure et je me posais la question : pourquoi utilises-tu autant de div ?!?
Sur ce billet, il est expliqué en quoi l'accumulation de div nuit à la sémantique...
Pense-y !

Par exemple, pour ton menu, tu utilisais un élément div qui lui était exclusivement réservé, or, une liste est par définition un élément de type block, ce qui signifie qu'elle peut recevoir des margin, padding et n'importe quelle autre spécificité que tu appliquerais à un div.

Avant de te lancer dans l'application de propriétés à tes éléments, je ne peux que te conseiller de construire une base HTML saine sur laquelle tout ton édifice reposera. Si elle est fragile, tu n'arriveras à rien !

C'est pourquoi, je te recommande vivement d'aller jeter un oeil à la galerie des mise en page CSS. Tu trouveras forcément une arborescence qui réponds à tes attentes, et ce... sans que tu n'aies trop de modifications à faire...

Bon courage !

Modifié par Cygnus (27 Sep 2006 - 09:23)

Cygnus, merci pour ta réponse.

Tu as dit :

a écrit :
pourquoi utilises-tu autant de div ?!?

C'est certainement parce que je ne domine pas suffisamment le sujet,
je ne suis qu'un modeste amateur qui essaie de "bidouiller" un site,
juste pour le plaisir,

mais j'aimerais tout de même comprendre pourquoi ma page dépouillée intitulée page-mod3.html,
visible par le lien figurant dans mon précédent post,
dépasse le cadre dans IE et nécessite un scroll.
Si quelqu'un pouvait m'éclairer, juste pour ma gouverne personnelle, je serais ravi.

tiens c'est marrant ça j'ai trouvé un traducteur quand je passe en mode troll!
merci Cygnus. Tu a très bien traduit ma pensée (et avec des liens en prime )

c'est quoi t'es honoraires?

masseuro a écrit :
merci Cygnus. Tu a très bien traduit ma pensée (et avec des liens en prime )
c'est quoi t'es honoraires?

... pas assez cher mon fils ...

vivaldi a écrit :
j'aimerais tout de même comprendre pourquoi ma page dépouillée intitulée page-mod3.html, visible par le lien figurant dans mon précédent post, dépasse le cadre dans IE et nécessite un scroll

... vive la FAQ ...

Cygnus, j'ai suivi ton conseil, je suis allé faire un tour dans la FAQ,
j'ai collé des font-size: 1px; et line-height: 1px;
dans #box1 et #box2 de faible height

Il y a une amélioration, le footer apparaît bien,
mais il subsiste un "poil" de scroll dans IE.

Voir cette page :
http://perso.orange.fr/trotteurs-koant/page-mod4.html
qui appelle la feuille de style modex.css

Qu'est-ce qui provoque ce reliquat de scroll dans IE ?

vivaldi a écrit :
Cygnus, j'ai suivi ton conseil, je suis allé faire un tour dans la FAQ, j'ai collé des font-size: 1px; et line-height: 1px;
dans #box1 et #box2 de faible height

Bon...
Tout d'abord, passe tes polices px en em.
Voici un billet sur le blog de Laurent Denis qui t'expliquera pourquoi il n'est pas judicieux de définir des polices en pixel.

Ensuite, je ne remarque aucun décalage ni scroll sous IE.
Par contre, je constate que tu as toujours autant de div. Es-tu sûr qu'ils sont bien tous nécessaires ?
J'ai un petit doute !
N'oublie pas que ton arborescence HTML doit servir ton contenu... et qu'elle doit y être adaptée !
N'as-tu trouvé aucune mise en page qui correspond à ce que tu cherches ?!?

Ah... et si la prochaine fois tu pouvais mettre ton code en page, ce serait cool...
Modifié par Cygnus (27 Sep 2006 - 12:07)

Merci pour ces infos,
je vais prendre le temps de lire ces docs,

Je pense que tu as raison,
la page-mod4.html ne nécessite plus de scroll,
mais pourquoi cette barre subsiste-t-elle ?
Y a-t-il un moyen de la faire disparaître ?
Cela m'épargnerait la double barre disgrâcieuse qui pollue certaines pages.

J'ai ceci dans mon code :

<!--[if IE]>
overflow-y: hidden;/*supprime le scroll vertical dans IE*/
<![endif]-->

mais ça ne semble pas fonctionner.
Modifié par vivaldi (27 Sep 2006 - 16:19)

Je ne peux rien te dire de plus que ce que je t'ai déjà dit :

Cygnus a écrit :
Tu as toujours autant de div.
Es-tu sûr qu'ils sont bien tous nécessaires ?
N'as-tu trouvé aucune mise en page qui correspond à ce que tu cherches ?!?

Et n'oublie pas de mettre ton code en forme !
Modifié par Cygnus (27 Sep 2006 - 13:26)

bonjour,

le probleme a la base semble aussi etre du au fait que tu superpose des section dimensionnée en pourcentage. Pour arrivé semble t-il a un total de 100%. Hors en usant de pourcentage , un calcul est fait par le navigateur pour redimensionné chaque element, IE ne calcuk surement pas les "arrondis" des resultat de la même façon , et a l'ai d'arrondir a la valeur superieur.

a écrit :
html,body {
height: 100%;/*620px;*/
width: 100%;
position: absolute;
<!--[if IE]>
overflow-y: hidden;/*supprime le scroll vertical dans IE*/
<![endif]-->
}

heu les commentaire conditionnel se place dans l'entete de la page html ...

http://forum.alsacreations.com/faq/#item53

qui donnerait plutot :

<!--[if IE]>
<style type="text/css" >
overflow-y: hidden;/*supprime le scroll vertical dans IE*/
</style>
<![endif]-->

en le plaçant juste avant </head>

++

Bonsoir,

Avec votre aide, j'ai résolu mes 2 problèmes d'affichage dans IE,

Le 1er étant l'overflow provoqué par IE dans les conditions décrites sur ce site ici :
http://forum.alsacreations.com/faq/#item77
Pour #box1, #box2 et #box3 de faible height, dans ma feuille de style, j'ai donc collé des :

font-size: 1px;
line-height: 1px;

Le 2ème étant la persistance d'une barre de scroll inutile,
puisque l'overflow a été corrigé ci-dessus,
la solution étant trouvée sur ce site ici (dernier post de ce fil rédigé par phoceen) :
http://forum.alsacreations.com/topic-2-15042-1-Comment-faire-disparatre-la-barre-de-dfilement-sous-IE-.html
J'ai donc ajouté ceci à html, body dans ma feuille de style,

html, body {
	overflow: auto;
	overflow-y: hidden;
}

Pour ce qui est de la remarque de gcyrillus :

a écrit :
le probleme a la base semble aussi etre du au fait que tu superpose des section dimensionnée en pourcentage. Pour arrivé semble t-il a un total de 100%. Hors en usant de pourcentage , un calcul est fait par le navigateur pour redimensionné chaque element, IE ne calcuk surement pas les "arrondis" des resultat de la même façon , et a l'ai d'arrondir a la valeur superieur.

Le dimensionnement en pourcentages de la hauteur de mes blocs ne semble pas poser de problème.

Quant à Cygnus :

a écrit :
Tu as toujours autant de div.
Es-tu sûr qu'ils sont bien tous nécessaires ?

Je pense qu'il a raison,
mais je ne souhaite pas tout chambouler,
craignant de me fourvoyer car je domine pas suffisamment les subtilités du code.

Merci à vous.