28172 sujets

CSS et mise en forme, CSS3

Menu qui passe sur 2 lignes avec internet explorer

Bonjour !
je me prends la tête avec un menu sous ie 6 et 7 c'est sans doute évident.... mais là je vois pas!
http://forum.alsacreations.com/smilies/decu.gif

voici l'adresse du site en test
http://www.cotepixel.com/test/virtualtest-complet/


J'ai donc une div bottom en position relative a l'intérieur un menu que j'ai positionné en absolu... avec une position left . (j'avais fait des essais avec des float mais ça ne fonctionnait pas)
sur ie6 et 7 uniquement http://forum.alsacreations.com/smilies/fache.gif
mon menu n'affiche que 2 boutons au lieu de 4 . en fait j'ai supprimé le overflow hidden ce qui permet de voir réellement ce qui se passe . les boutons 3 et 4 passent en dessous comme s'ils manquaient de place... je n'arrive pas à débugger avec firebugg .( normalemant j'ai un javascript qui fonctionne et qui cache objet 1 ou objet 2 mais je l'ai retiré pour gérer ce problème d'affichage... )

voici la css qui gère cela:



/*CSS Zone de bas de page*/
#bottom{
	
background:transparent;
position:relative;
	 
	
}


 
#bottom #OBJ_1{
top: 10px;
height:100px ;
 
}
#bottom #OBJ_2{
top:10px;
height:100px ;
 
}



#bottom #not_nested {
	background: none;
	border-bottom: none;
	height: auto;
	position:absolute;
	  width:680px;
	left:268px;
	 
	top:20px;
	bottom:4px;
	display:block; 
}
 
 #bottom #not_nested .second_level{
		background:transparent;
border-bottom:none;
		border-top:none;
                height:30px;
display:inline-block; 
padding-left:inherit;
 
margin-bottom:55px;
	}
#bottom #not_nested .second_level li{
	
color: white;
	display: block;
	float: left;
	height: 100px;
	padding: 0px;
	top: 10px;
	width: 145px;
	margin-top: 0px;
	margin-right: 4px;
	margin-bottom: 5px;
	margin-left: 4px;
	}
	#bottom #not_nested .second_level li a{
	font-weight:bold;
text-align:center;
padding-top:20px;

	display:block;
	}



et la partie de page avec mon bottom dans lequel se trouve le menu:

 <div id="bottom"> 
<a href="javascript:void(0);" id="toggle" class="LinkIn">Voir les autres profils et usages</a>
     <div id="OBJ_1">
     <div id="not_nested">
       <ul class="second_level">
        <li class="active espaces_verts"><a href="/les-usages/espaces-verts/" class="LinkIn LinkIn"><span>espaces verts</span></a></li>
        <li class="defaultmenu domestique"><a href="/les-usages/domestique/" class="LinkIn LinkIn"><span>Domestique</span></a></li>
        <li class="defaultmenu industriel"><a href="/les-usages/industriel/" class="LinkIn LinkIn"><span>Industriel</span></a></li>
        <li class="defaultmenu agricole"><a href="/les-usages/agricole/" class="LinkIn LinkIn"><span>Agricole</span></a></li>
      </ul>
    </div>
    </div>
 <div id="OBJ_2" style="display:none;">
     <div id="not_nested">
       <ul class="second_level">
        <li class="active espaces_verts"><a href="/les-usages/espaces-verts/" class="LinkIn LinkIn"><span>profil1</span></a></li>
        <li class="defaultmenu domestique"><a href="/les-usages/domestique/" class="LinkIn LinkIn"><span>profil2</span></a></li>
        <li class="defaultmenu industriel"><a href="/les-usages/industriel/" class="LinkIn LinkIn"><span>Iprofil3</span></a></li>
        <li class="defaultmenu agricole"><a href="/les-usages/agricole/" class="LinkIn LinkIn"><span>profil4</span></a></li>
      </ul>
    </div>
    </div>
 </div>



merci d'avance pour votre aide Smiley lol
Merci pour cette première réponse!
je viens d'ajouter inline-block à la class qui est dans mon menu... ça n'a rien fait ni empiré ni amélioré... jepeux l'enlever puisque cela ne sert à rien... j'ai réfléchis aux marges doublées par ie mais il y a la place m^me pour les mages doublées. Et même dans ce cas je ne vois pas pourquoi en founction de la version d'ie il y a un ou 2 bouton qui passe à la ligne du dessous.C'est un mystère pour moi mais il doit y avoir une explication!
Je n'ai pas encore réglé mon pb mais j'ai mis mes background en couleur pour voir ce qui se passe... j'ai mis les div obj et obj2 à 10% avce une couleur de fond 
#bottom #OBJ_1{
top: 10px;
height:100px ;
width:100%;
background-color:#900;

}
#bottom #OBJ_2{
top:10px;
height:100px ;
width:100%;
background-color:#0F6;
}



ensuite j'ai coloré la class de mon menu :

 #bottom #not_nested .second_level{
		background:#9F9;
border-bottom:none;
		border-top:none;
                height:30px;

padding-left:inherit;
		 
/*position:absolute;*/
margin-bottom:55px;
	}


et il semblerai que c'est cette class qui , sous ie, pose problème je vais essayer de lui donner une largeur .; si ça fonctionne je pourrais toujours le mettre en commentaire pour ie..;
si quelqu'un a une idée ??
merci Smiley sweatdrop
je cherche je cherche...
j'ai essayer des pseudo classe , des hr class clear

maintenant sous ie6 et 7 mon menu reste sur une ligne mais se ballade à droite. j'ai mis des hacks avec des positions négatives ça marche pas

si quelqu'un a une piste... Smiley decu
Je n'ai pas regardé sous IE mais sur chrome j'ai un background vert clair qui dépasse du conteneur... C'est à quel élément qe tu as mis ce background vert clair ?

Tu devrais mettre des couleurs style red ou blue qu'on voit bien lequel est lequel, ma mémoire ne me permet pas de retenir tous les codes hexa Smiley lol
Je jetterai un coup d'oeil tout à l'heure plus précisément.
Bonjour, il y a pas mal d'appel à des feuilles de styles différentes et des scripts différents Smiley eek , c'est dur de s'y retrouver...

Certaines des feuilles de styles n'ont même pas de css à l'intérieur...(les trois premiers appels <link>)

C'est difficile de t'aider, il y a beaucoup de "spaghetti" dans ta structure html et dans tes css. Smiley rolleyes

Avant de continuer, j'essaierais de faire du ménage et de corriger les quelques erreurs de validation qu'il y a.
Bonjour,

Fais le ménage dans ton CSS, y'a beaucoup trop de feuille.

Tu styles plusieurs fois le même élément dans diverses feuilles (ex my.css via @import dans styles.css // my2.css).

my.css contient : padding-left : 200px; si tu le vires ça marche mais bon....

J'aimerais pas être celui qui passera derrière toi dans 6mois/1ans pour faire une mise à jour...

Ensuite ton CSS est plus que bancal :


#bottom #OBJ_1{
top: 10px;
height:100px ;
width:100%;
background-color:#FF3;
}

#bottom #OBJ_2{
top:10px;
height:100px ;
width:100%;
background-color:#636;
}


Ca sert à rien de mettre 2 ID comme sélecteur CSS. (sauf cas précis ou tu aurais une ID #obj_2 dans une autre page qui serait enfant d'un autre div que #bottom, ce qui serait assez bancal aussi)
Modifié par rs459 (29 Jan 2011 - 08:55)
Sujet clos
Aller à