Bug en CSS

[Mister_Pingouin]

bonjour tout le monde !

bon alors voila, je viens de trouver une différence (qui n'est pas benigne) entre Mozilla et IE, qui me pose un gros probleme.

je vous explique mon cas :

alors j'ai un site qui possede 2 rangées de menus (une a droite, une a gauche, et la page incluse au centre)

ces menus sont, selon les pages, plus longs que la page incluse, ou moins longs.

Lorsque le texte est plus long que les menus, la page s'affiche normalement...

Mais si je reduis le texte en ne laissant plus qu'une phrase dans la page incluse, les menus "debordent" du cadre...

J'ai donc eu l'idée de mettre une hauteur minimale pour le "div conteneur page" et le "div page incluse".

Sur IE, la page s'affiche nikel, meme si le texte est plus long que la longueur indiquée, le div s'aggrandit, ainsi meme lorsque le texte est trop court il reste bloqué à sa hauteur "height".

MAIS sur mozilla firefox, c'est le texte qui deborde cette fois ci !!!!

J'en ai donc conclu cela :

- IE ne tient compte du "height" que si la taille du div est inferieure ou egale à la valeur. Il ajuste le div si le contenu depasse cette valeur.

- Mozilla lui reste fidele au "height" : si le contenu est plus grand, il depasse dans le vide...

Alors je suis embêté...

Soit je fais une croix sur les utilisateurs de mozilla qui ne liront pas mes articles si le contenu est superieur à 200px :/

Soit j'enleve les "height" et je m'engage à faire toutes mes pages incluses d'une hauteur superieure aux menus afin de ne pas avoir de menus qui "depassent" :/

Si un pro du Css passe par la, aidez moi je vous en supplie !!!!

j'ai pas envie de bannir les utilisateurs de mozilla, etant moi meme un utilisateur temporaire :/

Alors voila tout les modeles de mises en pages que j'ai testé jusqu'à present, comme vous le remarquerez aucun ne convient pour les 2 navigateurs en même temps... Je ne pense pas que ce soit dans la philosophie w3c de faire un choix entre 2 navigateurs ?!

N'existe t-il donc aucune solution ??

Page d'index : height defini + texte long

Page d'index : height defini + texte court

Page d'index : min-height defini + texte long

Page d'index : min-height defini + texte court

Page d'index : height defini + min-height defini + texte long

Page d'index : height defini + min-height defini + texte court

Page d'index : height non-defini + min-height non-defini + texte long

Page d'index : height non-defini + min-height non-defini + texte court

Page d'index : height non-defini + min-height non-defini + clear:both dans pied de page + texte long

Page d'index : height non-defini + min-height non-defini + clear:both dans pied de page + texte court

Voila, je n'ai pas refait d'autres mises en page avec le clear:both puisque le fait de mentionner height ou min-height ne change rien :/

Peut etre existe-il une autre solution, mais jusque la je n'ai pas trouvé...

aidez moi s'il vous plait jvai devenir dingue :/

merci d'avance

[Nudrema]

Pour l'histoire du height, cette propriété définit une hauteur. Pas une hauteur minimale ni maximale, une hauteur, point barre. Cependant, IE interprète cette propriété comme une hauteur minimale, et agrandit le cadre si elle n'est pas suffisante. Ce comportement est équivalent à ce que fait la propriété min-height dans les autres navigateurs conformes. Ce n'est donc pas le w3c qui est en cause (la spec est très claire sur ces deux propriétés) mais l'implémentation assez fantaisiste des CSS dans IE.

(En gros, IE n'implémente pas la propriété CSS height, mais implémente min-height sous le nom de height, c'est un peu bizarre comme ça mais bon)

L'astuce classique est donc de faire ceci :

#truc { height: 200px; }
html>body #truc { height:auto; min-height:200px; }

J'espère que ceci pourra t'aider.

PS. Le html>body, c'est un "hack" pour masquer une règle CSS à IE (qui ne gère pas le sélecteur >), on en parle brièvement dans un article de Laurent Denis sur Openweb : Gérer les modèles de boîtes CSS standard et Microsoft

Modifié 14 Juin 2004 par Nudrema

[Mister_Pingouin]

salut

merci de ta reponse, mais je ne pense pas avoir tout compris ton code...

(desolé je suis debutant en css )

pourquoi est ce que tu definis 2 fois #truc ?

#truc { height: 200px; }

html>body #truc { height:auto; min-height:200px; }

j'ai essayé en faisant ca :

.conteneur_page {
	border-top: #909FB0 1px solid;
	border-right: #909FB0 1px solid;
	border-left: #909FB0 1px solid;
	border-bottom: #909FB0 1px dashed;
	background-color:#FAFCFE;
	margin-left: 15px;
	margin-right: 15px;
	height:auto; 
	min-height:200px;
	}

.pageinclude {
	margin-left: 190px;
	margin-right: 190px;
	border-left: #909FB0 1px solid;
	border-right: #909FB0 1px solid;
	background-color: #FAFCFE;
	height:auto; 
	min-height:200px;
	}

Mais encore une fois Mozilla interprete bien mais IE fait deborder les menus et ne tient pas compte du min-height.

C'etait ce que tu voulais que je fasse ou alors est ce qu'il fallait que je tienne compte du html>body #truc ?

je le place aussi dans la feuille de style ?

merci d'avance

EDIT : merci je viens d'essayer en rajoutant

html>body #conteneur_page { height:auto; min-height:200px; }
html>body #pageinclude { height:auto; min-height:200px; }

en dessous de chaque et en les changeant en "id" et ca marche à la perfection

merci encore et bonne continuation

Modifié 14 Juin 2004 par Mister_Pingouin

[shangailily]

Bonjour,

Ce bout de script m'intéresse mais je n'ai ps réussi à le faire fonctionner.

est-ce que vous pouvez me montrer le code dans le code src d'une page? Je ss sure que cela intéressera d'autres personnes.

En faisant

<head>

</head>

<body>

</body>

Merci !

[Denis]

La raison pour laquelle Nudrema a dédoublé l'identificateur unique "truc", c'est pour s'adresser spécifiquement à tes deux navigateurs :

#truc { height: 200px; }
html>body #truc { height:auto; min-height:200px; }

En premier lieu, il définit #truc de manière générale pour tous les agents utilisateurs capables de supporter CSS, avec une valeur optimisée pour répondre aux attentes de MSIE. Par la suite, il répète cette valeur de manière contextuelle en créeant une relation directe entre body et html et il lui passe une autre valeur pour height (que MSIE ne peut pas comprendre, mais que Mozilla pige très bien), en plus de lui passer un min-height qui ne serait pas non plus compris par MSIE.

Voilà. C'est une pure question de syntaxe et de tri en fonction de la capacité de support.

[shangailily]

Je demandais qu'on affiche le code:

est-ce qu'il faut écrire de la façon suivante?

<head>
<style>
#truc { height: 200px; }
html>body #truc { height:auto; min-height:200px; }
#truc1 { height: 200px; }
html>body #truc1 { height:auto; min-height:200px; }
</style>
</head>
<body>
<div id="truc">
     <div id="truc1">klklklk</div>
</div>
</body>

[Denis]

Ça fonctionnerait tout à fait, mais j'aurais tendance personnellement à plutôt l'écrire ainsi :

<style type="text/css" media="screen">
#truc { height: 200px; }
html>body #truc { height:auto; min-height:200px; }
#truc #truc1 { height: 200px; }
html>body #truc #truc1 { height:auto; min-height:200px; }
</style>

Mais j'en conviens, en faisant cela, j'évoque ce que l'on fait aux pauvres mouches quand elles ont le dos tourné. Au passage, remarque ce que j'ai ajouté à ton élément style... tu en as besoin pour spécifier à ton navigateur ce qu'il est supposé faire avec ce code...

[Nudrema]

... mais en n'oubliant pas que les pinailleries de l'ami Denis sont uniquement d'ordre esthétique étant donné qu'un id est censé être unique dans une page

Bon, je pense que Denis a bien expliqué ce dont il était question, donc je ne vais pas m'attarder

[Denis]

Pinailleries ? Non, mais !