Différence IE7 / FX, malgré validation de la feuille de style

Bonsoir à tous.

Je solicite votre aide à propos d'une page d'acceuil d'un site qu'il nous fallait réaliser en cours de multimédia, à l'IUT.

L'adresse de la page est la suivante et celle de la feuille de style css.

Comme vous pouvez le voir, dans FX il y a un décalage avec les liens du bas, qui descendent trop ainsi que les images représentant les différentes enseignes du groupe.

Sauriez-vous d'où celà vient?

Je vous remercie d'avance et vous souhaite une bonne soirée.

Bonsoir et bienvenue sur ce forum,

Je ne sais pas si la feuille de style est validée (pour mémoire, on rappellera que la validation de la syntaxe employée dans la feuille de style ne signifie pas qu'elle est exempte d'erreurs de conception, loin de là !), mais en tout cas le code HTML, lui, n'est pas valide XHTML 1.0 Transitional. La faute aux images, qui n'ont pas d'alternative textuelle.

Ce qu'en dit le validateur HTML : This page is not Valid XHTML 1.0 Transitional!
À propos du choix pertinent des alternatives textuelles : Bien utiliser le texte alternatif.

Note en passant : même si l'intérêt de travailler sur l'accessibilité de cette petite réalisation n'apparait pas comme évident, je conseille fortement de se pencher sur cette question... la problématique de l'accessibilité des éléments graphiques étant un très bon premier pas. Avec un peu de chance, le ou la prof qui a demandé ce travail sera sensible à cet effort (pour ne pas mentir, il faut avouer que peu le sont... ce qui est fort regrettable).

Il y aurait beaucoup à critiquer sur ce premier jet (design en hauteur fixe inadapté au Web..., utilisation du positionnement absolu à tout va, images transmettant des informations placées en image de fond, etc.), mais on a tous commencé quelque part, donc je ne détaillerai pas les erreurs de conception qui émaillent cette page.

Pour le problème soulevé, donc, il me semble que ça vient des marges par défaut de l'élément ul du menu. Il faudrait les remettre à zéro :

.menu ul {
	margin: 0;
	padding: 0;
}

J'ai ajouté ce qu'il manquait à la page pour la rendre valide

Sinon pour la conception, elle n'est pas de moi, mais imposée dans le TP. Il y a une marche à suivre et il faut s'y conformer :s et je sais que ce n'est pas le mieux, mais ainsi le prof ne s'embête pas trop...

Je vais essayer de modifier les marges

Merci beaucoup

Edit: j'ai essayé en mettant margin et padding à 0, mais le problème ne semble pas venir de là...
Modifié par taggeur (21 Mar 2007 - 23:00)

Salut,

je confirme la solution de Florent, un :

.menu ul {
margin-top:5px;
}

Donne un résultat qui sauve à peu près les apparences pour firefox. a peu près ça veut dire sans aucun agrandissement du texte par exemple.

A mon avis vouloir caler la mise en page sur la seule image "fond.png" c'est vraiment très très chaud
Modifié par Christian Le Bouler (21 Mar 2007 - 23:09)

Ahh merci beaucoup, ça a marché il ne me reste plus qu'à trouver la solution pour les enseignes du groupe envergure et ce sera "bien".

taggeur a écrit :
Ahh merci beaucoup, ça a marché il ne me reste plus qu'à trouver la solution pour les enseignes du groupe envergure et ce sera "bien".

Elles apparaissent un petit peu trop basses ces enseignes ...

.enseignes {
position: absolute;
top: 330px;
left: 180px;
height: 122px;
width: 330px;
} 

avec 115px dans height, ça serait sans doute mieux, car ne chevauchant pas le bandeau vert (avec le texte noir qu'on ne peut pas lire dessus par manque de contraste )
Sinon, au niveau du design c'est un site typiquement "bed and breakfast", et ils ne sont en général pas fait avec des div, mais des templates et des tables, donc c'est déjà un (petit) pas vers un Web <tableless /> (on peu rêver, non ?)

Arf, j'ai bien essayé cette modification mais quand ca passe sur FX, ça merdouille sur IE.

Il faudrait que je revoie toute la page carrément, il y a des éléments qui ne sont pas interprêtés pareil sur FX que sous IE.