1px de trop dans une nav : plusieurs heure et pas de solutions

Bonjour à tous !


Même je visite ce forum à peu près tous les jours pour venir y trouver des solutions, c'est la première fois que je post puisqu'en général il est rare que l'on soit le seul à avoir le même problème.

Reste que ce qui m'ammène aujoud'hui à écrire est assez curieux : une navigation horizonale qui fonctionne parfaitement bien et sous tous les navigateurs et qui a la particularité d'avoir..... 1PX de trop !

visible ici : http://www.myoken.fr/newnav.html

J'ai bougé, il me semble toutes les tailles mais rien n'y fait... je ne comprends vraiment pas d'où cela peut venir alors si quelqu'unà une piste ce serait merveilleux !

Merci d'avance (et merci au meilleur forum CSS francophone)
V-mike

body {
background-color:#ccff00;


}


.conteneurmenu
{
   width: 760px;
   margin: 0px;
   padding: 0px;
   border:0px;
   height: auto;
   float:left;  
}


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

#nav
 {
	/*background: #CC0000; fond barre*/
	width: 760px;/* taille longeur du menu*/
	height: 24px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	border: 0px;
 }

#nav a
 {
	font-weight: bold;
	color: #ffffff;
	font-family: Verdana, arial, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	line-height:19px;
	text-decoration: none;	
 }
 
 
 /*adone*/
#nav li li
 {
	background-image:none;
	background-color:B5E300;
	margin:0px;
	padding:0px;
 }
/*adone*/

 

#nav li li a
 {
	display: block;
	font-weight: normal;
	font-family: Verdana, arial, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	/*width: 145px;taille du sous-menu */
	/*padding: 0.2em 10px;*/ /*permet d'obtenir une sous ligne décalé*/
 }



#nav li li a:hover
 {
	/*padding: 0.2em 5px;*/
	border: 0px;
	/*border-width: 0 5px;*/
	background-color: #ffffff;
	/*width: 146px;taille du sous-menu */
	color:#ff0000;
 }

li
 {
	float: left;
	position: relative;
	width: 150px;/* mot réactif entete section */
	text-align: center;
	cursor: default;
	border: 0px;
	padding:0px;
	margin-left:1px;
	/*border-width: 1px 0;*/
	background-image: url(image/fond_nav1.jpg);
	background-repeat:no-repeat;
 }

li ul
 {
	display: none;
	position: absolute;
	top: 100%;
	left: 0px;
	font-weight: normal;
	background-color: #B5E300;
	padding: 0px;
	margin:0px;
	border-left:#CC0000 1px solid;
	border-right:#CC0000 1px solid;
	border-bottom:#CC0000 1px solid;
	margin-right:1px;
	/*width: 147px;taille du sous-menu */

 }

li>ul
 {
	top: auto;
	/*left: auto;*/
	left: 0px;
	/*width: 148px;taille du sous-menu */
 }

li li
 {
	display: block;
	float: none;
	background-color: transparent;
	border: 0px;
	padding: 0px;
	margin:0px;
 }

li:hover ul, li.over ul
 {
	display: block;
 }

Modifié par v-mike (11 Sep 2006 - 09:32)

Tu as 1 px de trop a quel niveau ?

A droite, dans les sous menu, le border-right ne s'aligne pas. C'est pourquoi j'avais tenté d'insérer des width un peu partout mais sans résultats....

C'est aussi ce que je pensais mais en retirant la bordure de gauche, comme ici :

http://www.myoken.fr/newnav.html


Je devrais libérer de la place, non ?

la c'est bon, non ?

Lorsque l'on va sur le dernier onglet 'notre tribu' on voit que le px de trop y est toujours... et c'est assez désapointant !

mets des bordures a tes items et on verra ce que ca donne

Je me retrouve avec la même situation qu'avant, le px est toujours là.

Bonjour à tous,

Rapidement, une piste :

Spécifier le conteneur parent, sinon tous les li seront affectés du style ...

#nav li 
 {
	float: left;
	position: relative;
	width: 150px;/* mot réactif entete section */
	text-align: center;
	cursor: default;
	border: 0px;
	padding:0px;
	margin-left:1px;
	/*border-width: 1px 0;*/
	background-image: url(image/fond_nav1.jpg);
	background-repeat:no-repeat;
 }

Ok, merci je test de suite !

---------------------


Je viens de faire la modifs mais cela ne change toujours rien :


http://www.myoken.fr/newnav.html
Modifié par v-mike (11 Sep 2006 - 11:46)

Quelqu'un sait pourquoi Ie n'interprête pas le width (148) ici, car le but aurait été de combattre le px en réduisant la taille de ul :

#nav li ul
 {
	display: none;
	position: absolute;
	top: 100%;
	left: -1px;
	font-weight: normal;
	background-color: #B5E300;
	padding: 0px;
	margin:0px;
	border-left:#CC0000 1px solid;
	border-right:#CC0000 1px solid;
	border-bottom:#CC0000 1px solid;
	margin-right:1px;
	width: 148px;/*taille du sous-menu */

 }

ps : cette solution est évidemment valide pour Gecko... comme toujours !

Mon conseil précédent éléiminait le décalage, mais il fallait trouver comment faire apparaître les bordures ...

Pour répondre à ta dernière question :

http://openweb.eu.org/articles/dimensions_boites_css/

Ok, merci pour tout mais je pense que le problème est structurel et lié aux différentes interprétations... Je vais donc couper la poire en deux faire un retrait à gauche d'1 px et centrer le tout, comme ceci :

#nav li ul
 {
	display: none;
	position: absolute;
	top: 100%;
	left: -1px;
	font-weight: normal;
	background-color: #B5E300;
	padding: 0px;
	margin:0px;
	border-left:#CC0000 1px solid;
	border-right:#CC0000 1px solid;
	border-bottom:#CC0000 1px solid;
	margin-right:1px;
	/*width: 148px;taille du sous-menu */

 }

#nav li>ul
 {
	top: auto;
	/*left: auto;*/
	left: -1px;
	/*width: 148px;taille du sous-menu */
 }

Ce n'est pas parfait mais cela homogénéise un peu...

Merci à tous !

Salut,

en partant de ce lien :,

et en enlevant ce qui est en gras :

#nav li
 {
	float: left;
	position: relative;
	width: 150px;/* mot réactif entete section */
	text-align: center;
	cursor: pointer;
	border: 0px;
	padding:0px;
	[b]margin-left:1px;[/b]
	/*border-width: 1px 0;*/
	background-image: url(image/fond_nav1.jpg);
	background-repeat:no-repeat;
 }

Le décalage entre les <li> du menu disparait sous Gecko et IE 6.0.

J'avais déjà testé cette solution mais non seulement elle en semble pas régler la question du décalage (on le voit en survolant "notre tribu"), mais elle pose des problèmes visuels : il n'y a plus de séparation entre les titres :

voilà ce que ça donne
Modifié par v-mike (11 Sep 2006 - 13:25)

C'est que j'ai mal suivi ton problème...

Tu parles du décalage d'un pixel entre le bord droit du bloc de sous-menus que déroule "notre tribu" au survol, et le bord droit de "notre tribu" lui même ?
Ça je ne m'y suis pas penché....je ne l'avais même pas vu.

Maintenant pour ce qui est du pixel qui sépare tous tes menu avec des background-images, je pensais que tu souhaitais l'enlever...
C'était bien ça au départ ? où j'ai rien compris ?

Sinon le fait qu'ils ne soient plus séparés visuellement n'est pas un problème selon moi puisque tu te sert d'images :
Tu n'as qu'a faire une image qui commence par un séparateur:

Je l'ai fait rapidos, là il y en à 3 bouts à bouts.



Et il t'en faut une autre sans séparateur pour le premier item de menu (bien que ça peut faire office de bordures, à ce moment là il t'en faudras quand même une de plus pour le dernier item...).

Autrement , derrière chaque <a> dans ta liste, un séparateur "|" que tu ajustes au niveau taille et couleur avec CSS...

Effectivement, je n'ai peut-être pas été suffisamment clair sur ce coup là ! Mon problème ne vient pas du tout de la barre rouge puisque le pixel de décalage entre les entete est tout à fait normal.

Le problème vient des blocs de sous liens, ceux qui sont entourés de border rouge, lsequels blocs une fois équipé de bordure sont toujours plus grands que l'entête d'un pixel (IE).


J'ai essayé pas mal de solutions, notammment en tentant de donner une taille aux UL d'1px plus petite que les entêtes mais cela ne donne rien puisque IE ne l'interprète pas... Tout ça juste pour un px....