[Résolu] Menu CSS Problème IE6

Bonjour a tous,

c'est mon premier post en tant qu'utilisateur alors soyer indulgent

Je me permet de soliciter votre aide, car en voulant coder un menu CSS/Javascript, je me heurte à un problème sous IE6.

Pour commencer je vais préciser le contexte :

Voila une maquette du site : Maquette

Alors mon problème est que le menu fonctionne "très bien" sous Firefox, Internet Explorer 5.5,Internet Explorer 7, Flock, Safari(windows), Opera Mais sous Internet Explorer 6, cela ne fonctionne pas du tout. En effet au passage de la souris sur les menus, le sous menu ne s'affiche pas et la taille du div n'est pas la bonne ce qui rend le "border" du div trop bas et pas en cohérence avec le design.

Il est vrai que quand j'enleve le Doctype cela fonctionne sous IE6, mais cela ne fonctionne plus pareil et j'aurai aimer le garder.

J'ai regarder pas mal de choses sur les bug et les hacks IE6, mais je ne trouve pas de solution à mon problème.

J'ai tout de même identifier quelques choses. Si je supprime les 2 lignes :

height:45px;
width:162px

qui sont le le fichier style.css au niveau de :

#menu a span
{
        cursor: pointer;
	float:left;
	display:block;
	padding:2px 9px 2px 6px;
	background:url("droite.jpg") no-repeat left top;
	background-position:100% 0%;
	font-weight:bold;
	color:#82bb30;
	height:45px;
	width:162px;
	white-space:nowrap;
} 

Le Menu fonctionne, mais cela ne correspond plus à mes attentes à savoir des boutons avec une taille précise.

Je rajoute 2 screenshots pour vous montrer le probleme:

FF/Opera/Safari/IE7/IE5/Flock :


IE6 :



La solution ici :Maquette
Modifié par muby (20 Dec 2007 - 11:55)

Je voulais préciser que même une piste m'aiderai, car la je suis assez bloqué. Merci d'avance
Modifié par muby (19 Dec 2007 - 13:18)

Bonjour,

IE ne réagit pas de la même manière au niveau des tailles par conséquent essayez de mettre un height différent pour IE un peu plus petit.

Code exemple
height:45px;
*height:40px; /*Interprété que par IE*/

Hélas cela ne change rien au problème, même avec une taille de 0 le sous menu ne s'affiche pas et il y a toujours un écart entre le border-bottom du div et les images

merci quand meme pour ta réponse.

Si quelqu'un d'autre a une piste je suis toujours preneur

Bon alors dans le registre des pistes:

Constat numéro 1: Internet Explorer 6 n'implémente pas correctement la propriété CSS height, qu'il considère plutôt comme une sorte de hauteur minimale. Ça peut jouer à certains endroits, même si ça ne semble pas être la cause principale ici.

Constat numéro 2: tu as des li en display: inline, dans lesquels il y a des a flottants, dans lesquels il y a des span flottants également. Il n'est pas si étonnant que ça qu'un navigateur puisse perdre les pédales face à ce type de construction (notamment les flottants imbriqués).

Je remettrais à plat cette partie:
- faire flotter les li;
- les a non flottants et en display: block;
- idem pour les span.

Oki merci florent jvais regarder ca merci je vous tienderai au courant

bonjour,

le padding des span , s'ajoute a sa hauteur , ce qui agrandie le a , puis le li , le ul etenfin le div parent , dans IE6 ,comme le souligne Florent , pour ce navigateur height équivaut a min-height..

45 + 2 +2 = 49 : 4px de trop

GC

Merci bien gcyrillus, pour ton explication concernant la taille du div, j'ai bien compris la chose et je t'en remercie

Par contre cela ne m'explique pas pourquoi le sous-menu ne s'affiche pas en absolue. Je vais essayer d'y regarder de plus pret et si vous avez une piste je suis preneur

Encore merci

Alors je viens pour vous remercier tous, et particulierement gcyrillus.

Ton aide m'a été précieuse, et en modifiant la taille, j'ai réussit à résoudre les 2 problèmes qui n'en faisait qu'un au final.

Alors encore merci.