28173 sujets

CSS et mise en forme, CSS3

First-letter sur lien : problème de rendu avec IE [résolu]

Bonsoir à tous, Smiley smile

Petit test de mise en forme et problème avec IE 6ème du nom.

Je souhaite avoir certains liens avec la première lettre en rouge et de grande taille et le reste du lien en vert. Et lorsque l'on pointe le lien tout doit devenir bleu mais la première lettre doit rester grande.

J'ai codé comme ceci :

Partie xHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test de mise en forme</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" media="screen" type="text/css" title="style du test" href="essai.css" />
</head>

<body>

<div id="corps">

<h1>Contenu de la h1</h1>

<dl>
	<dt><a href="">Section 1</a></dt>
	<dd>bla bla bla</dd>
	<dt><a href="">Section 2</a></dt>
	<dd>bla bla bla</dd>
</dl>

<a href="">lien temoin</a>

</div>

</body>
</html>


Partie CSS :
h1
{
font: bold 1.3em "Trebuchet MS", Verdana, Arial, sans-serif;
margin:20px 0 20px 0;
border-bottom:2px solid #ffb500;
line-height:40px;
}

dt
{
font: bold 1.1em "Trebuchet MS", Verdana, Arial, sans-serif;
margin:20px 0 20px 0;
color:#4e758d;
padding-left:15px;
background:url(design-portfolio/puce.png) no-repeat 0 7px;
background-color:#fff;
}

h1:first-letter 
{
font:lighter 2.2em "Times New Roman", Verdana, Arial, sans-serif;
color:#ffb500;
letter-spacing: 0px;
}

dt:first-letter 
{
font:lighter 1.8em "Times New Roman", Verdana, Arial, sans-serif;
color:red;
letter-spacing: 0px;
}

#corps dt a:link:first-letter , #corps dt a:visited:first-letter
{
font:lighter 1.8em "Times New Roman", Verdana, Arial, sans-serif;
color:red;
letter-spacing: 0px;
}

#corps dt a:link  , #corps  dt a:visited
{
font: bold 1.1em "Trebuchet MS", Verdana, Arial, sans-serif;
color:green;
text-decoration:underline;
}

#corps a:link  , #corps a:visited 
{
color:green;
text-decoration:underline;
font-weight:bold;
}


#corps dt a:hover:first-letter 
{
font:lighter 1.8em "Times New Roman", Verdana, Arial, sans-serif;
letter-spacing: 0px;
color:blue;
text-decoration:none;
}

#corps a:hover
{
color:blue;
text-decoration:none;
}

#corps dt a:hover
{
font: bold 1.1em "Trebuchet MS", Verdana, Arial, sans-serif;
color:blue;
text-decoration:none;
}


ça marche impeccable sous Firefox Smiley biggrin mais pas du tout sous IE ... Smiley decu

Résultat visible sur cette page en ligne

Je ne vois pas d'où ça peut bien venir. Smiley murf

Merci d'avance de vos remarques Smiley biggrin Smiley cligne
Modifié par Pandore (17 Nov 2006 - 19:32)
Si ça marche impeccablement sur Firefox, c'est pas compliqué, le problème vient d'IE Smiley smile

Il a déjà du mal à gérer correctement :hover tout seul, alors :hover plus :first-letter Smiley eek
first-letter est peut-être la propriété qui a les bugs les plus marrants Smiley lol cf. cet exemple de fou. Suffit de déclarer un first-letter sur un élément inexistant pour tout casser... Mieux effectivement utiliser un span ou un em ou quelque chose comme ça Smiley decu
Modérateur
bonjour, florent,

dans ton exemple on peut en redeclarent la couleur a <a> 
#content a , a {display: block;    color: #F0F0F0;}

Ne changer alors que la couleur de la premiere lettre au survol , grace au first-letter ciblant et ne changeant en principe rien du tout !! lol , Ce IE vraiment !



++
Bonsoir,

Merci de vos réponses Smiley smile

"gcyrillus" a écrit :
reste l'option du <em> pour mettre en valeur la premiere lettre du lien Smiley decu

Effectivement, c'est pas le top car je n'aurais pas l'effet que je veux au final puisque la lettre restera de la même couleur au survol ... Smiley bawling

J'ai beau retourner le problème dans tous les sens, il n'y a pas de solution apparemment. Smiley decu
Oui, ça pourrait être une solution à la limite mais personnellement, je ne suis pas un grand fan des textes en image. Smiley cligne

La raison majeur c'est que je ne trouve pas cela très accessible. La taille de l'image ne change pas lorsque l'on veut adapter la taille de l'affichage des caractères de la page : tout s'agrandit ou diminue sauf le texte de l'image ... Smiley decu
Oui c'est vrai, quoi que...dit moi si je me trompe mais un alt est tout aussi accessible vu que c'est du texte explicatif.

Mais bon, je peux comprendre le positionement à titre de passion ou de pure respect des normes, mais quand on à une autre vue (par exemple des clients en jeu), si je dois faire un tableau pour que l'aspect soit celui que mon client désire je le fais.

Enfin trêve de belles paroles, mon but n'est pas de faire le malin, mais si tu n'as pas le choix...!

Aprés, comme tu le dits il y à la résolution aussi!
Apres rien nous oblige à ne pas être puriste Smiley smile
oula escuse me double post.

Un modo peux me le suprimer svp

encore dsl
Modifié par ockonor (12 Nov 2006 - 20:52)
Modérateur
heu , si je peut me permettre :

a:hover em , a:hover {color:blue}


ça devrait etre compatible IE et correspondre au a:hover:first-letter qui le fait bugger , non ?

Ou bien je n'ai pas compris ton probleme depuis le debut ..


++
gcyrillus a écrit :
ça devrait etre compatible IE et correspondre au a:hover:first-letter qui le fait bugger

Oui, tu as parfaitement raison. Quand j'ai essayé, j'avais laissé une ligne de code avec un first-letter Smiley confused Autant pour moi Smiley smile

Même si c'est pas le top (ça alourdis le code ...), le problème est résolu. Smiley biggrin

Merci gcyrillus Smiley cligne


Sinon, pour répondre à ockonor :

ockonor a écrit :
dit moi si je me trompe mais un alt est tout aussi accessible vu que c'est du texte explicatif.

Dans ce cas précis, non. Car l'attribut "alt" affiche un texte alternatif à une image manquante par exemple. C'est utile quand l'image est manquante (involontairement, oubli de mettre l'image en ligne, ou volontairement, l'affichage des images est désactivé par l'internaute) ou pour les lecteurs spéciaux (vocaux et cie). Ici, on cherche à agrandir la taille d'affichage des caractères à ses besoins. Cela ne sert donc à rien.

ockonor a écrit :
je peux comprendre le positionement à titre de passion ou de pure respect des normes

Non, ce n'est pas tout à fait pour ça lol C'est d'un point de vue pratique que c'est génant. En général, on met les titres avec une police plus grande que le texte des paragraphes pour justement les repérer plus facilement sur l'ensemble de la page. Si l'internaute ressent le besoin d'agrandir la taille d'affichage des caractères, comme les titres sont en images leurs tailles ne changent pas. Et au final, on ne retrouve plus cette différence entre la taille des titres et celle du texte des paragraphes.

Smiley cligne
Sujet clos
Aller à