[résolu] FF vs IE

Bonjour,

j'ai créé une page avec des div pour gérer l'élasticité en largeur et afficher mon site en 100%.
Malheureusement, je rencontre de grosses différences d'affichage.
Ma page se décompose ainsi :
Bandeau en haut sur 100% de la largeur.
3 colonnes dessous :
menu - contenu - actu (avec le contenu qui doit s'étirer dans la largeur et les 2 autres colonnes de largeur fixe)
un pied de page sur 100% de la largeur

le tout est visible ici : http://www.13enforme.com/extras/cris/

Sous FF, l'affichage est à peu près propre mais les boites dans le bloc contenu ne s'allongent pas en largeur pour remplir la page.
Sous IE, les boites s'allongent vers la droite (mais ca bug dans le sens de la hauteur, mais c'est un autre probleme) mais la partie actu se trouve recalée en dessous !

J'aimerai au moins que l'affichage soit bon sous FF, et ensuite je travaillerai sur une feuille de style spécifique à IE...mais meme sous FF, je ne comprends pas pourquoi les blocs ne s'adaptent pas à la largeur de mon navigateur...

Si vous pouviez m'aider...cela fait plusieurs jours que je tente de comprendre les articles trouvés sur ce sujet sur internet sans succès

merci de votre aide

As tu recherché des gabarits de mise en page simple et analysé leur fonctionnement ?

Pour ce que tu recherche:

gauche - droite , en float avec largeur
puis :
centre
- dans le flux en marge pour venir se caler entre les deux , sans largeur .
- ou en activant / modifiant le layout/contexte de formatage sans marge , toujours sans largeur.

Le display:table; au lieu de la technique des flottants , n'est pas encore une piste a suivre.

GC
Modifié par gc-nomade (21 Jul 2009 - 21:31)

Bonjour et merci de ton aide,

effectivement, j'ai commencé par rechercher des gabarits et à les décortiquer et avec des exemples simples j'arrivais au résultat escompté, mais en enrichissant mon code cela n'a plus fonctionné.

Avec l'aide "Moust", j'ai réussi à avancer sur mes problemes, et le résultat est bien meilleur à présent :
http://www.13enforme.com/extras/cris/

En utilisant "overflow:hidden" et "position : relative" pour mes blocs de contenu, la partie actu n'est plus recalée à la ligne et mes contenus sont tous alignés par le bas sur mon footer.

mon bloc "contenu-gauche" est deja en float : left avec une largeur fixe
mon bloc "contenu-droite" est deja en float : right avec une largeur fixe
mon bloc "contenu-centre" n'a pas de largeur

par contre, je n'ai pas compris ce que tu veux dire par :

a écrit :

centre
- dans le flux en marge pour venir se caler entre les deux , sans largeur .
- ou en activant / modifiant le layout/contexte de formatage sans marge , toujours sans largeur.

Le display:table; au lieu de la technique des flottants , n'est pas encore une piste a suivre.

Pour info, pour faire cela je me suis basé sur l'article :
http://www.alsacreations.com/astuce/lire/64-comment-faire-une-bote-avec-des-bordures-en-images-ou-des-coins-arrondisnbsp.html
et notamment :
http://covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html

Il me reste 2 soucis :
- les boites du bloc "contenu-centre" ne s'allongent pas dans FF alors qu'elles s'allongent trop dans IE (elles recouvrent le bloc Actu, dans "contenu-droite")
- ces memes boites s'allongent vers le bas en faisant un cadre à bord arrondis parfaitement dans FF, mais pas du tout dans IE : elles sont coupés comme s'il n'y avait pas de ligne du bas pour ces cadres...

A force de lecture, j'ai compris ce que tu voulais dire par "dans le flux en marge pour venir se caler entre les deux , sans largeur".
merci pour cette piste de recherche car j'ai trouvé la solution à un des 2 problemes !

en fait j'avais :

#contenu-centre { 
    left:250px; 
    margin:5px; 
    position:absolute; 
} 

et donc pas de marge à droite !
j'ai donc rajouté right:316px;
et j'ai réglé un des 2 problemes car maintenant :

- les boites du bloc "contenu-centre" s'allongent dans FF et dans IE sans recouvrir le bloc Actu, dans "contenu-droite" : c'est parfait !

Il reste donc le 2e probleme :
- ces memes boites s'allongent vers le bas en faisant un cadre à bord arrondis parfaitement dans FF, mais pas du tout dans IE : elles sont coupés comme s'il n'y avait pas de ligne du bas pour ces cadres...

je continue mes recherches...si vous avez une idée...

Ok...merci pour ces précisions, je comprends mieux ce que tu voulais dire.
je continue mes recherches sur mon dernier soucis...

merci de ton aide en tout cas et du temps passé

Merci pour ton aide et pour ces précisions.
je vais détailler mon soucis dans un post indépendant, ce qui sera plus simple à comprendre pour tous
Modifié par jp.bond (22 Jul 2009 - 18:12)