28172 sujets

CSS et mise en forme, CSS3

Underline sur <a> trop bas sur IE7

Bonjour,

Je viens de tomber sur un bug que je n'avais jamais rencontré.
Je reprends et termine un site (Joomla Smiley rolleyes ).
Le code n'est pas super propre mais il y a quand même des pages valides .. Smiley ohwell .

Les liens dont les css laissent le underline se voient affublés d'un trait de soulignement situé bien trop bas et barrant les caractères de la ligne du dessous....

J'ai tenté de passer par un border-bottom (moins intéressant du fait des variations de couleurs de polices) sans grand succès:

Voilà typiquement un bloc présentant le pb avec toute la merdouille forcée par Tinymce de Joomla Smiley fache :
<div height="170" border="0" style="width: 200px; height: 170px;" class="gabriola">
<p><span style="font-size: large;" mce_style="font-size: large;"><a title="academie equestre versailles" mce_href="/hotel-versailles/spectacle-academie-equestre-versailles-hotel-versailles.html" href="/hotel-versailles/spectacle-academie-equestre-versailles-hotel-versailles.html">Réservez</a> un <b>Week-End Equestre</b> à Versailles. Spectacle de l'académie équestre inclus.</span></p>

<a title="spectacle academie equestre versailles" mce_href="/hotel-versailles/spectacle-academie-equestre-versailles-hotel-versailles.html" href="/hotel-versailles/spectacle-academie-equestre-versailles-hotel-versailles.html">
<img width="200" height="100" title="Réservez votre week-end équestre à Versailles" alt="hotel versailles week-end" mce_src="/images/week-end-versailles.jpg" src="/images/week-end-versailles.jpg"></a>>

</div>


Rien de particulier ds les css
juste ceci:
a{
	color: #581e2a;
	text-decoration: underline;
	font-weight: bold;
}


Merci
Modifié par elz64 (06 Dec 2011 - 12:26)
Salut,
Sans page en ligne, aucun moyen de constater ton problème, et donc de proposer une correction. Le bout de CSS que tu as cité ne permet pas de dire exactement pourquoi tes soulignements chevauchent les lignes suivantes…
Par contre, tu est sûr que tu ne confonds pas text-decoration et border-bottom ? Ta formulation est un peu ambigüe…
Bonjour,

tu as énormément de balises imbriquées ( tiny_mce ) et donc potentiellement autant de styles en cascade..

De plus dans ta partie html, est-ce normal d'avoir un </a>> à la fin ?

Un exemple en ligne nous en dira plus. Bon courage !
le > en trop est juste un pb de copier/coller dans mon post.

Le style est bien underline

Ca m'embête un peu de poster l'url (de dev) vu que c'est pas ouvert mais bon je compte sur vous pour ne pas la poster où que ce soit.

rem :Ce n'est pas ma manière de faire du code mais je fais avec ce qu'il y a.

Merci

h o t e l b e r r y . dev-econnect (com)
Modifié par elz64 (06 Dec 2011 - 13:36)
Apparemment, l'exemple de code cité s'applique à un élément de la colonne latérale, mais je ne vois aucun chevauchement (OSX, FF version à jour, pareil sur Safari) avec le soulignement des liens (ceux qui sont en bleu, c'est ça ?).

Pourrais-tu préciser sur quels éléments se situe le souci ?
Administrateur
Bonjour,

ton line-height de 1.1 est bien trop faible. Pour l'accessibilité il est demandé à ce qu'il soit au moins égal à 1.5 !
Même sous Firefox, en sélectionnant quelques mots, on voit bien que la zone en inverse vidéo est immensément haute par rapport au reste.
Je suis pas spécialiste de la typographie mais c'est la police utilisée qui par conception semble n'utiliser qu'une petite partie de la hauteur d'une ligne, par exemple pour le f minuscule qui occupe beaucoup de place verticalement. Si 2 f se retrouvent l'un au-dessus de l'autre, il faut pas que par défaut ils se touchent ou se superposent ...

Bon sinon tu as un problème plus grave : tu n'as PAS le droit d'utiliser la police Gabriola avec @font-face à moins d'en avoir obtenu l'autorisation de Microsoft ... C'est le cas ?
Elle est la propriété de Microsoft qui la fournit à tout acheteur de Windows 7 ou d'Office 2010 (cf. http://www.microsoft.com/typography/fonts/font.aspx?FMID=1741 ) et ce n'est certainement pas mon cas. Là mon navigateur la télécharge depuis ton serveur (et dans un format comme .svg créé par toi en modifiant la police de MS, action dont tu n'as pas non plus l'autorisation) et l'affiche ... Microsoft t'a donné le droit de l'utiliser sur ton OS, pas de la transformer (cf. l'avertissement sur font-squirrel par exemple) ni de la stocker sur ton serveur pour qu'elle soit téléchargée par tous les visiteurs de passage !
Et si tu l'as téléchargée sur -http://fr.fonts2u.com/gabriola.police d'une part la licence M$ est indiquée, d'autre part "Freeware" (et "Télécharger") sont soit trompeurs, soit mensongers. C'est pas parce que l'indication et le lien existent que tu as le droit de te servir.
D'ailleurs dans le footer est écrit "Même si nous avons indiqué le type de licence, veuillez le revérifier en lisant les informations affichées dans la zone détails de chaque police afin d'éviter toute confusion.". C'est pas ça qui les sauvera d'une fermeture ou d'un bon procès mais en attendant c'est notre boulot de professionnel du web de vérifier les licences de tout ce qu'on utilise.
Modifié par Felipe (06 Dec 2011 - 20:27)
Administrateur
Si MS a les mêmes formulations que http://www.itcfonts.com/About/Embedding.htm je dirais que non (les 2 dernières licences parlent de streaming et de l'internet). Mais IANAL et pas typographe non plus, j'ai juste eu 2 mauvaises expériences avec dafont et un autre où en creusant un minimum je trouvais la fonte en vente chez Linotype ... Merci dafont Smiley sweatdrop
Sujet clos
Aller à