[CSS][HTML] Longueur d'un lien

Version imprimable

Salut,

Je suis encore confronté à un mystère de l'HTML...
Sur une page j'ai ce code:

Code:

<a href="#" class="topleft">[!infos!]</a><a href="#" class="topleftdesactive">[!config!]</a><a href="#" class="topleftdesactive">[!login!]</a><br />

Avec comme class CSS:

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 a.topleft { color: black; font-family: arial; font-size: 11px; text-decoration: none; width: 100px; cursor: default; padding-top: 5px; height: 22px; text-align: center; background-image: url(../../images/top-left-active.jpg); background-repeat: no-repeat; }

La longeur des liens fait bien 100px.

Sur une autre page, j'ai exactement le même code html (exactement exactement), mais la longeur du lien s'adapte à la longueur du texte, et ne fait pas 100px...

:aie:
Comment faire?
Merci

29/06/2006, 17h13
adiGuba
Salut,

Je suppose que tu dois utiliser Interner Explorer...

En effet les éléments <a> sont des éléments inline et ne prennent pas en compte le style CSS width puisque leur taille s'adapte au contenu...

Or par défaut IE authorise cela...
Toutefois si tu déclare ta page en XTML, par exemple avec l'entête suivante :
Code:

1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
Alors IE sera un peu plus conforme aux normes et ne prend pas en comte le style CSS width pour les éléments inline...

Tu peux corriger cela en ajoutant le code CSS suivant :
Code:

1 2 display: block; float: left;
a++
29/06/2006, 17h33
Anduriel

Merci à toi la longeur s'est en effet arrangée, après plusieurs teste j'ai opté seulement pour inline-block. Le problème maintenant c'est que j'ai mon lien, et quand je mets à la ligne un div, j'ai un espace vide (du 3 ou 4px de hauteur) qui les sépare.
Même en mettant les margin à 0, ça ne corrige pas :?
29/06/2006, 18h03
masu

essai peu-etre de voir le jouer sur la propriété line-height.
C'est juste une idee j'ai pas testé
29/06/2006, 18h34
Anduriel

Merci mais je ne sais pas sur quoi agit cet attribut. J'ai iben tenté plusieur hauteur mais ça ne change rien :?
30/06/2006, 00h38
masu
le lineheight est la haiteur d'une ligne de text, parfois elle impose un espace (ca m'etait arrivé d'avoir un espacement une fois a cause de ca je sais plu dans quels circonstances exectement);

Pour verifier que ca ne vienne pas d'un marge tu peu essayer un truc qui va toutes les enlever
Code:

1 2 3 4 * { margin:0; padding:0; }
sinon tu peu nou mettre un peu le html qui suit tes liens et ton css de .topleftdesactive qu'on voi ca un peu mieux.
30/06/2006, 11h36
Anduriel

Trop bon j'ai trouvé merci ! En fait c'est bien le padding-top qui décale mon image de 5px, je dois enlever 5px a la hauteur :)