Décalage de 2/3 pixels entre FF/SAfari et IE + PNG

Bonjour à tous,


un petit souci de décalage entre Safari/FF et IE (qui rabaisse mon menu de /3 pixels) que je n'arrive à pas résoudre. Comme d'habitude ce doit être assez évident mais la fatigue et la bêtise aidants, je ne vois pas venir la solution.


ma page est visible là : http://alarenverse.com/nouveau1024/regular.html


et mon code CSS est le suivant

@charset "UTF-8";
/* V2 */

html{font-family:"Trebuchet MS";}

ul,li {margin:0; padding:0}

img{border:none}

img, div { behavior: url(iepngfix.htc) }

#main{margin:0 auto; width:980px;padding:0;}

.clear{clear:both;}


/* -------------------- BANDEAU HAUT
-----------------------------------*/

#user_name{
	float:left;
	height:30px;
	margin:5px 0 0 5px;
	padding:3px 0 0 20px;
	width:400px;
	font-size:12px;
	color:#FF6600;
	background-image:url(img/pictos/unlock.png);
	background-position:top left;
	background-repeat:no-repeat;
}

#client_name{
	float:left;
	width:908px;
	margin:0;
	padding:3px 0 7px 40px;
	background-image:url(img/pictos/Building.png);
	background-position:top left;
	background-repeat:no-repeat;
	color:#EDEEF7;
	font-size:24px;
}

/* -------------------- MENU PRINCIPAL
-----------------------------------*/
#menu_haut {
      /*float:left;
      width:100%;
      font-size:13px;
      line-height:normal;
	  margin:5px 0 0 0;*/
	  float:left;
      width:100%;
      font-size:13px;
      line-height:normal;
      margin:2px 0 0 0;
      }
#menu_haut ul {
      margin:0;
      padding:12px 0 0 0;
      list-style:none;
      }
#menu_haut ul li {
      float:left;
      background:url(img/onglets/bleu_OFF_g.png) no-repeat left top;
      margin:0 5px 0 0;
      padding:0 0 0 3px;
      }
#menu_haut ul  li a {
      display:block;
      background:url(img/onglets/bleu_OFF_d.png) no-repeat right top;
      padding:8px 8px 5px 6px;
      text-decoration:none;
      color:#FFF;
      }
#menu_haut ul li a:hover {
      color:#003399;
      }
#menu_haut ul li#current {
      background-image:url(img/onglets/bleu_ON_g.png);
      }
#menu_haut ul li#current a {
      background-image:url(img/onglets/bleu_ON_d.png);
      color:#000;
      padding-bottom:6px;
      }
	  
/* -- AJOUTER TEMPS ---*/
#menu_haut ul li.temps {
      float:right;
      background:url(img/onglets/orange_OFF_g.png) no-repeat left top;
      margin:0 0 0 5px;
      padding:0 0 0 3px;
      }
#menu_haut ul  li.temps a {
      display:block;
      background:url(img/onglets/orange_OFF_d.png) no-repeat right top;
      padding:8px 8px 5px 4px;
      text-decoration:none;
      color:#FFF;
      }
#menu_haut ul li.temps a:hover {
      color:#CC6600;
      }
#menu_haut ul li.temps#current {
      background-image:url(img/onglets/orange_ON_g.png);
      }
#menu_haut ul li.temps#current a {
      background-image:url(img/onglets/orange_ON_d.png);
      color:#000;
      padding-bottom:6px;
      }
	  
	  
/* -- ADMINISTRATION ---*/

#menu_haut ul li.admin {
      float:right;
      background:url(img/onglets/kaki_OFF_g.png) no-repeat left top;
      margin:0 0 0 5px;
      padding:0 0 0 3px;
      }
#menu_haut ul  li.admin a {
      display:block;
      background:url(img/onglets/kaki_OFF_d.png) no-repeat right top;
      padding:8px 8px 5px 4px;
      text-decoration:none;
      color:#FFF;
      }
#menu_haut ul li.admin a:hover {
      color:#336600;
      }
#menu_haut ul li.admin#current {
      background-image:url(img/onglets/kaki_ON_g.png);
      }
#menu_haut ul li.admin#current a {
      background-image:url(img/onglets/kaki_ON_d.png);
      color:#000;
      padding-bottom:6px;
      }


/* -------------------------- SEARCH
-----------------------------------*/
#search_engine{
float:right;
width:400px;
height:19px;
padding:3px 0;
}

#search_engine input.tf {border:1px solid #003366; border-width:1px 0; float:right; font-size:11px; color:#666;height:15px; width:200px; padding:2px 0 0 3px;}
#search_engine input.b {border:none; font-size:11px; color:#FFF; float:right; background-color:#003366; height:19px; padding:0 3px 2px 3px; cursor:pointer; text-align:center;}


#search_engineH{
float:right;
width:400px;
height:25px;
padding:3px 0 0 0;
}

#search_engineH input.tf {border:1px solid #999; border-width:1px; float:right; font-size:11px; color:#666;height:15px; width:200px; padding:2px 0 0 3px; margin:0 7px 0 0;}
#search_engineH input.b {
	float:right;
	height:19px;
	width:120px;
	background:url(img/boutons/button_search_markaki.png) top left no-repeat;
	font:bold 11px "Trebuchet MS";
	color:#FFF;
	border:none;
	margin:1px 0 0 0;
	padding:0 0 2px 0;
}



/* -------------------- RSS / OUTILS
-----------------------------------*/

#rss{
	float:left;
	margin-top:25px;
	background-image:url(img/bckgrd/rss.jpg);
	background-position:left top;
	background-repeat:no-repeat;
	background-color:#FFF;
	width:600px;
	height:23px;
	line-height:23px;
	padding: 0px 0 0 30px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FF6600;
	font-size:12px;
	border:1px #999 solid;
	border-width:0 1px 1px 1px;
}

#menu_outils{
	float:right;
	margin-top:25px;
	/*background-image:url(img/bckgrd/rss.jpg);
	background-position:right top;
	background-repeat:no-repeat;*/
	background-color:none;
	max-width:300px;
	height:23px;
	line-height:23px;
	padding: 0px 0 0 30px;
	color:#FF6600;
	font-size:12px;
	/*border:1px #999 solid;
	border-width:0 1px 1px 1px;*/
}
/* menu outils */

ul#outils{
	float:right;
	margin:0;
	padding:5px 0 0 0;
	list-style-type:none;
	}

ul#outils li{
	display:inline;	
}

ul#outils li a{
	display:block;
	font-family:Trebuchet MS;
	font-size:11px;
	float:left;
	color:#000;
	text-decoration:none;
	/*padding:2px;*/
	height:20px;
	margin:0 0 0 15px;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

ul#outils li a:hover{
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

D'autre part, j'utilise des png comme images de mes onglets en portes coulissantes et comme je suis sur un fond dégradé j'eusse aimé utliser leur transparence, mais je lis partout que c'est impossible... Vrai , vrai, vrai ?

Merci de votre aide et bon samedi,
Aurélia.
Modifié par Florent V. (25 Nov 2007 - 03:08)

Bonjour Fugugirl,

Je n'ai pas l'mpression que tu sois allée au plus simple pour faire ton menu...
Ce que je te propose n'est pas très "heureux", ni très standard, mais, je ne suis pas parvenu à trouver le problème qui cause ce décallage :
En desespoir de cause donc:
En mettant un commentaire conditionnel pour IE, on résoud provisoirement ton soucis (Sous IE6 (au moins pour le positionnement) et IE7):

<!--[if IE ]>
	<style type="text/css">
#menu_haut {
	margin-top:-1px 
	}
</style>
	<![ endif]--> [#blue]/*Sans espace après le premier crochet*/[/#]

Tu te demandes pourquoi -1px ? Avec les 2px de marge haute de ton menu_haut, nous sommes bien à 3px en valeur absolue

Pour commencer, tu peux mettre dans ta feuille de style ce morceau de code qui traine dans ton entête (au passage, lorsque tu insères des styles dans ton entête, il vaut mettre <style type="text/css"> que <style> tout court):

body {
background:url(img/bckgrd/Degrade_regular.png) repeat-x;
margin:0;
padding:0;
}	 

Ensuite, voici ce que j'ai modifié ( tout à fait arbitrairement ) :

#menu_haut ul li#current a {
background-image:url(bleu_ON_d.png);
color:#000000;
padding-bottom:[#blue]5px;[/#]
}
#rss {
background-color:#FFFFFF;
background-image:url(img/bckgrd/rss.jpg);
background-position:left top;
background-repeat:no-repeat;
border-color:#999999;
border-style:solid;
border-width:0pt 1px 1px;
color:#FF6600;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
height:23px;
line-height:23px;
margin-top:[#blue]25px;[/#]
padding:0px 0pt 0pt 30px;
width:600px;
}

C'est évidemment par goût personnel, et tu n'es pas obligé d'en tenir compte

Il y a très certainement mieux à faire pour résoudre ton problème, nul doute qu'au passage d'un des cadors du css qui arpentent ce faux rhum, une explication scientifique, de ce qui provoque ce décallage, te sera dévoilée, je continue de "réfléchir" de mon coté

Concernant ton problème de png transparent (uniquement sous IE6), j'ai vu que tu avais commencé à te pencher sur la question via le fichier htc :

img, div { behavior: url(iepngfix.htc) }

Il existe plusieurs solutions pour gérer la transparence sous IE6, la FAQ pourra t'en apprendre plus sur ce sujet

Voilà j'ai fait le tour, je continue de chercher une explication logique qui doit être super évidente

Bonne journée,
Cdt,
Sylvain

Salut Sylvain,

merci de te prendre la tête avec moi. Le bout de CSS dans l'en-tête est là parce que l'image de fond va changer selon la domaine dans lequel on se trouve donc avec php il me semblait qu'il fallait que ce soit dans la page. Je peux aussi le mettre direct dans la balise body.

Je vais tester le commentaire conditionnel voir si ça règle un moment ce petit problème. Pour les png je ne sais utiliser que sur les balises img direct dans la page sinon ça alourdit le rendu et je n'ai pas besoin de ça.

Viele Danke,
Aurélia.

Il y a un lien sur le mot FAQ avec cette page tu devrais t'en sortir

Déjà lu, hier dans un état second.

Merci,
A.

Hello,

Je n'ai pas vu de décalage particulier sous IE 6 ou IE 7. Si le problème vient du fait que les items du menu, sous IE 6 et 7, descendent 3-4 pixels trop bas et viennent mordre sur la barre dessinée par l'image de fond, eh bien c'est un problème que j'ai constaté avec tous les navigateurs (IE 6-7, Firefox 2, Opera 9).

Pour info, par défaut j'ai le rendu suivant avec Firefox:


J'obtiens également ce genre de choses en modifiant un peu la taille du texte:
et

Ça me semble être un problème de conception (positionnement qui doit se faire au pixel près... mais qu'on a conçu comme dépendant de la taille du texte, de la fonte utilisée, de la hauteur de ligne, etc.), plutôt qu'un bug de rendu de tel ou tel navigateur.

Par ailleurs, j'ai voulu tester la page avec Konqueror, mais bizarrement aucune image de fond ne s'affiche (et il me semble que j'ai eu le même problème avec IE7 pendant un moment). Du coup, on se retrouve avec du texte blanc sur fond blanc (là encore, un problème de conception: on n'a pas pris en compte la possibilité d'une image de fond non chargée, indisponible, désactivée, etc.).

Salut Florent,

que me conseilles-tu pour remédier à ce problème de conception ? Je suis toute ouïe pour progresser et aller vers de meilleures CSS mieux conçues.


Merci,
Aurélia.

En partant de la configuration actuelle, on pourrait:

1. Donner un padding: 1px 0; à div#main (évitera des problèmes de fusion des marges);
2. Donner une hauteur fixe de 26px à #client_name;
3. Donner une hauteur fixe de 29px aux li du menu.

Plus peut-être quelques petits aménagements supplémentaires pour que ça tombe bien comme il faut (pas le temps de tester plus que ça).

En termes de «bonne conception», il aurait fallu procéder ainsi:

1. Créer un bloc pour l'en-tête et le menu, et lui donner l'image du bandeau comme image de fond (nota: mieux vaut donner une largeur un peu plus grande à cette image, par exemple 20 ou 50px, pour éviter que le navigateur n'ait à la répéter 1000 fois...).
2. Ne pas donner de hauteur fixe à ce bloc d'en-tête. Positionner l'image de fond en alignement en bas du bloc, et prévoir une couleur de fond qui soit raccord avec la partie haute de l'image de fond.
3. Donner un padding-bottom au bloc d'en-tête, correspondant à la hauteur en pixels de la partie de l'image à ne pas recouvrir.
4. S'arranger pour que tous les éléments de cet en-tête soient bien en flux (pas de positionnement absolu, pas de positionnement flottant ou bien on s'arrangera pour éviter les dépassements de flottants).
5. S'arranger pour que le menu et les éléments du menu n'aient pas de margin-bottom, afin qu'ils s'arrêtent pile juste au dessus du trait du bandeau à ne pas recouvrir.
6. Décaler de 1px vers le bas l'item de menu correspondant à la page active, grâce à un position: relative par exemple.

Merci beaucoup pour tes conseils
Je vais m'y mettre et faire plus attention à présent.

Bon dimanche et merci encore !

Aurélia.