Menu horizontal avec items flottants | Bug IE...

Re-bonjour

Presque 3 jours sur un menu, j'commence à saturer... Voilà ce que je veux faire (screenshot Firefox) :



Voilà ce que j'obtiens sur IE6 :



Z'avez vu ce petit décalage ?? C'est le pixel qui fait déborder le menu...

CSS :

#menu_pere {
width:100%; /* le menu occupe tout l'espace */
background:url(../images/onglet_vide_41.gif) repeat-x;
float:left; /* menu qui part de la gauche, onglet vide sur la droite */ }

#menu_pere ul {
margin:0;
padding:0;
list-style:none; }

#menu_pere li {
line-height:25px; /* centrage vertical */
text-align:center; /* centrage horizontal */
float:left; /* onglets alignés horizontalement en partant de la gauche */ 
position:relative; }

/**** Ce qui se trouve en dessous ne fout pas la m****/

#menu_pere li div.Onglet {
min-width:90px;
background:url(../images/onglet_inactif_centre_41.gif) repeat-x; }

#menu_pere li.selected div.Onglet {
min-width:105px;
background:url(../images/onglet_actif_centre_41.gif) repeat-x; }

#menu_pere li div.DebOnglet {
background:url(../images/onglet_inactif_gauche_41.gif) no-repeat;
position:absolute;
left:0;
top:0; }

#menu_pere li.selected div.DebOnglet {
background:url(../images/onglet_actif_gauche_41.gif) no-repeat; }

#menu_pere li div.FinOnglet {
background:url(../images/onglet_inactif_droite_41.gif) no-repeat;
width:12px;
height:25px;
position:absolute;
right:0;
top:0; }

#menu_pere li.selected div.FinOnglet {
background:url(../images/onglet_actif_droite_41.gif) no-repeat; }

HTML

<div id="menu_pere">
     <ul>
          <li class="selected">
	       <div class="DebOnglet">
	       </div>
		
	       <div class="FinOnglet">	
	       </div>
	
	        <div class="Onglet">
		     <a class="Longlet" href="">Titre 1</a>
	        </div>	
          </li>

          <li>
	       <div class="DebOnglet">
	       </div>
		
	       <div class="FinOnglet">	
	       </div>
	
	        <div class="Onglet">
		     <a class="Longlet" href="">Titre 2</a>
	        </div>	
          </li>
     </ul>
</div>
		
<div id="menu_fils">
	...
</div>

De plus, l'image "onglet_vide_41.gif" en background de la div menu_pere ne me semble pas nécessaire, comme ce float:left au même endroit (mais sans lui, y a tout qui pète )

Merci de sauver une vie, la mienne avant pétage de plomb irréversible...
Modifié par BeliG (25 Apr 2007 - 16:23)

IE vainqueur par K.O... J'reprends ma structure en tableau pour ce foutu menu, le validateur pourra aller se faire f*****. 3 jours perdus...


Modifié par BeliG (25 Apr 2007 - 17:43)

Yop !

T'as pas une url où le voir ? sans avoir les images sous la main j'ai du mal à me rendre compte

Yep

Non pas d'URL, le site est en local et pas de possibilité d'upload. Concernant les images :

- A la base elles faisaient 25px de hauteur (le pixel 24 du bas avait pour couleur le trait séparatif, le pixel 25 la couleur du menu_fils). Problème : le décalage de 2 px sous IE que tu peux voir sur les captures.

- J'ai ensuite essayé avec des images de 23px (les mêmes sans les 2px du bas), et le trait de séparation fixé en border-top du menu-fils (j'ai essayé aussi avec border-bottom du menu_pere). Mais là encore ça buggait sur IE et le code était vraiment pas propre (margin-bottom:-1px + border-bottom sur les onglets sélectionnés)... Le bug rencontré (et si correction sous IE alors nouveau bug sur FF) :



Faudrait revoir entiérement la construction du menu, si t'as une idée (les images posent pas de problèmes j'peux en fabriquer pour tous les goûts)...

Ciao
Modifié par BeliG (26 Apr 2007 - 10:37)