5568 sujets

Sémantique web et HTML

[Résolu] Probleme de construction avec IE6

Bonjour a tous,

Je fait appel a vous car j'ai refais completement mon site,
et que je viens de voi a la derniere minute que ca marchais mal
au niveau du forum sous Internet Explorer 6.
(Sur tous les autres navigateurs existants, tout passe.)
Enfait le probleme, c'est que sous ie6, le forum apparais
en dessous du menu a gauche alors qu'il devrais être
a la même hauteur!
Je joins des images.

Merci d'avance de vos reponses.


Sous FireFox: (normal)
http://img152.imageshack.us/img152/4898/firefoxst1.jpg


Sous Internet Explorer 6: (probleme)
http://img403.imageshack.us/img403/1899/ieqe5.jpg
Modifié par Benji7790 (03 Dec 2007 - 00:16)
Je pense que dans un prmeier temps il faut que tu vérifie les margins et paddings top et bottom ainsi que tes floats.
Modérateur
Bonjour et bienvenue Benji7790, Smiley smile

Les images (seules) ne sont pas d'une grande utilité pour voler à ton secours. Un lien vers une page en ligne ou le code correspondant permettrait de mieux appréhender ton problème. Smiley cligne
Bonjour,

Pas pu trouver le lien vers le forum. J'ai par contre pu voir la page 404 qui a à priori la bonne interface, et qui passe globalement bien avec IE6 (en tout cas le centrage horizontal est bon).

...

Ah si, ai trouvé la bonne adresse manuellement.
Le problème vient essentiellement du fait que tu travailles avec un Doctype HTML 4.01 Transitional tronqué (sans adresse de la DTD), ce qui déclenche le mode Quirks dans les navigateurs.

Utiliser un doctype complet, par exemple:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
Oui mais le doctype sur la page du forump est justement donné par le forum!
Ce n'est pas moi qui l'ai fait j'ai juste modifié le header et le footer du forum,
sans toucher au doctype.

EDIT: J'ai mis ton doctype et ca ma recentré la page mais j'ai toujours
le probleme de forum décalé vers le bas!
Tu remarqueras que sous IE6 tu as un bloc div#corps trop large. C'est sans doute parce qu'un de ses enfants ou descendants est trop large, et le force à s'élargir (normalement, l'élément trop large devrait dépasser, mais c'est un bug d'IE). Reste à trouver le fautif...

Sinon, tu peux augmenter la marge de gauche de div#corps, pour voir si tu as toujours ce problème de passage à la ligne sous IE 6.
Heuuu ouais je vais essayer.
Je pense avoir compris ce que tu as dit c'est deja ca! Smiley lol
Modifié par Benji7790 (29 Nov 2007 - 18:35)
Ca n'a pas l'air de venir de la balise #corps car le menu du haut s'affiche tres bien et a la bonne place alors qu'il appartiens a cette balise.
Modifié par Benji7790 (29 Nov 2007 - 18:36)
Bonjour,

Pour la largeur trop importante de div#corps, il suffit de regarder le rendu dans IE: on remarque que div#pied_de_page a une largeur trop importante. Si on regarde le code CSS pour cet élément, on a:
#pied_de_page {
width: 65.17em;
max-width: 90%;
}

IE6 ne comprend pas max-width, et donc applique la largeur en EM (c'est quoi cette largeur d'ailleurs???). Si on fait le calcul qui va bien, pour une taille de texte par défaut de 16px et étant donné que body a un font-size de 80%, on obtient: 65.17 * 16 * 0.8 = 834.176px.

Je suppose qu'il faudra passer sur quelque chose de plus logique:
#pied_de_page {
width: 90%;
}


Pour les tableaux dans div#corps qui sont repoussé par le menu flottant de gauche (et en quelque sorte «passent à la ligne»...), j'ai supprimé tous les width="100%" placés dans le code HTML (et le CSS, ça sert à quoi? Smiley rolleyes ) et ça règle le problème pour IE6.
Pour les mesures en EM, ce n'est pas de moi c'est un pote qui les a fait.
Par contre j'ai essayé ton pied de page, ca me met un pied de page trop large!
et quels tableaux dans le corps? Smiley eek (c'est peut etre a cause du forum ca!)
Benji7790 a écrit :
Pour les mesures en EM, ce n'est pas de moi c'est un pote qui les a fait.

Engueuler le pote en question. Smiley lol

Benji7790 a écrit :
Par contre j'ai essayé ton pied de page, ca me met un pied de page trop large!

J'ai fait le test avec Firefox et IE6, ça passe très bien. Quel est le code que tu as essayé (styles complets de div#pied_de_page)?

Benji7790 a écrit :
et quels tableaux dans le corps? Smiley eek (c'est peut etre a cause du forum ca!)

Le forum te génère des tableaux avec attribut width (je parle ici de l'attribut HTML, pas de la propriété CSS) avec pour valeur "100%". Cf. le code source de ta page (là normalement je serais en droit de lever les yeux au ciel, hein... d'ailleurs, je vais le faire juste une seconde: Smiley rolleyes ).
Le forum utilisé a bien un système de templates qui permet d'influer là-dessus? Sinon j'avais testé la possibilité d'attribuer un overflow: hidden; à div#corps, mais ça n'est pas terrible pour l'accès au contenu si on agrandit un peu trop la taille du texte par exemple.
Florent V. a écrit :

Engueuler le pote en question. Smiley lol

Héhé j'y manquerais pas! ^^

Florent V. a écrit :

J'ai fait le test avec Firefox et IE6, ça passe très bien. Quel est le code que tu as essayé (styles complets de div#pied_de_page)?

#pied_de_page
{
   font: .89em Tahoma, Verdana, Arial, sans-serif;
   color: #aaa;
   width: 90%;
   margin: 0 auto;
   padding: 1.5em 1.72em;
   white-space: nowrap;
   text-align: center;
   background-image: url("images/motif.gif");
   background-repeat: repeat-x;
}


Florent V. a écrit :

Le forum te génère des tableaux avec attribut width (je parle ici de l'attribut HTML, pas de la propriété CSS) avec pour valeur "100%". Cf. le code source de ta page (là normalement je serais en droit de lever les yeux au ciel, hein... d'ailleurs, je vais le faire juste une seconde: Smiley rolleyes ).
Le forum utilisé a bien un système de templates qui permet d'influer là-dessus? Sinon j'avais testé la possibilité d'attribuer un overflow: hidden; à div#corps, mais ça n'est pas terrible pour l'accès au contenu si on agrandit un peu trop la taille du texte par exemple.

Et je ne peux pas supprimer car je ne sais pas ou ca se trouve!
Déja il y a l'index mais ca ne modifie que... l'index!

Smiley lol
Modifié par Florent V. (01 Dec 2007 - 20:17)
#pied_de_page
{
   width: 90%;
   margin: 0 auto;
   padding: 1.5em 1.72em;
}

Deux fois 1.72em ça peut faire dans les 40-60px. 90% plus 40 ou 60px ça peut être un peu juste...

Bref, soit tu vires carrément la largeur et tu te sers du padding latéral (pourquoi en EM?) pour éviter que ça colle sur les bords, soit tu vires le padding latéral, soit tu vires les deux et tu utilises un margin: 0 5%... enfin bref, tu t'arranges pour que ça ne déborde pas.

Tuyau utile: quand on n'a pas absolument besoin d'une largeur fixe, on n'utilisera pas de largeur fixe, et on se simplifiera la vie.

Benji7790 a écrit :
Et je ne peux pas supprimer car je ne sais pas ou ca se trouve!

Si tu ne peux pas supprimer ces attributs HTML de mise en forme, tu peux toujours les annuler via CSS (qui prend le pas sur les attributs de mise en forme... elle est pas belle, la vie? Smiley cligne ). Tu pourrais essayer ceci:
div#corps table {
width: auto;
}
Ouh pinaise!
Ca marche! Smiley eek
T'est un magicien mec! Smiley lol

Non vraiment, merci beaucoup, tu est le seul qui a reussi a surmonter mon probleme!
Ca marche perfect! ^^

Thank's a lot!
Benji7790 a écrit :
Ca marche! Smiley eek

Si ton problème est résolu, tu peux l'indiquer dans le titre de ton sujet sous la forme suivante: «[Résolu] Titre du sujet».
Pour modifier le titre d'un sujet, il faut éditer le premier message du sujet (en utilisant le bouton «Éditer» en haut à droite du message en question) et corriger le titre.
Re-bonjour.
Ca marchais bien,
jusqu'a ce que je passe au phpBB3.
Ton code ne marche plus pour phpBB3.
As-tu une solution de rechange?
Ou alors d'autres personnes?
Sujet clos
Aller à