Problème d'affichage CSS sous Safari Mac

Bonjour,

Je viens de développer un site pour un client: www.temex.com

Tout fonctionne parfaitement sur IE, Firefox et Netscape sur PC, ainsi que Firefox sur Mac. Par contre avec Safari, le client vient de me signaler que toute la partie header s'affiche en bas de la page au lieu d'en haut (voir captures browsercam ci-dessous)... Je n'ai malheureusement pas encore de Mac (fait partie des investissements à venir)... Quelqu'un pourrait t-il tester avec un Mac et essayer de voir d'ou vient le problème ? Mille mercis d'avance...



Modifié par dniry (01 Apr 2008 - 16:13)

Ton bloc DIV ayant comme id "header" est mal positionné avec Safari. Il est présent mais est affiché au dessus de ton DIV ayant comme id "footer".

Si ça peut te rassurer, tu peux observer ce phénomène également sous Safari Windows !

Merci beaucoup d'avoir regardé Alphonse... Cela confirme ce que me disait le client. Une idée de quoi cela pourrait venir ? Je viens de repasser le CSS au peigne fin et tout a l'air bon... je n'ai pas la moindre idée quand à la source du problème...

En tout cas, maintenant tu sais que tu peux mener tes tests avec Safari 3 sous Windows.
http://www.apple.com/fr/safari/download/

Pour le problème rencontré, je commencerais par valider le code HTML et CSS si ça n'est pas déjà fait, puis à tester avec Javascript désactivé à tout hasard.

Côté positionnement CSS, je suis un peu étonné par le menu placé en dehors du bloc #header côté HTML, alors que visuellement il est en plein dans ce bloc...). Je tenterais aussi d'afficher la page en supprimant certains éléments qui pourraient «parasiter» le positionnement de div#header, tels que tous les éléments placés avant div#header dans le code HTML, à tout hasard.

PS: j'ai déjà vu des intégrations un peu plus propres que celle-ci...
Modifié par Florent V. (01 Apr 2008 - 17:51)

Oui, j'avais déjà validé via le site W3C et tout passait. Il se peut en effet que le problème vienne du menu JavaScript. Je vais regarder de ce coté là et effectivement me servir de Safari Windows pour tester, même s'il paraît que celui-ci est encore pas mal bugué.

Mille mercis pour tes conseils en tous cas.

Petite denière question, si tu as 5 minutes, concernant ton commentaire "PS: j'ai déjà vu des intégrations un peu plus propres que celle-ci...": quelles suggestions / conseils rapides pourrais-tu me donner ? Ca ne fait pas longtemps que je me suis mis au CSS / XHTML. J''avais l'habitude de tout faire en tableaux avant... Je suis toujours preneur de bons conseils Merci encore.

Alors en vrac:

1. le fait que le premier menu soit placé en dehors de div#header;
2. la présence de styles inline (via l'attribut HTML style pour des éléments qui auraient pu être stylés directement dans la feuille de styles;
3. un <div style="padding-left: 20px; padding-right: 10px; padding-top: 29px;">
et d'autres choses du genre dans le code (à priori inutile en utilisant convenablement la feuille de styles);
4. le fait que le premier menu soit entièrement généré en Javascript (problème d'accessibilité, malgré la redite du menu en fin de page);
5. l'absence de page d'index pour chaque rubrique (problème de conception) et le fait que malgré cette absence de page d'index les intitulés de rubriques dans le menu Javascript réagissent comme des liens (pointeur, soulignement);
6. l'absence totale de balisage sémantique (titres de section, paragraphes, listes, etc.);
7. l'utilisation de hauteurs fixes (height: Xpx) et de tailles de texte fixes en pixels (font-size: Ypx).

OK. Merci pour les remarques. Je tacherai d'en tenir compte à l'avenir.

Pour les menus JS, je n'avais pas vraiment le choix, même si je n'aime pas trop ça non plus. Le client voulait absolument des menus déroulants comme ça. Qui plus est, le contenu étant entièrement dynamique, le JS est en fait généré via PHP / MySQL.