[Résolu] Padding-top : différence entre IE7 et Firefox

Bonjour à tous !

J'ai un petit problème de padding-top dans IE7 sur un menu.
J'utilise une liste dont chacun des éléments est un lien. chque lien a une image de fond de 143px. Et bien sur IE7 le lien dépasse 143px mais je ne sais pas pourquoi.


Le css :

#menu ul {margin:0; padding:0; list-style-type:none;}
#menu li {padding:0; float:left; margin:7px 15px 7px 15px; display:block; width:100px; border:none; }

#menu a {
	margin:0;
	display:block; 
	width:100px; 
	padding-top:143px; 
}


#menu a#item1 {background:transparent url(../ressources/img/icones/accueil/icoMario.jpg) no-repeat; }
#menu a#item2 {background:transparent url(../ressources/img/icones/accueil/icoSpiro.jpg) no-repeat; }
...

et la page html :

<div id="menu">
<ul>
<li><a id="item1" href="mario/" title="marionnettes"></a></li>
<li><a id="item2" href="spiro/" title="spiro"></a></li>
...

Je m'en suis aperçu en réduisant le padding-top : sur IE7, l'espace en bas diminue mais sur Firefox l'image est grignotée.

Une idée ?
Modifié par Mucsy (04 Mar 2007 - 15:17)

Pourquoi ne pas utiliser height au lieu de padding ?

Bonjour,

On se dépêche de remettre les images dans les liens <a>, sous forme d'éléments accessibles <img ... alt="ici une alternative pertinente">.

Répétez après moi: je ne fais jamais de pseudo-liens via CSS...

Modifié par Laurent Denis (04 Mar 2007 - 13:44)

Bonjour,

L'espace « superflu » correspond à la hauteur d'une ligne de texte. Comme le lien est vide, Firefox estime qu'il ne faut pas réserver d'espace pour le texte, contrairement à IE7. Il me semble qu'aucune des deux interprétations n'est « meilleure » ou plus « standard ».

Mais le problème principal n'est pas là. Le problème principal, c'est que tu utilises des liens vides, c'est à dire :
- pas accessibles ;
- pas accessibles ;
- et pas accessibles.

(Comment ça, je me répète ? )

Je suppose que tous les forumeurs qui passent par ici ont déjà lu quelque chose concernant la séparation de la mise en forme et du contenu, et se sont dit que c'était une riche idée.

Quelle est donc cette idée d'utiliser les feuilles de style pour générer du contenu ? Je croyais justement que le contenu allait dans le HTML, et la mise en forme dans la feuille de style ?

Pour rappel :
- les feuilles de style peuvent être désactivées (résultat : le lien est vide et non cliquable) ;
- les images peuvent être désactivées (résultat : le lien est une grande zone vide) ;
- les images peuvent avoir du mal à se charger, en raison par exemple de problèmes du serveur (résultat : le lien est une grande zone vide) ;
- les couleurs de fond peuvent être désactivées, ce qui désactive aussi les images de fond ! (résultat : le lien est une grande zone vide) ;
- l'utilisateur peut utiliser un navigateur non graphique (résultat : le lien est vide, donc inexistant) ;
- etc.

Donc : utiliser des images de contenu.

<ul>
<li><a href="mario/" title="marionnettes"><img src="..." alt="marionnettes" /></a></li>
</ul>

Merci pour vos réponses !

J'avais effectué un première version de ce menu avec un remplacement d'image calqué sur cet exemple référencé sur le site d'Alsacréations.

Je viens de vérifier, sur son exemple de menu dans lequel aucun texte n'est affiché, le noeud <a></a> englobe bien du texte ("Item1", "Item2", ...) mais n'est pas affiché.

Pourtant, les images sont entièrement contenues dans le fichier CSS en tant que design et non en tant que contenu. Donc ma question est : "si aucun texte n'est affiché l'image qui sert à notifier la présence d'un lien est-elle considérée comme du contenu ou comme du design ?"

Je vais changer mon code dans le sens de vos réponses mais mon interrogation reste intacte !

bonjour,

de quelle façon fait tu disparaitre le texte du lien ?
Par ailleurs IE attribut a un element vide , au moins la hauteur d'1em , quand dans les autres navigateurs , cette hauteurs devient "0".
Un font-size:0; ramene cette hauteur par defaut a "0".



Inserer l'image avec son texte alternatif est surement le plus accessible et plus facile a faire pour le rendu en lui adjoignant un :

border:0;
vertical-align:top; /* ou bottom , pour decollé l'image du baseline */

de cette façon le lien prend assurement la taille de l'image qu'il contient et doit afficher , le texte alternatif prend le relais si besoin et rend celui-ci "accessible" et eventuellement "referençable".

GC

A partir du moment ou il n'y a rien d'autre dans ton lien, je pense que c'est du contenu.

Dans le validateur du w3c, il existe une option pour la semantique de ta page, tu devrait la tester
Modifié par deadalnix (04 Mar 2007 - 14:56)

Il existe des techniques de remplacement d'images où l'on remplace le texte d'un lien par une image en cachant le texte et en affichant une image de fond.

Ça améliore les choses si on désactive les feuilles de style, par exemple. Mais si on garde les styles mais désactive les images ou bien les couleurs de fond ou bien les images ne se chargent pas (connexion lente, serveur à la peine...), le problème reste entier : le texte est caché, mais l'image ne s'affiche pas.

Ce sont donc des solutions « moins pires », mais tout de même problématiques.

Et oui, beaucoup de sites très bien mettent en avant ces techniques. Mais même sur Alsacréations on a des bêtises sans nom qui trainent dans les recoins de certains articles et tutoriels...

Merci pour toutes vos réponses, je prends note et je modifie tout ça !