Décalage IE et FF

Bonjour,

Je travaille actuellement à la nouvelle version de mon site et j'ai quelques soucis de compatibilités entre les 2 navigateurs Internet Explorer et Firefox au niveau de mon menu.

Sous IE, ca donne ceci :
http://www.hiboox.com/image.php?img=69es8i8d.jpg

Sous FF, ca donne ceci :
http://www.hiboox.com/image.php?img=dd7hzhud.jpg

Voici le bout de code dans ma feuille de style pour le menu :

#menu {
	background-image: url(im/menu.jpg);
	background-repeat: no-repeat;
	margin-left: 0px;
	width:900px;
	height:36px;
}

.item {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: White;
	font-size: 11px;
	font-weight: bold;
	float:left;
}

#item1 {
	margin-top: 12px;
	margin-left: 110px;
}
#item2 {
	margin-top: 12px;
	margin-left: 20px;	
}

#item3 {
	margin-top: 12px;
	margin-left: 20px;
}

#item4 {
	margin-top: 12px;
	margin-left: 20px;
}

#item5 {
	margin-top: 12px;
	margin-left: 20px;
}

Et le bout de code dans ma page index.html :

<div id="menu">
<a href="#"><div id="item1" class="item">Accueil</div></a>
<a href="#"><div id="item2" class="item">Profil</div></a>
<a href="#"><div id="item3" class="item">Réalisations</div></a>
<a href="#"><div id="item4" class="item">Tarifs</div></a>
<a href="#"><div id="item5" class="item">Contact</div></a>
</div>

Le tout a été mis en ligne provisoirement à l'url suivante :
http://www.peex-design.net/v4/

Pouvez-vous m'aider svp car j'ai plus les idées très claires là !!
Modifié par bibou04 (24 May 2007 - 08:12)

Je peux te donner une piste a creuser cependant.

Passe au liste pour tes menus. Dans ce cas précis ca te sauvera la mise. En effet tes class item 1 item 2 etc.. sont redondantes et ne servent à rien. Place ton menu d'abord et gére les espace enrte les items par le margin-right des tes li.

Un code dans ce genre là :

CSS :
#menu{

margin-top: 12px;
margin-left: 110px;
float: left;}

#menu ul li {
  display:inline;
  margin: 0px;
}

#menu ul {
  margin:0px 20px;
  padding:0;
  text-decoration: none;
  clear: both;
}

Ce qui peut donner dans ton html :

        <div id="menu">
<ul>

    <li><a href="#">Accueil</a></li>
    <li><a href="#">#</a></li>
    etc..

</ul>
</div>

Modifié par gilles6975 (24 May 2007 - 08:58)

Bonjour,

Tu veux dire que dans le bout de code

#menu ul li {

  display:inline;

  margin: 0px;

}

Je dois rajouter un margin-right ?

Si c'est cela, la valeur est différente pour chaque rubrique du menu donc ca risque de pas aller, non ?

En fait tu crées une div menu que tu positionnes dans ta page. C'est l'espace ou sera le menu. Apres tu positionnes cet espace.

Ici le margin-left de #menu à 110px; ce qui permet de démarrer au bon endroit en latéral. Le margin-top permet de positionner la hauteur. (dans ton cas 12px)

Après le margin-right des li permet de faire l'espacement régulier (tu avais 20 px) entre les différents item.

Apres la largeur des li va s'adapter automatiquement.

Si par hasard tu veux un espacement plus grand. Tu crée un id avec un margin-right différent et tu appelles <li id="espacementplusgrand">

Est ce clair ?

édition : Héhé j'ai oublié un bout de code !!

#menu li{
margin-right: 20px;}

Modifié par gilles6975 (24 May 2007 - 10:19)

Donc le margin-right (à 20 px par ex) va s'appliquer pour chacune mes rubriques (item) entre elles ?

Le code est donc :

#menu{
margin-top: 12px;
margin-left: 110px;
float: left;
}

#menu ul li {
  display:inline;
  margin: 0px;
}

#menu ul {
  margin:0px 20px;
  padding:0;
  text-decoration: none;
  clear: both;
}

#menu li{
margin-right: 20px;
}

C'est ca ?

Oui c'est ca sachant que.

#menu ul positionne la liste dans le conteneur du menu (#menu)

Essaye tu verras tout se mets en place assez simplement.

Ok j'ai testé, g modifié quelques valeurs mais g encore un décalage au niveau de ma div "up" entre IE et FF (sous FF elle n'apparaît pas en entier, la partie du haut manque).

Comment puis-je agrandir l'espace entre chaque rubrique ?
Par le margin-right ca marche pas.

G trouvé pour agrandir l'espace mais pour le "up" je cherches toujours...

G revu un peu le design mais g toujours des erreurs et des décalages.

Ma div "up" semble posait souci mais je trouve pas où et pourquoi.
Modifié par bibou04 (24 May 2007 - 16:42)

il faut rajouter dans le css un margin-top de 34px (hauteur du menu) pour le #up sinon il se glisse sous le menu.

sous firefox ca passe comme ca.
Modifié par gilles6975 (24 May 2007 - 19:27)

Ca marche nikel sous FF mais ca règle pas le problème sous IE.
Si tu regardes sous IE à l'adresse www.peex-design.net/v4/, tu verras la différence.

En rajoutant les marges a 0 pour le sélecteur universel c'est mieux et ca semble passer sur ie 7.0 et FF.

dans la css rajouter :
*{
  margin: 0px;
  padding: 0px;
}

apres tu positionnes tes élément un par un.

Dans conteneur il faut que tu définisses le padding-right sinon le texte va jusqu'a 900px.

Attention un éléments auquel tu appliques juste un margin-left par exemple prendra comme valeur pour les autres margin celles par defaut.

Prendre l'habitude, comme pour les padding de définir les 4 marges avec l'écriture raccourci ca va vite

exemple on tourne dans le sens horaire en commençant par le haut :

margin: 0px 5px 10px 8px;

equivaut a margin :haut droite bas gauche;

ou encore margin: 0px 5px;

equivaut à marge haut et bas : 0px
marge droit et gauche : 5px

Modifié par gilles6975 (25 May 2007 - 09:13)

G modifié toutes les marges de mon css et rajouté le bout de code universel.

Peut-être ca passe sous IE 7 mais pas sous les versions antérieures.
Le problème est toujours là.

Bizarre...

EDIT : J'ai fais quelques recherches sur le site, penses-tu que je dois envisager d'utiliser les commentaires conditionnels et créer 2 feuilles de style, 1 pour IE7 et FF et 1 pour IE6 ?
Modifié par bibou04 (25 May 2007 - 11:43)

Faut voir : il se pourrait bien que ca vienne de la

Tu peux me faire une capture sous ie 6 par exemple (je l'ai plus sur mon ordi en me pointant les différences avec ff)
Modifié par gilles6975 (25 May 2007 - 11:58)

Je viens de faire la manip et après quelques réglages sur chacune des feuilles de style, ca semble fonctionner.
En fait, j'ai créé 2 feuilles de style et j'ai mis le bout de code suivant entre les balises <head> de mon html, en prenant soin de supprimer l'ancien lien vers la feuille de style.

<!--[if IE 7]> <-->
   <link rel="stylesheet" href="peex.css" type="text/css" />
<!--> <![endif]-->

<!--[if lte IE 6]>
   <link rel="stylesheet" href="peex-old-ie.css" type="text/css" />
<![endif]-->

Par contre, peux-tu me dire si tu vois le mot de bienvenue sous IE7 toi car quelqu'un sur msn m'a dit que non, qu'il ne voyait que le titre "Editorial".
Modifié par bibou04 (25 May 2007 - 12:12)

Ca bug drôlement la !

Met ton texte dans des balise <p> elles servent à ca.

Apres il faut un paddin-right dans #conteneur de 110 px a-priori.

Oulalala !! Moi qui croyait que c'était finis !!

j'ai fais tes modifs au final et mon #conteneur ne s'adapte pas au contenu sous FF (et IE7 je suppose). Le code de la feuille pour FF et IE7 est le suivant :

#conteneur {
	background-image: url(im/body.jpg);
	background-repeat: repeat-y;
	width: 708px;
	height: 1px;
	text-align: justify;
	padding: 0 110px 25px 110px;
}

Pour l'alignement à droite, je crois que ca vient de la decoupe de mon fond "body.jpg" qui fait 900*1px.
Modifié par bibou04 (25 May 2007 - 13:55)

Bonjour bibou04

Afin de respecter les règles du forum (et plus particulièrement la 11) que tu as acceptées en t'inscrivant, je te demande de bien vouloir modifier tes interventions en remplaçant le langage sms par du français clair, s'il te plait.

Ce forum est accessible à tous, encore faut-il que les contenus des échanges le soient aussi.

Je te remercie par avance

dominique a écrit :
Bonjour bibou04

Afin de respecter les règles du forum (et plus particulièrement la 11) que tu as acceptées en t'inscrivant, je te demande de bien vouloir modifier tes interventions en remplaçant le langage sms par du français clair, s'il te plait.

Ce forum est accessible à tous, encore faut-il que les contenus des échanges le soient aussi.

Je te remercie par avance

J'ai modifié mon dernier post. 1000 excuses !

J'ai finis par trouver ! Mon neurone éteint refonctionne de nouveau. Il fallait mettre dans le css de FF, la hauteur à "auto" et non à "1px".

Merci pour ton aide.

A bientot.
Modifié par bibou04 (27 May 2007 - 11:32)