[Résolu] Problème de hauteur div avec IE 6

Bonjour.

Je suis un débutant en CSS.

J'ai un problème de hauteur de div avec IE 6. J’ai d’ailleurs entendu beaucoup de mal sur ce « pseudo-navigateur » web.

J'ai un div qui doit servir de fond de couleur à un menu déroulant horizontal. Le menu déroulant horizontal a entièrement été formaté en CSS et j'ai ajouté un z-index:1; pour qu'il puisse se superposer à mon div de couleur qui ne sert que de fond de couleur.

Mon problème c'est que la hauteur du div est parfaite sous Firefox et Opéra, elle est égale à la hauteur du menu déroulant qui est centré au-dessus de la div de couleur. Le div fait toute la largeur du site. On ne doit donc voir que la couleur du div à gauche et à droite du menu déroulant.

Or sous IE 6 on voit en plus un espace du bas. Le div est trop large en hauteur. Je n'arrive pas à réduire sa hauteur avec le CSS.


En html, ma div encadre le menu déroulant en css. Pour des raisons de confidentialité je ne peux vous donner le contenu exact de mon menu, puisqu'il s'agit d'un Intranet.

Mais je peux vous donner en gros la structure :

 <div id="fond">
<ul id="menu_déroulant">
<li id="xx">
</il>
</ul>
</div>

Et mon css pour le div de fond :

div#fond {
	float:left;
	font-size:1px;
	padding:Opx;
	border:0px;
	width:100%;
	color:#03a613;
	border-color:#03a613; 
	background-color:#03a613;
}

Merci de votre aide, elle me sera salutaire.
Modifié par personnel_pendu (18 May 2006 - 14:11)

Bonjour personnel_pendu,

En l'état il st très difficile de se faire une idée réelle de ton problème sans avoir un exemple plus complet de ton menu.

Il pourrait-être bien que tu fasses un menu utilisant tous tes paramêtres dans une page épurée avec ton effet de menu déroulant.

A défaut tu peux essayer de rajouter un margin:0 dans ton css :

#fond {
	float:left;
	font-size:1px;
        margin:0;
	padding:0;
	border:00;
	width:100%;
	color:#03a613;
	border-color:#03a613; 
	background-color:#03a613;
}

tiens je viens de voir que le texte est en hauteur 1px...

++
Aymeric

Merci Aymeric de m'avoir répondu.

J'ai enlevé la hauteur de texte et rajouté margin:0.

La hauteur reste la même sous IE 6.

Mais toujours une hauteur parfaite avec FF et Opéra.

AymericJ a écrit :
Bonjour personnel_pendu,

En l'état il st très difficile de se faire une idée réelle de ton problème sans avoir un exemple plus complet de ton menu.

Il pourrait-être bien que tu fasses un menu utilisant tous tes paramêtres dans une page épurée avec ton effet de menu déroulant.

A défaut tu peux essayer de rajouter un margin:0 dans ton css :

#fond {
	float:left;
	font-size:1px;
        margin:0;
	padding:0;
	border:00;
	width:100%;
	color:#03a613;
	border-color:#03a613; 
	background-color:#03a613;
}

tiens je viens de voir que le texte est en hauteur 1px...

++
Aymeric

J'ai pas saisi ce que tu voulais dire par : "Il pourrait-être bien que tu fasses un menu utilisant tous tes paramêtres dans une page épurée avec ton effet de menu déroulant."

Voci le css de mon menu à trois niveaux :

/* CSS du menu horizontal*/
/* Voici la feuille de style personnalisant l'aspect du menu horizontal de navigation */

.menu{ /* toute les balises menu */
	margin-top: 0px;
	margin-left: 120px;
	padding:0px;
    width:800px;
	line-height:2;
	z-index:1; /* Nécessaire pour mettre le menu au premier plan. Pour éviter qu'il ne soit superposé par des éléments textes */
	}
	
#startmenu{ /* le premier niveau de menu */
	font-size:12px;
	font-weight:bold;
	letter-spacing:1px;
	}

.menu ul{ /* toutes les listes à puces */
    position:absolute;
    display:block;
    width:124px;
    margin:0;
    padding:0;
    }
	
.menu li ul{ /* tous les éléments des listes à puces */
    visibility:hidden;
    }

.menu li li ul{ /* tous les éléments de deuxième niveau des listes à puces */
    position:absolute;
    margin-left:170px;
    margin-top:-23px;
    }
    
.menu li{ /* tous les éléments listés */
    list-style:none;
    width:188px;
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    }
    
.menu li li{ /* tous les éléments listés de second niveau */
    display:block;
    float:none;
    }
    
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }

.menu a{ /* tous les liens de tous les niveaux */
    text-align:center;
    background-color: #98FB98;
    border:0px #666 solid;
    color:#03a613;
    display:block;
    width:190px;
	height:auto;
    text-decoration:none;
	font-family: Arial;
	letter-spacing: 0.10em;
	font-size:11px;
    padding:0px 0;
    margin:1px;
    }
    
.menu a:hover{ /* état des liens survolés */
    background-color: #03a613;
    border:0px #aaa solid;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
    }
    
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}

a.linkOver{ /* état des liens survolés et maintenu dans les niveaux inférieurs d'un même lien de premier niveau  */
	color:#FFFFFF;
    background-color: #03a613;
    }

Modifié par personnel_pendu (21 May 2009 - 00:42)

Re personnel,
Rahhh y'avait un très bon article sur comment chercher l'origine d'un pb de décallage sur Alsa mais je ne le trouve plus.

Une piste de travail :

Essaies d'ajouter un border:1px; a chaque élément de ton menu, les uns après les autres pour essayer de détecter lequel pose problème sous ie.

Tu peux également tester ceci en base de ton css :

*{margin:0;padding:0;}

Au tout début de ton code Css, cela donnera les atributs par defaut à tous les éléments constituants ta page, si ton décallage disparait alors sous IE, il va falloir retrousser les manches et isoler quel est le satané élément qui te crée ce problème.

Bon courage,
Aymeric

PS: En parlant de mettre un exemple plus complet, je voulais juste dire qu'il est difficile de détecter un problème dans un but de code sorti de son contexte.
EDIT : Cross post
Modifié par AymericJ (18 May 2006 - 10:43)

AymericJ a écrit :
Re personnel,
Rahhh y'avait un très bon article sur comment chercher l'origine d'un pb de décallage sur Alsa mais je ne le trouve plus.

Une piste de travail :

Essaies d'ajouter un border:1px; a chaque élément de ton menu, les uns après les autres pour essayer de détecter lequel pose problème sous ie.

Tu peux également tester ceci en base de ton css :

*{margin:0;padding:0;}

Au tout début de ton code Css, cela donnera les atributs par defaut à tous les éléments constituants ta page, si ton décallage disparait alors sous IE, il va falloir retrousser les manches et isoler quel est le satané élément qui te crée ce le problème.

Bon courage,
Aymeric

PS: En parlant de mettre un exemple plus complet, je voulais juste dire qu'il est difficile de détecter un problème dans un but de code sorti de son contexte.
EDIT : Cross post

Hé ben je peux te dire Aymeric qu'en mettant

*{margin:0;padding:0;}

à la base de mon css toutes les problèmes de décalage se sont évanouis d'un seul coup. Même sous IE 6 !

Bon ben maintenant va falloir que j'isole l'élément flancheur. Tu n'aurais pas une méthode à m'indiquer s'il te plaît ? J'espère que je ne t'importune pas trop ou que tu n'es pas en train de bosser. Je peux comprendre que les occupations professionnelles passent en priorité.

Mais merci beaucoup pour ton dévouement.

Ton aide contribue à la vulgarisation des techniques de création web du futur.

mode chevilles qui enflent ON. ^^

Comme je te l'ai précisé, un bon moyen est d'utiliser cette technique :

a écrit :

Une piste de travail :
Essaies d'ajouter un border:1px; a chaque élément de ton menu, les uns après les autres pour essayer de détecter lequel pose problème sous ie.

Si je retrouve l'article d'Alsacréations sur le sujet je colle le lien.

Bon courage,
Aymeric

AymericJ a écrit :
mode chevilles qui enflent ON. ^^

Comme je te l'ai précisé, un bon moyen est d'utiliser cette technique :


Une piste de travail :
Essaies d'ajouter un border:1px; a chaque élément de ton menu, les uns après les autres pour essayer de détecter lequel pose problème sous ie.

Si je retrouve l'article d'Alsacréations sur le sujet je colle le lien.

Bon courage,
Aymeric


Ok pour la piste de travail.

Quand tu parles d'"éléments" tu parles bien des éléments du menu dans le html entouré des balises <li> </li> ?

Et comment je vais reconnaître l'élément flancheur en mettant des border:1px ?

Je sais ma question peut te paraître idiote. Mais je débute en codage.

Ah mais d'ailleurs je peux pas rajouter de border px dans mon code html.

Les éléments de mon menus sont compris dans des balises <ul> </ul> puis <li></li> à l'intérieur des <ul>.

Ces balises ne pevent recevoir d'attributs "border" il me semble. Du moins elles ne les reconnaissent pas.

personnel_pendu a écrit :
Ah mais d'ailleurs je peux pas rajouter de border px dans mon code html.

Les éléments de mon menus sont compris dans des balises <ul> </ul> puis <li></li> à l'intérieur des <ul>.

Ces balises ne pevent recevoir d'attributs "border" il me semble. Du moins elles ne les reconnaissent pas.

A moins que je ne remplace mes balises <ul> et <li> par des balises de tableaux comme <able>, <tr> et <td> ... ? Du moins, juste le temps de trouver l'élément flancheur... Je sais pas si c'est pas risqué comme solution...

A ton avis Aymeric ?

En fait en méthode de recherche, il faut isoler les éléments constituant ton menu :

Dans ton cas nous avons :

Le <div>

Le <ul>

Les <li> et sous <li>

Donc tu vas commencer à appliquer le border au plus grand conteneur : le div.
Puis aux autres éléments les uns après les autres.

Exemple :

Au début de construction en css de mon site, j'avais un décalage qui apparaissait sous IE au niveau de mon menu.

Le code html se présentait comme ça :

<div id="header">
<img src="trucmuche.png />
<ul = id="menu">
<li>lien</li>
<li>lien</li>
<li>lien</li>
<li>lien</li>
</ul>
</div>
<div id="lasuite">...

J'avais à peu près 2 pixels de décalage entre le Header et la suite de la page.
Chaque élément ayant un fond qui lui était propre, j'ai donc attribué une bordure à chaque élément jusqu'a ce que je vois que la bordure autour de l'image apparaissait en bas décalée de 2 pixels en dehors de l'image, j'avais donc "isolé" mon élément à problème. A partir de là on essaie de trouver la solution pour l'élément incriminé.
Modifié par AymericJ (18 May 2006 - 11:20)

Le fameux article :

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

Tout simplement dans la FAQ.

AymericJ a écrit :
Le fameux article :

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

Tout simplement dans la FAQ.

Merci beaucoup Aymeic.

Pardon j'ai tapé un peu vite sur mon clavier. Je rectifie : Merci Aymeric.

personnel_pendu a écrit :
Pardon j'ai tapé un peu vite sur mon clavier. Je rectifie : Merci Aymeric.

Il existe un bouton pour éditer ton message aussi

De nada personnel, bon courage à toi pour la suite.

Je pense que tu peux mettre un au titre de ton message en éditant ton premier post.

PS : en plus je suis dans une sale journée à faire de l'administratif, donc ça me détends de répondre aux questions.
Modifié par AymericJ (18 May 2006 - 14:11)