Affichage Firefox élément menu décalé [Résolu]

[brisso]

Bonjour à tous,
je suis actuellement en train de faire un site internet pour une bijouterie.
Mon problème est le suivant :
Mon menu du haut fonctionne très bien mais, sous FF le dernier "bouton" est légèrement décalé vers le bas.
Sur les autres navigateurs cela fonctionne bien et tout est bien aligné.

Voici le lien provisoire : http://b-website.com/alodra/index.php

J'en profite aussi pour vous poser une seconde question, le site ne fonctionne pas du tout sous IE.
En effet, il s'affiche 1/2 seconde puis page blanche totale !
Il y a un petit rapport d'erreur en bas à gauche sur le "!" que je ne comprend pas trop.

Par avance merci pour votre aide


EDIT :
Avec les codes ça ira mieux ^^

CSS

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
 
/* Menu de Navigation  -----------------------------------------------------------------------------------------------------------------------------*/
#bandeau  						{ margin:auto; height:130px; width:1000px; background:url(../images/logo.png); background-repeat:no-repeat; background-position:right;}
 
 
#navigation						{ display:inline; float:left; width:800px; height:130px; margin:7px 0 0 -250px;}
ul#navigation					{ text-transform:uppercase;}
ul#navigation li 				{ float:right; display:inline; margin: 0 0 0 50px;}
ul#navigation li a				{ font-family:arial, sans-serif; display:block; padding:44px 0 0 0; text-decoration:none; color:#000000; font-size:14px; font-weight:bold;}
ul#navigation li a:hover,
ul#navigation li a.current		{ background:url(../images/triangle.gif) no-repeat center top;}
.meta							{ font-weight:normal;font-family:'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size:11px; color:#999999; line-height:16px; text-transform:none; text-shadow:none;}

[NoSmoking]

Bonjour,

J'en profite aussi pour vous pauser une seconde question, le site ne fonctionne pas du tout sous IE.
En effet, il s'affiche 1/2 seconde puis page blanche totale !
Il y a un petit rapport d'erreur en bas à gauche sur le "!" que je ne comprend pas trop.

peut être lié à cela...

Envoyé par console ERREUR FireFox

Erreur*: $("#slideshow").nivoSlider is not a function
Fichier Source*: http://b-website.com/alodra/newsletter/scriptemail.js
Ligne*: 8

sous FF le dernier "bouton" est légèrement décalé vers le bas.

pas vu le soucis, mais il est vrai que j'ai la vue qui baisse

[brisso]

Bonsoir et merci pour ta réponse.
Alors, j'étais en train de chercher depuis la publication de mon post et j'ai en effet trouvé que le problème venait de nivoslider et surtout du jquery.min que j'ai maintenant appelé via googleapi.
Le problème sous IE est plus ou moins résolut. Le site s'affiche ! ouf..

Sinon le nivoslider ne fonctionne plus depuis que j'ai la librairie à jour, je vais chercher de ce côté là.

Pour mon menu sous FF le décalage est très important, j'ai fait le test pour le "redresser" et un margin top -50px est nécessaire ! Évidemment, totalement inutile mais c'était pour tester...

Si tu me dit que tu ne l'as pas chez toi ça pourrait me rassurer mais j'ai essayer sur 3 machines différentes et j'ai le problème sur les trois !

Et encore un nouveau problème sous IE ce coup si : au niveau du menu du haut toujours, il est décalé (en mode non compatibilité) vers le bas et le logo pourtant en background no repeat est répété... en mode compatibilité le menu est bien aligné en haut mais du coup c'est ma colonne de droite qui disparait !

Bref...

[Candygirl]

Bonsoir,

Pour le décalage de ton bouton contact sur FF, Il semblerait que cela provienne d'éléments <a></a> parasites dans ton code:

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="bandeau"><a>
 
 
		</a><ul id="navigation"><a>
 
         			</a><li><a></a><a href="contact.php"><span class="meta">Contactez nous</span><br>Contact</a></li>
 
         			<li><a href="gemmes.php"><span class="meta">Nos pierres</span><br>Gemmes</a></li>
 
 
		 			<li><a href="bijoux.php"><span class="meta">Créations</span><br>Bijoux</a></li>
 
 
 
		 			<li><a href="boutique.php" class="current"><span class="meta">Présentation</span><br>Boutique</a></li>
 
 
		 			<li><a href="index.php"><span class="meta">Page d'accueil</span><br>Accueil</a></li>
 
 
	   </ul>
</div>

Au passage, tu devrais commencer par valider ton code.

[brisso]

EUh...je ne sais pas où tu a trouvé ce code. Chez moi j'ai ça dans code source de la page .

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="bandeau">
 
 
		<ul id="navigation">
 
         			<li><a href="contact.php" ><span class="meta">Contactez nous</span><br />Contact</a></li>
 
         			<li><a href="gemmes.php"><span class="meta">Nos pierres</span><br />Gemmes</a></li>
 
 
		 			<li><a href="bijoux.php"><span class="meta">Créations</span><br />Bijoux</a></li>
 
 
 
		 			<li><a href="boutique.php"><span class="meta">Présentation</span><br />Boutique</a></li>
 
 
		 			<li><a href="index.php" class="current"><span class="meta">Page d'accueil</span><br />Accueil</a></li>
 
 
	   </ul>
</div>

Et en réalité je passe par du php pour mes pages avec des "modules" en include et de ce fait j'utilise du conditionnel pour définir ma classe active sur mon bouton de menu, d'où mon premier code indiqué ci-dessus... je ne comprend pas d’où vient ce problème surtout que tous les autres navigateur testés : opera, safari, chrome et même IE (oulala...) fonctionne bien à ce niveau...
help me....

[brisso]

je me suis penché sur les balises <a> dont tu me parlais et j'ai retiré mon

Code :

<a name="top"><a/>

après body...et là ça marche...hmhm ?
Pourquoi dont ?

Du coup, je l'ai collé après ma div menu, ici :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body onLoad="Ajuste_DIV()">
<div id=texture_haut></div>
 
<!-- début du bandeau -->
 
<div id="bandeau">
 
 
		<ul id="navigation">
 
 
 
	   </ul>
</div>
<a name="top"><a/>
<!-- fin du bandeau -->

et ça marche !
Encore plus beau ! maintenant je n'ai plus le problème de mon logo dédoublé sous IE en mode normal !

Reste plus qu'à m'occuper du petit soucis de colonne qui se retrouve très basse sous IE !
Des idées ??

Merci

[brisso]

Me revoilà !
J'ai pas mal parcouru le web à la recherche d'éventuelle problème de positionnement de colonne avec IE et il semblerait que IE8 soit toujours aussi nul que le 6...
Les float il aime pas ça, alors vu que mon positionnement de corps de page était float left puis float right pour la colonne qui me dérangeait, j'ai tout simplement demandé à la mémère de passer comme suit :

Code :

#colone	{ margin:0; width: 250px; height:100%; background:url(../images/colone_bg.png); position:absolute; top:0; right:0;}

Et elle se cale exactement comme voulu !

une fois de plus merci Internet Explorer de nous faciliter la tâche

Bonne journée et à bientôt !

[Candygirl]

Envoyé par brisso

EUh...je ne sais pas où tu a trouvé ce code. Chez moi j'ai ça dans code source de la page

En sélectionnant ton menu et choisissant code source de la sélection FF m'affichait ce que je t'ai CC et firebug m'affichait de même.

Contente de voir que tu sembles avoir résolu tes problèmes mais tu devrais néanmoins valider ton code pour plus de sécurité concernant ta structure ou encore passer à un doctype plus en accord avec ton code (genre en transitionnel)

[brisso]

merci pour tes conseils.
Je ne comprend malheureusement pas tout concernant la validation des erreurs.

J'avais chercher le meilleur doctype sur un site (alsacreation) si je me souviens bien et je pensais qu'il s'agissait du plus adapté.

Pourrais-tu m'en dire plus ?
Merci

[Candygirl]

Opter pour le doctype strict signifie se plier à ses exigences. Dans les erreurs retournées par le validateurs, on peut en voir plusieurs directement liées au choix du doctype. Par exemple tu ne peux mettre un lien directement dans le body en strict.

Pour tes autres erreurs de validation, tu as mal fermé ton lien, les éléments de titre n'existent que jusqu'au h6, l'attribut alt est obligatoire dans la balise img,... Corrige déjà celle que tu comprends et reviens demander de l'aide pour une erreur précise que tu ne comprendrais pas.

[brisso]

Salut Candygirl et les autres.
j'ai quasiment fini le site, il ne reste plus qu'à ajouter le contenu texte et faire quelques nouvelles photos.
Pourrais-tu me guider vers un bon tutoriel pour la validation W3C?
Merci

[brisso]

C'est encore moi !
ma première page est validée en Strict XHTML 1.0 !!

http://validator.w3.org/check?uri=ht...alidator%2F1.2