[css] Problème design firefox... - Un calque incliquable

Bonjour, je refais le design de mon site mais je rencontre un problème avec Firefox. Le contenu du menu de droite est impossible à sélectionner et on ne peut pas cliquer sur les liens (voir partenaires).

L’url de la page : http://sandrock.mp4.free.fr/nouveau_design.php
L’url de la feuille de style : http://sandrock.mp4.free.fr/style02.css

D’ailleurs il y a quelque sproblèmes d’affichages avec les menus sous IE…

Bref est ce que quelqu’un peut m’aider ?

Ne dis rien : position: absolute?

Ah non, position: relative + float: right.

Et en plus y a un tas de position: relative. omfg.

Tu joues vraiment la carte de l’inconnu toi :slight_smile: normalement, tu n’as juste besoin que du float: right. Sinon éventuellement tu peux utiliser position: absolute (et faire du postionnement absolu of course) et right pour positionner correctement ton basar ainsi que margin-right pour le contenu.

Sinon, honnêtement révise un peu les couleurs des liens… C’est pas franchement ce qu’il y a de plus visible. Au passage, barrer les liens… ouille say moche quoi :slight_smile:

Les couleurs sont aussi assez sombre, si bien que tu ne lis pas ce qu’il y a écrit sur les images des menus.

Bref :slight_smile:

Voila, j’ai retiré tous les position:relative inutiles (qu’est ce que j’ai eu besoin de mettre ça moi ?) et le problème majeur est résolu. :slight_smile: (Merci à toi Sans-Nom)

Reste maintenant le problème des utilisateurs d’internet explorer 6 pour les menus de gauche. Il y a un décallage des bordures des menus. Le pire c’est que je ne sais pas ce que ça donne sous IE5… :confused:

Pour els bordures j’ai trouvé !


.int{
	/*width:190px;*/
	padding:5px;
	margin:0;}

En fait l’indication de la taille faisait s’élargir un peu le calque et comme il manquait background-repeat:no-repeat; bah le fond se répétait.

Par contre, je lance un avis aux utilisateurs de Internet Explorer 5 pour me dire s’il y a des mroblèmes ! Merci… :jap:

Sûrement la même chose :slight_smile: ils ont pas du changer le moteur entre les deux :smiley:

Pour les bordures, je pense que tu parles du bas qui apparaît bizarrement non?

Au pire, fous un screenshot de la chose sous IE6 et met en rouge les éléments qui différent.

Pour le problème d’IE (les bordures se terminent trop loin), le voici en image :
http://sandrock.mp4.free.fr/rohhlalalala.jpg

J’ai remarqué un autre problème, quand on regarde les menu de gauche avec firefox/internet explorer, on remarque que les liens ne sont pas espacés de la même manière. Voici une image explicative :
http://sandrock.mp4.free.fr/maiseuh.JPG
Moi mon but est d’obtenir sous IE le même résultat que sous Firefox… Alors si vous voyez quelquechose de bizarre dans ma feuille de style, dites le moi…

Pour les bordures, vire les espaces :

  <div class="sectionLinks"> 
	<img src="images/design02/elmt_menu_jeux.gif" alt="" />
	<div class="int"><ul> ... </ul></div>
	<img src="images/design02/elmt_menu_bas.gif" alt="" />
  </div>

doit devenir :

<div class="sectionLinks"><img 
  src="images/design02/elmt_menu_jeux.gif" alt="" /><div
  class="int"><ul> ... </ul></div><img 
  src="images/design02/elmt_menu_bas.gif" alt="" /></div>

Typiquement, IE lit l’espace en trop, et l’affiche. Et comme il fait 12pt (une taille supérieure à ton image en fait), il merdouille.

Pour l’espaçage des liens, ça dépend ce que tu fais de tes listes. Les listes sont très chiantes à customiser.

Bon pour les fins de bordures, il suffit bel et bien de supprimer les espaces (et passages à la ligne) donc ce problèe est résolu.

Sinon pour l’espacement, le problème est en fait dut à display:block. Lorsque ce paramètre est utilisé il y a un espace énorme qui se crée sous IE. Je le supprimerai bien mais je souhaite les liens soient cliquables sur toute la largeur du menu. Je pourrais ainsi mettre un effet lorsque le pointeur est au dessus du lien. Mais bon IE n’aime pas les display:block (il gache toujours tout lui). :heink:

Bref, je vais mettre la page à jour et je reviens.

tu dois avoir des margin ou padding -top/-bottom.

Bon voila j’ai mis mon bordel à jour.

Pour les espacements de IE, il n’y a ni padding ni margin, j’avais déjà vérifié (d’ailleurs je les ai mis à 0). D’ailleurs il y a aussi line-height mais bon il n’influe pas lui nonplus.
Bref, je vais laisser comme ça.

Sinon, j’ai revu les couleurs. Le bas des menus sont corrects maintenant.
Reste plus qu’à espacer les partenaires et à faire le bas des pages. Si vous avez des conseils, ils sont les bienvenus.

Lien vers la page : http://sandrock.mp4.free.fr/nouveau_design.php

Pour ton problème d’espacement, essaye en mettant des couleurs de fond sur les différents éléments. Au pire tente ça :

* { border: 1px solid #0f0; }

Ca sera moche, oui, mais ça t’affichera les différentes bordures des éléments : idéal pour debugger.

Arf j’ai beau ajouter des styles de déboggage, IE n’en connait aucun. J’ai essayé la bordure noir comme tu me l’a proposé, rien n’apparait sous IE. J’ai aussi essayé background-color:#FFFFFF. mais rien à faire IE connait pas.

Le probleme c’est pour ceu qui ont Mozila Firefox et IE6 meme la derniere version

Rajoute !important.

IE connaît *.

Il me semblait que !important ne servait qu’à établir des priorités dans la feuille de style et que justement seul IE ne connaissait pas… Enfin j’ai quand même essayé mais rien…

Je vais essayer de trouver les propriétés du paramètre display:block sur le net, peut etre que je trouverai une solution…

Essaye sur <li> directement alors.

Sinon : http://nanobox.chipx86.com/browser_support.php

Voilà j’ai trouvé ! :super:

Tout d’abord, une petite page sur l’utilisation des liens avec display:block : ICI.

Ensuite j’ai compris que le display:block induisait un passage à la ligne (d’ailleurs on peut voir en faisant Ctrl+A dans IE qu’il y a une ligne supplémentaire entre chaque lien). En me disant ceci, je me suis dit : “Et si on mettait la liste en en affichage ‘inline’ pour que les puces n’aillent pas à la ligne”. :ouch:

J’ai donc mit :


.sectionLinks a{display:block;}
.sectionLinks ul{display:inline;}
.sectionLinks li{display:inline;}

:sarcastic:
Et c’est résolu ! En plus il n’y a aucune influence sur Firefox. :smiley:
L’url : http://sandrock.mp4.free.fr/nouveau_design.php

Merci à toi Sans-Nom.
Je laisse le topic au cas où ça pourrait aider quelqu’un d’autre.

Sinon qu’est-ce que vous pensez du design ? (je frise le HS) :sarcastic:

C’est très sombre, et pas lisible sur les menus. J’ai vu ton ancien design, il est plus clair et lisible. © avis perso

Ta signature te vas comme un gant lol ! :paf: