possible problème de CSS ?!?

  • Auteur de la discussion Auteur de la discussion binocle
  • Date de début Date de début
WRInaute discret
Bonjour

J'ai un petit souci de mis en page lorsque j'essaie d'integrer certains script au design de mon site : ce souci n'est que visible sous Internet explorer :

Voila la page en question :

http://www.surf-bzh.com/phpmyannu/

alors qu'un affichage normal devrait donner quelques choses dans ce genre :

http://www.surf-bzh.com/

Le problème, comme vous avez du le remarqué vient du menu du haut qui en quelques sorte se dédouble...

J'ai exactement le même problème avec mon forum :

http://www.surf-bzh.com/forum/forum.php

J'arrive pas a comprendre ce qui ne va pas, étant donné que les m^mes style CSS marchent bien sur la plupart de mes pages (surement une balise qui nécéssite un margin et pading de 0, mais j'arrive pas a voir laquelle)

A+
 
WRInaute discret
surement une balise qui nécéssite un margin et pading de 0
Non pas du tout. Tu vis simplement la conséquence très indirecte d'un "bug IE" concernant le box model ("modèle de boîte") : pour IE la largeur d'une boîte comprend la marge et la bordure, ce qui est contraire à la recommandation.
Dans ton cas .conteneur (utilises plutôt #conteneur) a une bordure donc .conteneur n'a pas la même taille pour IE ( 2 px de moins) que pour les autres navigateurs. De ce fait IE n'arrive pas à loger toutes tes images qui sont ajustées à 770px en largeur, et met la dernière image menu.gif à la ligne.

solution : un petit hack pour causer gentiment à IE
* html .conteneur {width: 772px}
Bon c'est pédagogique, mais je le déconseille.

Il y a pas mal de chose à dire sur ta page, mais pour en rester sur le menu :
- éviter de devoir ajuster des images au pixel près tu rencontreras souvent des pb
- pour mettre du gris dans un rectangle (menu.gif) tu n'as pas besoin d'une image.
- mettre un menu en images lui fait perdre sa valeur sémantique (pb référencement, accessibilité ...). évites donc les images contenant des textes.
- si tu y tiens quand même renseignes au moins alt voire title sur ces images.
 
WRInaute discret
Oui mais si ca dépend de la largeur du tableau, pourquoi sur ma page d'index (ainsi que sur la plupart des autres pages ) ca s'affiche bien ????

- mettre un menu en images lui fait perdre sa valeur sémantique (pb référencement, accessibilité ...). évites donc les images contenant des textes.

oui je sais c'est pour bien pour cela qu'il y a un menu texte sur la gauche.

- si tu y tiens quand même renseignes au moins alt voire title sur ces images.

le "alt" y est :wink:
 
WRInaute discret
Oui mais si ca dépend de la largeur du tableau, pourquoi sur ma page d'index (ainsi que sur la plupart des autres pages ) ca s'affiche bien ????

Puisque ça marche je ne vais pas me lancer dans une investigation précise, mais pour répondre à ta question mon hypothèse est la suivante :
- sur certaines pages tu as du forcer le .conteneur à s'agrandir sous IE par présence de d'éléments fils suffisamment larges.
- la page qui faisait défaut était presque vide. Il faut savoir de plus que les images ont par défaut display:inline, et que ta barre de menu se comporte donc comme un <p> : retour à la ligne forcé par l'élément parent.

Bon surf.
 

➡️ Offre MyRankingMetrics ⬅️

pré-audit SEO gratuit avec RM Tech (+ avis d'expert)
coaching offert aux clients (avec Olivier Duffez ou Fabien Faceries)

Voir les détails ici

coaching SEO
Discussions similaires
Haut