Centrage vertical IE7 - accessibilité

Bonjour,

Je galère pas mal pour centrer verticalement du texte dans des éléments <a> en float left dans un menu, sur IE7 : voir la page.

J'ai lu cet article spécifique à cette problématique, mais je n'ai pas réussi à le faire fonctionner.

Le principal problème que je rencontre, c'est qu'il est impossible d'utiliser un display table-cell associé à un vertical-align middle sur IE7. Je ne peux pas non plus remplacer mon menu par un <table>, ça pose des problèmes d'accessibilité.

Et pour couronner le tout, je ne peux pas non plus utiliser la méthode des line-height qui donne des bugs d'affichage quand j'utilise le doctype XHTML 1.0 Transitional (ces problèmes disparaissent avec un doctype XHTML 1.0 Strict, mais les spécs m'imposent le doctype transitionnel ).

Donc comment faire ?
(je ne cherche pas une solution qui fonctionne sur tous les navigateurs, j'ai une feuille de style spéciale pour IE7).

Merci

Hello,

Si tu veux mon avis, en toute honnêteté et sans ironie : utilise une cellule de tableau (oui un élément <td> dans un <table>).

PS : le terme d'Accessibilité, évoqué dans ton titre de sujet ne correspond pas à ce que tu demandes. L'accessibilité concerne la prise en compte des déficiences et handicaps.

Malheureusement je ne peux pas, mon chef de projet refuse (et le client c'est l'état...).

J'ai eu le même problème par le passé et je n'ai pas trouvé de solution.
a défault du table-cell, test le display:table, sous IE7...Je suis pas sur de mon coup du tout.

Salut,
je ne sais pas si j'ai bien saisi le problème.
Quoiqu'il en soit, si j'ai bien compris voici la marche à suivre :

ajouter un :

text-align:center;

sur le body de manière à tout centrer.


enlever :

height:39px

sur les <a>


et jouer du line-height pour cadrer les liens qui sont sur deux lignes.
Cela dit, des liens sur deux lignes c'est moche =D

Tiens-moi au courant de si ça a résolu ton soucis.
Modifié par Fahrenheit (02 Aug 2011 - 14:50)

C'est vraiment grave si le texte de ton menu n'est pas centré verticalement sous IE7 ?

Sinon tu peux le faire en JavaScript.

@Fahrenheit : déjà testé avec les line-height.

Si je met un line-height comme tu dis, les liens sur 2 lignes s'affichent mal, la 2éme ligne est complétement en dessous du menu. Y'a moyen de bricoler en rétablissant le line-height dans un élément enfant, mais ça marche mal.

Pour le moment j'ai résolu le problème avec du JavaScript comme le suggère jb_gfx.

Bizarre, de mon côté j'ai réussi à cadrer tout ça =/

Bonjour,

c'est pas grave si c'est pas positionné pareil dans un vieux navigateur, du moment que le contenu s'affiche, s'agrandit en zoom texte, ne se superpose pas, a une couleur de fond spécifiée (et ÇA c'est demandé par ton client l'État dans le RGAA )

Galdon a écrit :
Malheureusement je ne peux pas, mon chef de projet refuse (et le client c'est l'état...).

Ok, je veux bien, mais pourquoi il refuse ? (juste parce que c'est "pas bien ?", ou il a de vraies raisons objectives ?)

Galdon a écrit :
Pour le moment j'ai résolu le problème avec du JavaScript comme le suggère jb_gfx.

Tu as donc choisi une solution potentiellement inaccessible pour un client (l'Etat) dont l'accessibilité est primordiale ?
C'est un choix original.
J'aurais personnellement plutôt opté pour une solution à base de cellule de tableau, parfaitement accessible sans surcouches comme JavaScript.

Raphael a écrit :
Ok, je veux bien, mais pourquoi il refuse ? (juste parce que c'est &quot;pas bien ?&quot;, ou il a de vraies raisons objectives ?)

Non, aucune raison objective. Il y a des gens comme ça qui ne changent pas d'avis, c'est une perte de temps de discuter, donc on fait avec...

Sinon je suis parfaitement d'accord avec toutes vos réponses, merci pour votre aide.

bonjour/bonsoir,

selon ta page test en ligne : http://finalclap.free.fr/TEMP/FORUMS/ie7-menu/wtf.html
je vois :

<a><span class="niv1"><span class="niv2">dolor</span><span class="clean"></span></span></a>

donc a priori deux element de type inline cote à cote dont un vide.

Selon ton CSS a est en display:block avec de dimensions en hauteurs.

2 span adjacent en display:inline-block; avec un vertical-align peuvent etre aligné verticalement (top, bottom, middle, etc ...)
inline-block accepte width et height.

... donc , selon ton architecture html , on peut se passer de display:table;

a : background:blue. (et pas purple + son color et son height et son display et eventuellement un max-width pour éviter les br ...)
span.niv1 : rien et inutile
span.niv 2: display:inline-block;vertical-align:middle;(c'est tout !)
span.clean : display:inline-block;height:40px;width:0;vertical-align:middle;

ton span.clean te servira de reference de hauteur (minimal) pour l'alignement vertical.

J'ai l'impression que tu as mélangé plusieurs pistes, sans avoir réussi a reassocier CSS et structure HTML, vues ou trouvées dans tes recherches ...

La structure HTML de ta page TEST est compatible avec un centrage vertical dans IE7 et les autrres sans toucher au line-height. span etant neutre difficille de faire une critique sur la semantique, si ça peut aider a la mise en forme ... ceci dit ça ne plairat pas a tout le monde

Cordialement, GC
Modifié par gc-nomade (08 Aug 2011 - 22:02)