Problème compatibilité IE : menu en liste...

Bonjour,

Voilà je fais un site pour lequel j'essaye de bien respecter le tout en séparent le contenu et le contenant avec le css, donc ca donne cela pour le moment:
http://barmafia.free.fr/

La feuille de style se trouve ici : http://barmafia.free.fr/bar.css


Donc comme je le disais j'ai un problème de compatibilité avec IE, jugez par vous même :

- La bonne mise en page (Firefox)

- La mauvaise mise en page (IE)


Comme vous pouvez le constater les items des boites ne sont pas centrés, j'ai l'impression que cela vient du fait que ce sont des listes, pour lesquels j'ai appliqué un list-style: none; donc les deux navigateurs ne les affiche plus mais sous IE l'emplacement est toujours présent, du coup ca décale tout

J'ai essayé de regler les padding mais cela n'a pas l'air de fonctionner


Merci de votre aide


Pierre

Vous n'avez pas une petite idée pour moi ? (j'ai été orienté ici depuis les forums de geckozone)

En mettant ca, ca dit quoi ?

#menuG ul, #menuD ul {
	padding: 0;
	margin: 5px 0 0 0;
}
#menuG li, #menuD li {
	list-style: none;
	border-bottom: 1px solid #D2CBC4;
	font-size: 11px;
        margin: 0;
        padding:0;
        text-align:center;
}

Modifié par CyrilCS (07 Jun 2005 - 02:13)

Aucun changement, ca me fait toujours le même soucis sous IE...

Désoler la je peu vraiment pas t'aider,
mais par contre ya un truc qui me fait , mais c'est hors sujet dsl:

c'est le titre de la premiere news:
News d\'essai

Il y a un slashe ! Tu doit utiliser la fonction stripslashes() sur tous les textes venant d'une BDD que tu affiche, ca retire les slashes comme sont nom l'indique.

Bonne chance pour la suite

Ok merci je regarderais cela tout à l'heure

Par contre toujours au même point pour le css...

Ecoutes, je n'observe ton problême, ni sur FF, ni sur IE, ni sur Opera?!!
tu as trouvé ton probleme?!!

Maxwell a écrit :
Ecoutes, je n'observe ton problême, ni sur FF, ni sur IE, ni sur Opera?!!
tu as trouvé ton probleme?!!

Non toujours pas :-s

J'ai bien revérifié sous IE, (j'ai bien vider les temp et tout le tralala) rien à faire toujours le même résultat

Mobman02 a écrit :
c'est le titre de la premiere news:
News d\'essai

Il y a un slashe ! Tu doit utiliser la fonction stripslashes() sur tous les textes venant d'une BDD que tu affiche, ca retire les slashes comme sont nom l'indique.

C'est corrigé, il reste plus qu'a trouver pour le css

et si au lieu de ca

	<div id="menuImage" class="boite">
		<h3 onclick="switchMenu(document.getElementById('menuImageItems'), this);">Image</h3>

		<ul id="menuImageItems">
			<li><img src="../images/horch1_small.jpg" alt="Image de la semaine" height="120" width="160"></li>

		</ul>
	</div>

tu mettais ca :

	<div id="menuImage" class="boite">
		<h3 onclick="switchMenu(document.getElementById('menuImageItems'), this);">Image</h3>

<img src="../images/horch1_small.jpg" alt="Image de la semaine" style="height:120px;width:160px;display:block;margin:0;padding:0">
	</div>

Ensuite il te suffit plus qu'a mettre le padding et margin que tu veux et ce sera en théorie bon

En relisant le code que j'ai écrit je viens de me rendre compte que ca allait pas aller à cause de ta fonction js, donc deux solution soit rajouter un div autour de l'image avec ton bon id.

Soit réecrire ta fonction js

Car en la regardant, je vois qu'on peut faire mieux

deja, une chose simple :
switchMenu('menuImageItems', this);

et tu economiseras quelques octets , bien sur faut que tu fasses le document.getElementById dans la fonction

ensuite si t'es plus courageux, il est possible de faire
switchMenu(this); comment cela marcherait ?

tout simplement, à partir de this, tu remonte à l'element Parent, attention au node text, voir mon post ici

ensuite tu fais une boucle sur tout les elements enfants en mettant un display:none, sauf aux elements h3

j'ai utilisé cette technique pour les blocs de
Codes-SourceS

en y réflechissant on pourrait peut etre meme enlever le this, et recuperer le this dans la fonction, je ne sais pas trop comment par contre, (this ?)

ce qui reviendrais à passer de :
<h3 onclick="switchMenu(this);" >

Soit déjà 44octects de gagner + l'id de l'element que tu voulais cacher qui deviens inutile, donc en tout pour ta page autour de 1ko

c'est pas grand chose, mais sur CodeS-SourceS, on a pas beaucoup de bande passante, donc 1ko c'est enorme
Modifié par CyrilCS (09 Jun 2005 - 12:13)

Merci

Donc si je met un div pour l'image ca ne décale pas ok, cependant cela m'interesserait de réécrire la fonction js mais bon en javascript je ne m'y connais pas du tout (code js n'est pas de moi).

Je comprends le principe de ce que tu veux me faire faire avec le parent mais par contre pour la réalisation... euh je ne sais pas du tout comment faire.


Merci

ton code actuel est comme ca

function switchMenu(element, header) {
	if (element.className == "hiddenMenu") {
		element.className = "";
		//header.className = "";
	} else {
		element.className = "hiddenMenu";
		//header.className = "hiddenheader";
	}
}

puis tu l'appelles comme ca

switchMenu(document.getElementById('menuImageItems'), this); 

on peut deja faire facilement

function switchMenu(elmt, header) {
        var element = document.getElementById(elmt);
	if (element.className == "hiddenMenu") {
		element.className = "";
		//header.className = "";
	} else {
		element.className = "hiddenMenu";
		//header.className = "hiddenheader";
	}
}

et tu n'auras plus qu'a l'appeller comme ca

switchMenu('menuImageItems', this); 

aprés pour supprimer le premier paramètre, j'ai pas le temps, regarde comment j'ai fait sur www.aspfr.com c'est "un peu" plus compliqué mais les fonctions y sont

Je crois cependant qu'il y a un topic javascript ici et n'oublie pas d'indiquer dans le titre de ton post
Modifié par CyrilCS (09 Jun 2005 - 20:05)

Salut,

Ok merci j'ai fais la première simplification ca me va très bien je verrais par la suite pour l'amélioration...

Par contre sous IE, les items des menus ne sont toujours pas centrés, toujours à cause de l'amplacement de la puce inexistante, c'est pas très grave mais bon est-ce qu'on peut tout de même le corriger ?


Merci

Bonsoir,

Tu vas être content Pierre, j'ai jeté un oeil à ta feuille de style et j'ai trouvé ce qui cloche.

Conseil : Quand on rédige une feuille de style, il faut bien faire attention à l'ordre dans lequel on place les différents styles. En premier, il faut mettre les styles de base (généraliste) qui n'ont pas de classes ni d'id (genre body, html, form input, ul,li,...) et qui vont constituer le style par défaut. Et ensuite viennent, les différents styles avec id et classes (genre #toto .petit ul li ou #toto h1). Cela permet de ne pas définir deux fois un style.

Ton erreur : Dans ta css, Tu définis un style pour tes menus (et plus précisément pour leurs balises li) et puis plus bas tu changes le style de toutes les balises li avec le code suivant :

li {
	list-style-type: square;
	list-style-position: inside;
}

Déjà, ce n'est pas ordonné mais même si cela l'était cela ne marcherait pas car il faut que tu changes la valeur de list-style-position pour les li de tes menus (outside si je me rappelle bien).

Si tu ne comprends pas, écris moi et je t'expliquerai.

Juste un dernier conseil pour la route, puisque tu as l'air de vouloir "respecter tout", fais attention à tes tailles de polices. Je m'explique : il vaut mieux utiliser des unités "em" que des "px" car cela permet notament de grandir la taille des polices pour les deficients visuels (menu affichage sous menu taille du texte dans le menu principale du navigateur). Quelque soit l'unité, cela marche pour mozilla firefox mais pour des navigateurs tel qu'internet explorer ce n'est pas le cas. Le coup de faire diminuer ou grandir la taille des polices t'oblige à penser à la taille des éléments qui englobe tes polices... C'est un casse tête quand on veut vraiment faire quelque chose de bien mais quelle satisfaction !

A bientôt !

Djé

Salut,

Merci à toi j'ai très bien compris et tout de suite modifié et cela fonctionne (j'ai aussi modifié qq trucs pour mettre en premier mes styles généralistes !)


J'essaye de faire un site qui puisse être compatible pour le plus de personne possible (but d'un webmaster, non ?), pour les tailles en em je veux bien mais j'aimerais savoir comment on passe d'un taille en px à une taille en em (je veux dire par là le rapport entre les deux).


Merci


Pierre