[Résolu] Impossible de cliquer sur une div dans Firefox et IE

Bonjour à tous et à toutes

Petit nouveau sur ce forum, j'ai, vous vous en doutez, un question de javascript/css.

Sur mon site, j'ai un bouton tout simple qui, via un mouseover en jquery, affiche un menu dans une div juste en dessous.

Mon souci vient d'une différence de navigateur : sous Chrome, le menu marche parfaitement ; sous Firefox et IE, en revanche, le menu est visible dans la page et le code mais, bizarrement, on dirait qu'a par cela il n'existe pas : quand j'essaye de cliquer sur les boutons, ou même de faire un clic droit sur la div pour inspecter élément dans la console, le cliquer va affecter les éléments en dessous de ma div.

Je pensais que le problème venait du css et du z-index (positionnement au 1er plan), mais j'ai eu beau donner à ma div un z-index de 4, puis 10, puis 100, 1000, 10000 et des poussières, rien à faire.

Bref, je sèche. Si quelqu'un a une idée, je l'écouterais avec plaisir.

Voici mon code HTML (simplifié) :

<button class="btn-primary no-ajaxify signin" id="signintext">
                    				
                    				<a href="#" id="signintext">{{Lang.signin}}
                    					<span class="caret"></span>
                    				</a>
                    				
                    				<div class="pull-right" id="divmenu">
                        				
                        				<div id="SIGNINcontainer">

                        					<div id="CONNECTcontainer">
                        						<form method="post" action="/log">
				                					<input type="hidden" id="cmode" name="cmode" value="prac" />      
					                                <p class="invalid">{{{Lang.invalidpwd}}}</p>
				                    				<input class="INPUTSIGNUP" placeholder="{{Lang.email}}" name="username" type="text"></input>
				                    				<input class="INPUTSIGNUP" placeholder="{{Lang.pwd}}" name="password" type="password"></input>
				                    				<a class="password" href="/lostpassword" >{{Lang.forgotpwd}}</a>
				                    				<a id="SIGNINpushbtn" class="btn btn-block btn-primary" type="submit">{{{Lang.signin}}}</a>
				                				</form>
                        					</div>
                        					
                        					<div id="RScontainer">

                        						<a class="ConnectBtn facebookConnect" id="FBconnectBtn">
													<p class="ConnectBtnText">Log In with Facebook</p>
													<img class="ConnectBtnImg" src="images/fb_logo.png" width="50" height="40"  alt=""/>
									    		</a>
												
												<a class="ConnectBtn" id="TWconnectBtn">
													<p class="ConnectBtnText">Log In with Twitter</p>
													<img class="ConnectBtnImg" src="images/tw_logo.png" width="50" height="40"  alt=""/>
											    </a>
													
												<a class="ConnectBtn" id="GOOGLEconnectBtn">
													<p class="ConnectBtnText">Log In with Google+</p>
													<img class="ConnectBtnImg" src="images/google_plus_logo.png" width="40" height="40"  alt=""/>
											    </a>

											    <a id="CloseBtn" class="btn" onclick="closeMenu()">{{{Lang.close}}}</a>

                        					</div>

                        				</div>

                    				</div>

            			</button>

Le css de mon bouton, de ma div et du bouton valider dans cette div (il y a d'autres css pour les autres éléments, mais je pense que ca alourdirait de tout mettre) :

#signintext {
	font-size: 16px;
	font-family: GothamNarrow-black;
	color: #fff;
	text-decoration: none;
}

#divmenu {
	background-color : white; 
	position: absolute; 
	right: 427px; 
	top: 60px; 
	z-index: 10;
}

#SIGNINpushbtn{
	width: 237px;
	margin-right:auto;
	margin-left:auto;
	font-size: 20px;
	font-family: gothamnarrow-ultra;
	padding: 3px;
	margin-top: 30px;
	background: #0b879f;
	color: #fff;
}

Et mon jquery :

 $("#divmenu").attr('style', 'display:none;');

                $('#signintext').mouseover(function() {
                    console.log("ENTREE DIV");
                    $("#divmenu").attr('style', 'display:block;');
                });

                closeMenu = function(){
                    console.log("fermeture div");
                     $("#divmenu").attr('style', 'display:none;');
                 }

Bonjour et merci


Vi, j'ai conscience que ce code n'est pas tout à fait optimal ; à ma décharge on est plusieurs à bosser dessus, chacun ayant son propre niveau donc c'est un peu la pagaille .

Toutefois, j'ai fait un test avec une div et un bouton tout simple, et le problème reste le même. Je suis sûr qu'il doit y avoir un truc tout bête (loin de moi de vouloir insulter IE ou firefox), mais je n'arrive pas à mettre le doigt dessus.

Je m'aperçois avoir oublié une petit précision : ma div se trouve dans une navbar, entendez une sorte d'entête qui reste en haut de page en page. Ça a peut-être une incidence ?

Problème résolu !! Comme quoi, il suffisait de demander... pour trouver

Effectivement, j'avais mis la div dans le bouton, espérant ainsi rattacher l'une à l'autre ; manque de bol, c'est précisément ce qui faisait planter le bazar.

Merci de ton soutien en tout cas ; je sens que je vais initier l'équipe à de bonnes séances de nettoyage de code.