Problème d'affichage sous IE<7

Bonjour,

J'ai créé un petit site.
Récemment, j'ai fait une refonte du site en passant d'un site avec frames à un site sans frame.
Il s'affiche correctement sous IE7, Firefox, Opera toutes résolutions confondues.
Par contre, sous IE<6, j'ai un petit problème. Le dégradé du "menu" à gauche et du "haut" ne s’affichent pas jusqu’en bas. Je n'ai pas IE<6, c'est un ami qui m'a montré le rendu.
J'ai bien utilisé la dégradation IE6 en créant une deuxième feuille de style pour IE<6.
Alors, je ne comprends pas d'où vient le problème.
Si vous en avez une idée, merci de m'aiguiller.
Modifié par MissGG (05 Mar 2007 - 14:31)

Bonjour,

La bonne pratique pour l'utilisation des commentaires conditionnels pour les CSS n'est pas de créer une feuille de style alternative pour IE (ou certaines versions d'IE), mais d'appliquer des correctifs.

Concrètement, IE6 chargera la même feuille de style que les autres navigateurs, mais également une feuille de style supplémentaire comportant une, deux, trois, cinq instructions qui viennent « corriger » des instructions de la feuille de style principale.

J'ai déjà utilisé une dizaine de correctifs (sélecteur + une ou deux propriété(s) à chaque fois) pour le rendu sous IE6 d'un site, mais c'était un peu excessif, j'aurais pu faire moins.

Corrige donc déjà cela, et teste voir ce que ça donne.
Pour tester avec IE6 :
http://tredosoft.com/Multiple_IE

Bonjour,

Ralala, je suis rouge de honte , j'crois bien que je t'avais mal compris. J'ai créé une feuille de style entière pour IE<6. Ben, je creuse mon trou et je me cache dedans.

Bref, j'ai refait ma feuille de tyle pour IE<6. La voici :

/*HAUT */
	div#entete {
		background: url(images/haut.png) repeat-x left top;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 84px;
}
/*MENU */
	div#menu {
		background: #000000 url(images/gauche.png) repeat-y left top;
		position: absolute;
		top: 20px;
		left:0;
		width: 142px;
		height: 100%;
	}
.ban{
	position: absolute;
}
div#contenu {
	font-family: "verdana", sans-serif;
	height: 100%;
	width: 580px;
	margin: 0px 40px 0px 20px;
}

Je te remercie beaucoup pour le lien des IE, ça me permet de voir tout de suite ce qui va pas, et qui sait de corriger l'erreur.

Verdict (sachant que je suis en 1024*768):
IE6 : Le dégradé du "menu" à gauche et du "haut" ne s’affichent pas jusqu’en bas.
IE5.5 : Le dégradé du "haut" ne s’affiche pas jusqu’en bas.
IE5.01 : Le dégradé du "haut" ne s’affiche pas jusqu’en bas.
IE4.01 : Impossible d'ouvrir le site.
IE3.0 : C'est du n'importe quoi, certains éléments s'affichent, mais c'est à croire que je n'ai pas de feuilles de styles. En plus, ça veut installer des cookies.

Donc voilà. J'en suis malheureusement au même point.

Salut

MissGG a écrit :
IE5.5 : Le dégradé du "haut" ne s’affiche pas jusqu’en bas.
IE5.01 : Le dégradé du "haut" ne s’affiche pas jusqu’en bas.
IE4.01 : Impossible d'ouvrir le site.
IE3.0 : C'est du n'importe quoi, certains éléments s'affichent, mais c'est à croire que je n'ai pas de feuilles de styles. En plus, ça veut installer des cookies.

En même temps, ces navigateurs-là ne sont plus utilisés que par très très peu d'internautes ... Pas la peine de te casser la tête dessus

Pour IE5.5, ça vaut peut-être le coup, il n'y a souvent pas trop de choses à changer par rapport à IE6. Mais IE 3, 4 & 5.0 ...

Honnêtement IE<5, je m'en fous, les gens n'ont qu'à faire leur mise à jour. Car c'est la préhistoire.
Mais, comme chacun sait, tout le monde n'a pas forcément la license, et beaucoup sont obligés de conserver IE5 ou 6, donc j'aimerai que mon site s'affiche correctement sur ceux-ci.
Et je comprends pas c'qui va pas.

Bon, on va faire au plus simple :

- IE 3 et IE 4, on s'en fiche royalement.
- IE 5.0 et IE 5.5, on peut se permettre de les « négliger », si on n'a pas de contrainte particulières. Bon, c'est mieux si les contenus sont globalement accessibles, mais se mettre martel en tête pour avoir un rendu parfait avec un navigateur ne dépassant pas les 1% de parts de marché, ne respectant pas les standards et condamné à disparaitre à relativement brève échéance... faudrait être un peu maso.
- Ta feuille de style de correctifs pour IE6 me semble encore un peu chargée. De quoi as-tu vraiment besoin, à part d'un height: 100% sur le conteneur global ? (et qu'est-ce que ça donne avec une feuille de style réduite à cette unique instruction ?)

Voici la feuille de style IE<6 réduite à son strict minimum :

div#entete {
	position: absolute;
}
div#menu {
	position: absolute;
	height: 100%;
}
.ban{
	position: absolute;
}
div#contenu {
	height: 100%;
	width: 580px;
}

Toujours les mêmes problèmes d'affichage.
Bref, ça m'embête un peu pour IE5.5 et 6 car je connais malheureusement pas mal de gens qui l'utilisent encore, mais bon, si des experts des standards me conseille d'abandonner cette lubie, j'vais abandonner.
J'vais chercher encore un peu, car maintenant, j'me demande si le problème vient du css. Et si j'trouve pas, je mettrai [Résolu] à mon sujet.

J'crois savoir d'où vient mon problème.
En style global, j'ai :

div#contenu {
min-width: 580px;
}

En style IE<6 :

div#contenu {
width: 580px;
}

580px étant la largeur minimale pour 800*600.
J'ai regardé le tuto "Faire un site pour toutes les résolutions" mais je ne comprends pas exactement comment adapter le code.
Est-ce ? :

<!--[if lt IE 6]>
<style type="text/css">
div {
width:expression(document.body.clientWidth < 580? "580px": "auto" );
}
</style>
<![endif]-->

Bonjour à tous,

J'ai remplacé le "min-width: 580 px", par son code alternatif javascript sous la feuille de style IE<6, et même si j'ai un meilleur affichage du texte sous IE (justifié à la fenêtre), ça ne change pas mon problème de dégradés.
Donc, même problème, les dégradés ne vont pas jusqu'au bout de la fenêtre, ce qui fait que j'ai fond noir non désiré en haut à droite et dans le menu en bas.
Vous n'avez pas une petite idée du problème svp?

div#contenu {
	width:expression(document.body.clientWidth < 580? "580px": "auto" );
}

Cette ligne signifie que si la largeur de l'élément body est inférieure à 580px (ce qui est tout de même rarement le cas...), on génère la valeur 580px pour la propriété width de l'élément div#contenu.

Ça risque pas trop d'être utile, en fait...

Quel était le but de la manoeuvre, d'ailleurs ? Pourquoi utiliser une largeur minimale pour ce bloc ?


En jetant un oeil à la feuille de style générale :

body{
	height: 100%;
	margin: 84px 0px 0px 142px;
	padding: 0;
}

Il te manque un height: 100% sur l'élément html.

Par ailleurs, j'ai un gros doute sur l'intérêt de ces marges sur l'élément body. Internet Explorer a du mal à gérer les styles sur body, et il serait plus prudent de laisser marges et padding à 0 pour cet élément, et d'appliquer des marges par la suite aux éléments qui le nécessitent.


Enfin, je remarque que cette feuille de style est inutilement surchargée, avec des répétitions d'instructions qui seront de toute façon héritées.

Par exempe ceci :

/*LIENS */
	a:link{
		font-family: "verdana", sans-serif;
		color: #FFFFFF;
		font-size: 0.9em;
		font-weight: normal;
		text-decoration: underline;
		font-style: normal;
	}
	a:visited{
		font-family: "verdana", sans-serif;
		color: #CCFFFF;
		font-size: 0.9em;
		font-weight: normal;
		text-decoration: underline;
		font-style: normal;
	}
	a:hover{
		font-family: "verdana", sans-serif;
		color: #666666;
		font-size: 0.9em;
		font-weight: normal;
		text-decoration: underline overline;
		font-style: normal;
	}
	a:active{
		font-family: "verdana", sans-serif;
		color: #3FDCC4;
		font-size: 0.9em;
		font-weight: normal;
		text-decoration: underline;
		font-style: normal;
	}
	a.liens:link{
		font-family: "verdana", sans-serif;
		color: #FFFFFF;
		font-size: 0.9em;
		font-weight: normal;
		text-decoration: none;
		font-style: normal;
	}
	a.liens:visited{
		font-family: "verdana", sans-serif;
		color: #CCFFFF;
		font-size: 0.9em;
		font-weight: normal;
		text-decoration: none;
		font-style: normal;
	}
	a.liens:hover{
		font-family: "verdana", sans-serif;
		color: #3FDCC4;
		font-size: 0.9em;
		font-weight: normal;
		text-decoration: none;
		font-style: normal;
	}
	a.liens:active{
		font-family: "verdana", sans-serif;
		color: #3FDCC4;
		font-size: 0.9em;
		font-weight: normal;
		text-decoration: none;
		font-style: normal;
	}
	a.anim:link{
		font-family: "verdana", sans-serif;
		color: #FFFFFF;
		font-size: 1em;
		font-weight: normal;
		text-decoration: none;
		font-style: normal;
		text-align: center;
	}
	a.anim:visited{
		font-family: "verdana", sans-serif;
		color: #CCFFFF;
		font-size: 1em;
		font-weight: normal;
		text-decoration: none;
		font-style: normal;
		text-align: center;
	}
	a.anim:hover{
		font-family: "verdana", sans-serif;
		color: #3FDCC4;
		font-size: 1em;
		font-weight: normal;
		text-decoration: none;
		font-style: normal;
		text-align: center;
	}
	a.anim:active{
		font-family: "verdana", sans-serif;
		color: #3FDCC4;
		font-size: 1em;
		font-weight: normal;
		text-decoration: none;
		font-style: normal;
		text-align: center;
	}
	a.page:link{
		font-family: "verdana", sans-serif;
		color: #FFFFFF;
		font-size: 0.7em;
		font-weight: normal;
		text-align: center;
		text-decoration: underline;
		vertical-align: bottom;
		font-style: normal;
		width: 100%;
	}	
	a.page:visited{
		font-family: "verdana", sans-serif;
		color: #CCFFFF;
		font-size: 0.7em;
		font-weight: normal;
		text-align: center;
		text-decoration: underline;
		vertical-align: bottom;
		font-style: normal;
		width: 100%;
	}
	a.page:hover{
		font-family: "verdana", sans-serif;
		color: #3FDCC4;
		font-size: 0.7em;
		font-weight: normal;
		text-align: center;
		text-decoration: underline overline;
		vertical-align: bottom;
		font-style: normal;
		width: 100%;
	}	
	a.page:active{
		font-family: "verdana", sans-serif;
		color: #3FDCC4;
		font-size: 0.7em;
		font-weight: normal;
		text-align: center;
		text-decoration: underline;
		vertical-align: bottom;
		font-style: normal;
		width: 100%;
	}

Peut être simplifié ainsi :

/*LIENS */
	a {
		font-family: "Verdana", sans-serif;
		color: white;
		font-size: 0.9em;
		font-weight: normal;
		text-decoration: underline;
		font-style: normal;
	}
	a:visited {
		color: #cff;
	}
	a:hover {
		color: #666;
		text-decoration: underline overline;
	}
	a:active {
		color: #3FDCC4;
		text-decoration: underline;
	}
	a.liens {
		text-decoration: none;
	}
	a.liens:hover {
		color: #3FDCC4;
	}
	a.anim {
		font-size: 1em;
		text-decoration: none;
		text-align: center;
	}
	a.anim:hover {
		color: #3FDCC4;
	}
	a.page {
		font-size: 0.7em;
		text-align: center;
		vertical-align: bottom;
		width: 100%; /* à priori inutile sans [i]display: block[/i] */
	}
	a.page:hover{
		color: #3FDCC4;
		text-decoration: underline overline;
	}	
	a.page:active{
		color: #3FDCC4;
	}

Ce qui est tout de même plus court...
(Note : en faisant le ménage, j'ai peut-être oublié une propriété...)
Modifié par Florent V. (05 Feb 2007 - 14:02)

Bonjour Florent V.,

Ben, concernant le min-width, un ami ne pouvait voir le site sans scrollbar horizontal. Depuis que j'ai mis ce code, le texte est justifié chez lui. C'était juste ça le but de la manoeuvre.
Qu'appelles-tu l'élément html?
J'vais essayer de mettre les margin dans le div#contenu au lieu du body et j'te dis c'qu'il en est.

Scuse, on s'est croisé, j'vais voir pour les liens

J'y suis presque.
J'ai modifié mon code comme tu me l'as conseillé.
La css du contenu devient :

div#contenu {
	font-family: "verdana", sans-serif;
	min-height: 100%;
	min-width: 580px;
	margin: 84px 40px 0px 162px;
}

et celle du body :

body{
	background: #000000 url(images/fond.png) fixed no-repeat center center;
	height: 100%;
	width: 100%;
	padding:0;
	margin:0;
}

Pour IE<6, j'ai juste modifié fixed en absolute.
En rajoutant le width: 100% dans le body, ça s'affiche presque bien sous IE<6, c'est à dire que quand on ouvre la fenêtre, on voit tout les dégradés.
Ca se complique quand il y a une scrollbar verticale, car ce qui se situe en-dessous n'a plus le dégradé du menu, même en actualisant. Je ne sais pas pourquoi.
Est-ce que les padding et margin 0 ont une importance dans le body?
Y-at-il une possibilité d'afficher le dégradé du menu en-dessous de la scrollbar?

En ce qui concerne les liens, j'ai dé-surcharger la feuille de style, peut-on faire de même avec les H1... et les paragraphes par exemple?

Merci d'avance et merci pour tout.

MissGG a écrit :
Qu'appelles-tu l'élément html?

L'élément html, ce sont les balises <html> et </html>, et tout ce qui se trouve entre les deux.

En CSS, on peut passer des propriétés à l'élément HTML (ce qu'on fait rarement, à vrai dire) de la manière suivante :

html {
	height: 100%;
}

MissGG a écrit :
La css du contenu devient :

div#contenu {
	font-family: "verdana", sans-serif;
	min-height: 100%;
	min-width: 580px;
	margin: 84px 40px 0px 162px;
}

Une hauteur minimale de 100%, à laquelle on rajoute une marge de 84px en haut... ça fait 100% + 84px, soit plus de 100%. Tu auras systématiquement une barre de défilement, même avec un contenu court.

Donner un hauteur de 100% à un élément, ça demande pas mal de gestion fine et de pièges à éviter. Cf. le tutoriel suivant :
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
(en zappant l'étape n°2, qui n'est pas utile ici).

a écrit :
Est-ce que les padding et margin 0 ont une importance dans le body?

Oui. L'élément body a un retrait par défaut de 8px, qui correspond à une marge pour certains navigateurs, et à un padding pour d'autres. Tes images de fond ne peuvent pas toucher les bords de la fenêtre si tu conserves ce retrait par défaut.

a écrit :
En ce qui concerne les liens, j'ai dé-surcharger la feuille de style, peut-on faire de même avec les H1... et les paragraphes par exemple?

En prenant un cours de CSS ?
Plus sérieusement, un certain nombre de propriétés sont hérités et passent du bloc auquel elles sont appliquées à ses enfants et descendants. C'est le cas des propriétés de mise en forme du texte, par exemple. Si tu veux du texte en blanc et en Verdana pour le plupart des textes sur tes pages, tu fais comme ça :

body {
	background: black;
	color: white;
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
}

Et voilà.
(Au passage, j'indique une famille de polices plutôt cohérente, avec des polices alternatives au cas où l'utilisateur ne dispose pas de Verdana.)

Bonjour Florent V. et bonjour à tous,

Merci de m'avoir expliqué ce qu'est l'élément html, loool . J'avoue que je ne connais pas les termes usités de ce que je connais pourtant.
Donc, pour l'élément html, je l'ai mis avec le body, ce qui donne :

html, body{
	background: #000000 url(images/fond.png) fixed no-repeat center center;
	color: #3FDCC4;
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

Pour le div#contenu, j'ai purement et simplement viré le min-height 100% et le height pr IE<6.

Pour le padding et margin 0 dans le body, je m'en suis apreçu en testant sans.

Merci pour le cours de css . Ben, je ne te cache pas que j'ai appris sur le tas, ça se voit . Et ça parait sûrement tellement évidemment pour les avertis que certaines propriétés sont héritées, que moi, j'ai vu cette info nulle part et ne me suis jamais penché sur la question, c'était évident pour moi que fallait tout écrire même si je trouvais ça un peu barbant de me répéter. Donc, voilà, j'ai fait un peu de ménage.

J'ai adopté ta famille de style au passage.

Problème : Malgré tous ces changements, j'ai toujours les mêmes problèmes d'affichage : Le dégradé du menu ne va pas jusqu'en bas quand il y a une scrollbar. Quoi faire?

Nouveau problème : La page "Concentr'", je n'arrive pas à la fixer en bas de page sous IE<6 et elle a une largeur qui n'est pas automatique. J'ai fait une feuille de style à part exprès pour la page "Concentr'" (donc 2, puisque une sous IE<6). J'ai essayé plein de trucs mais rien ne marche. Une petite idée?

Bonsoir à tous,

Apparemment, je ne suis pas la seule à sécher sur le problème.
Toujours d'actualité si vous avez des idées.
Modifié par MissGG (15 Feb 2007 - 19:10)

Bonsoir à tous,

Désolé, mais un petit up s'impose, je n'ai toujours pas trouvé de solution.
Si quelqu'un peut m'aider...

Bonjour à tous,

J'ai toujours le même problème sous IE<7, j'ai vraiment besoin de votre aide...
Vous pouvez visualiser mon site en cliquant sur le "www", mais si vous avez besoin que je vous montre quelques codes précis, y'a pas de souci.

a écrit :
Le dégradé du menu ne va pas jusqu'en bas quand il y a une scrollbar. Quoi faire?

PS: pas de problème sur l'index car il n'y a pas de menu déroulant. Il faut regarder la page discussion par exemple.

a écrit :
La page "Concentr'", je n'arrive pas à la fixer en bas de page sous IE<7 et elle a une largeur qui n'est pas automatique. J'ai fait une feuille de style à part exprès pour la page "Concentr'" (donc 2, puisque une sous IE<6). J'ai essayé plein de trucs mais rien ne marche. Une petite idée? smile

Pour cette page, je veux juste fixer la partie rassemblements en bas de page. Sous IE7 ou 1 autres navigateur, elle reste en bas de page même en déplaçant la scrollbar, ce que je veux. Comme c'est impossible sous IE<7 car la position fixed n'existe pas, je souhaite qu'elle soit tout en bas.

Si vous trouvez la solution, je vous devrais un grand MERCI...

Bonjour à tous,

J'ai refait le design de mon site récemment (cliquez sur www pour le voir), et je m'aperçois que les deux points problématiques cités dans le message ci-dessus existent toujours pour iE<6.
1. Le dégradé marron du menu ne va pas jusqu'en bas quand il y a une scrollbar.
2. Je n'arrive pas à fixer le footer en bas de page dans la page Concentr', car quand il y a un menu déroulant, elle reste figée au milieu de la page. De plus, elle est trop large. (PS: je n'ai maintenant que 2 feuilles de style dont une pour IE<6)

Le mieux pour se faire une idée est de regarder la page Concentr'. C'est horrible.

A ces 2 points non résolus viennent s'ajouter d'autres problèmes.
3.Le menu est décalé à droite (Je pense que c'est dû au fait que c'est une liste)
4. Il y a des différences de couleurs entre le header et le contenu, et entre la marron global et celui du footer de la page Concentr', alors que les codes de couleurs sont les mêmes. Problème de superposition?

Donc, voilà, j'ai cherché longtemps, j'ai cherché partout. Et je ne comprends pas.
Est-ce impossible?
Voilà où j'en suis.