[Résolu]Problème de CSS avec Firefox

Problème de CSS avec Firefox [Résolu] - HTML/CSS - Programmation

Marsh Posté le 11-07-2006 à 12:50:36    

Bonjour,
 
J'ai un problème avec FireFox.
J'aimerais mettre en gras deux des liens de mon menu.
 
Sous IE, ceci fonctionne, mais pas sous FireFox:
<a href="http://www.afterend.com/forums"><strong>Forum</strong></a>
 
Donc je pensais essayer de passer par les CSS pour mettre Forum en gras.
<a href="http://www.afterend.com/forums"><span class="boldlink">Forum</span></a>
 
Ceci marche sous IE et sous FireFox.
 
Voici les CSS concernés:

Code :
  1. a:link {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: x-small;
  4. color: #4c1b21;
  5. text-decoration: underline;
  6. }
  7. a:visited {
  8. font-family: Arial, Helvetica, sans-serif;
  9. font-size: x-small;
  10. color: #4c1b21;
  11. text-decoration: underline;
  12. }
  13. a:active {
  14. font-family: Arial, Helvetica, sans-serif;
  15. font-size: x-small;
  16. color: #4c1b21;
  17. text-decoration: underline;
  18. }
  19. a:hover {
  20. font-family: Arial, Helvetica, sans-serif;
  21. font-size: x-small;
  22. color: #CC0000;
  23. text-decoration: underline;
  24. }
  25. .boldlink{
  26. font-weight: bold;
  27. }


 
Merci d'avance pour votre aide.

Message cité 1 fois
Message édité par smilm le 11-07-2006 à 14:41:37

---------------
AfterEnd: Batissez un nouveau monde
Reply

Marsh Posté le 11-07-2006 à 12:50:36   

Reply

Marsh Posté le 11-07-2006 à 12:59:56    

Salut !
 
Chez moi cela marche :
 

smilm a écrit :

<a href="http://www.afterend.com/forums"><strong>Forum</strong></a>


 
J'ai testé avec Firefox et IE pourtant !
 
Salutations


---------------
Adrien
Reply

Marsh Posté le 11-07-2006 à 13:22:02    

Cela fonctionne car tu n'as pas pris en compte les CSS "a:".
 
En effet, je viens de voir que si je supprime les CSS "a:..." et garde ma css boldlink, elle fonctionne très bien et mes liens sont en gras.
Un problème de priorité dans les CSS à ce que je comprends donc. Comment passer mon span en priorité ?
 
Edit:
Non je dis des bétises. Si j'ajoute un attribut à ma cass boldlink:
.graslink {
 font-style: oblique;
 font-weight: bold;
 color: #0066CC;
}
Alors mon lien forum devient oblique, bleu, mais pas gras. Bizarre.


Message édité par smilm le 11-07-2006 à 13:24:12

---------------
AfterEnd: Batissez un nouveau monde
Reply

Marsh Posté le 11-07-2006 à 13:37:01    

Au lieu de t'embêter avec une classe sur un span, pourquoi est-ce que tu ne redéfinirais pas la balise a avec un nom comme lien_gras par exemple.
 
Sinon tu utilise <b></b> qui est la même chose que strong.
 
Tu n'as pas besoin de redéfinir la famille de police dans ton CSS à chaque état de ton lien.
 
Tu définis dans un permier temps la balise a, avec les paramètres qui conviens. Ensuite selon les états, tu applique ce que tu veux modifier.

Reply

Marsh Posté le 11-07-2006 à 13:41:26    

chez moi ton code marche bien
peut etre que la font est trop petite pour que tu remarques la difference entre bold et normal  :whistle:  
mais on pourrait vite vait simplifier et dehors le span
 

Code :
  1. a {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: x-small;
  4. color: #4c1b21;
  5. text-decoration: underline;
  6. font-weight: bold;
  7. }
  8. a:hover {color: #CC0000;}


 
oops mega toasted :D


Message édité par mIRROR le 11-07-2006 à 13:42:32
Reply

Marsh Posté le 11-07-2006 à 13:57:16    

AlphaZone a écrit :

Au lieu de t'embêter avec une classe sur un span, pourquoi est-ce que tu ne redéfinirais pas la balise a avec un nom comme lien_gras par exemple.
 
Sinon tu utilise <b></b> qui est la même chose que strong.
 
Tu n'as pas besoin de redéfinir la famille de police dans ton CSS à chaque état de ton lien.
 
Tu définis dans un permier temps la balise a, avec les paramètres qui conviens. Ensuite selon les états, tu applique ce que tu veux modifier.


 
 
<b> n'a aucun sens sémantique, il est donc à bannir :o

Reply

Marsh Posté le 11-07-2006 à 14:15:35    

Merci, j'ai rédéfini mes CSS "a:.." comme vous me l'avez indiqué.
 
Je suis perdu là, je ne sais pas trop comment cela est arrivé mais...
J'ai maintenant des liens plus grand que d'autres.
 
Ici, "Témoignages" est plus grand que "AfterEnd ?" (visite guidée est petit, forum est grand et en gras)
 

Code :
  1. &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="imgdesign/designv3/puce.gif" width="11" height="11">&nbsp;<a href="index.php?page=demo_v2">Visite Guidée</a><br>
  2. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="imgdesign/designv3/puce.gif" width="11" height="11">&nbsp;<a href="index.php?page=temoignages">T&eacute;moignages</a><br>
  3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="imgdesign/designv3/puce.gif" width="11" height="11">&nbsp;<a href="index.php?page=afterend">AfterEnd ?</a><br>
  4. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="imgdesign/designv3/puce.gif" width="11" height="11">&nbsp;<a href="http://www.afterend.com/forums"><b>Forum</b></a><br>


 
Je n'ai strictement aucune idée de ce qui distingue ces liens.
 
Par ailleurs, le problème se pose uniquement sous FireFox. Sous IE, tout les liens sont à la même taille mais les liens en grand sont dans une autre police...


Message édité par smilm le 11-07-2006 à 14:19:35

---------------
AfterEnd: Batissez un nouveau monde
Reply

Marsh Posté le 11-07-2006 à 14:20:37    

@xtof > Désolé pour le <b>, je ne savais pas trop.
 
@smilm > Il doit y'avoir un conflit de CSS, je pense. Montre nous ton CSS please :)

Reply

Marsh Posté le 11-07-2006 à 14:22:48    

Tout est là:

Code :
  1. p {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: 12px;
  4. color: #000000;
  5. font-weight: normal;
  6. }
  7. .txtmenu {
  8. font-family: "Trebuchet MS";
  9. font-size: 13px;
  10. font-weight: bold;
  11. color: #000000;
  12. }
  13. h2 {
  14. font-family: Arial, Helvetica, sans-serif;
  15. font-size: large;
  16. color: #990000;
  17. }
  18. .colortab {
  19. background-color: #DFDFDF;
  20. margin: 5px;
  21. border: 1px solid #CC6633;
  22. }
  23. .tabin {
  24. border: 1px solid #993333;
  25. }
  26. .formu {
  27. font-size: 14px;
  28. color: #000000;
  29. border: 1px dashed #993300;
  30. }
  31. .cellulegris1 {
  32. background-color: #CCCCCC;
  33. }
  34. .cellulegris2 {
  35. background-color: #D5D5D5;
  36. }
  37. .celluletitre {
  38. background-image: url(../imgdesign/celluletitre.jpg);
  39. }
  40. .cellulesoustitre {
  41. background-color: #F9E1C1;
  42. }
  43. a:link {
  44. font-family: Arial, Helvetica, sans-serif;
  45. font-size: x-small;
  46. color: #4c1b21;
  47. text-decoration: underline;
  48. }
  49. a:hover {
  50. color: #CC0000;
  51. }
  52. .bouton {
  53. font-family: Arial, Helvetica, sans-serif;
  54. font-size: 12px;
  55. background-color: #CCCCCC;
  56. color: #000000;
  57. font-style: normal;
  58. font-weight: 100;
  59. text-transform: none;
  60. border-top: 1px ridge #E9E9E9;
  61. border-right: 1px outset #E9E9E9;
  62. border-bottom: 1px outset #E9E9E9;
  63. border-left: 1px ridge #E9E9E9;
  64. cursor: hand;
  65. ?);
  66. }
  67. .cellulebas {
  68. background-image: url(../imgdesign/cellulebas.jpg);
  69. background-repeat: repeat-x;
  70. font-family: Arial, Helvetica, sans-serif;
  71. font-size: 14px;
  72. }
  73. .newsbas {
  74. background-image: url(../imgdesign/news_bas.jpg);
  75. }
  76. .newshaut {
  77. background-image: url(../imgdesign/news_haut.jpg);
  78. }
  79. .tabmenu {
  80. border-top: 1px solid #000000;
  81. border-right: 1px solid #000000;
  82. border-bottom: 1px solid #000000;
  83. border-left: 1px solid #000000;
  84. }
  85. h3 {
  86. font-family: Arial, Helvetica, sans-serif;
  87. font-size: medium;
  88. color: #000000;
  89. }
  90. h4 {
  91. font-family: Arial, Helvetica, sans-serif;
  92. font-size: small;
  93. color: #000000;
  94. }
  95. .emptyclass {
  96. border: none;
  97. }
  98. .mpmenu {
  99. background-image: url(../imgdesign/mp_menu.gif);
  100. }
  101. .mphaut {
  102. background-image: url(../imgdesign/mp_haut.jpg);
  103. }
  104. .mpmessage {
  105. background-color: #CCCCCC;
  106. }
  107. .cellulebaslarge {
  108. background-image: url(../imgdesign/cellulebas_large.jpg);
  109. }
  110. .cellulecomment {
  111. background-image: url(../imgdesign/cellule_comment_alliance.jpg);
  112. }
  113. .cellulecomment2 {
  114. background-image: url(../imgdesign/cellule_comment_alliance2.jpg);
  115. }.deroulantvillage {
  116. background-color: #D8FDC8;
  117. border: medium none #D1FDB5;
  118. width: 190px;
  119. }
  120. .bg {
  121. background-attachment: fixed;
  122. }
  123. .cellulestats {
  124. background-image: url(../imgdesign/cellule_stats.jpg);
  125. border-top: 1px solid #000000;
  126. border-right: 1px none #000000;
  127. border-bottom: 1px solid #000000;
  128. border-left: 1px none #000000;
  129. }
  130. .border1 {
  131. border: 1px solid #000000;
  132. }
  133. .barreblackup {
  134. border-top-width: 1px;
  135. border-top-style: solid;
  136. border-top-color: #000000;
  137. }
  138. .celluleachat {
  139. background-image: url(../imgdesign/cellule_stats.jpg);
  140. border-top: 1px solid #000000;
  141. border-right: 1px none #000000;
  142. border-bottom: 1px solid #000000;
  143. border-left: 1px none #000000;
  144. }
  145. .noborder {
  146.         BORDER: 0px;
  147. }.menuantirepet {
  148. background-repeat: repeat-y;
  149. }
  150. .liensmenu {
  151. font-family: Verdana, Arial, Helvetica, sans-serif;
  152. font-size: medium;
  153. font-style: normal;
  154. line-height: normal;
  155. color: #000000;
  156. text-decoration: none;
  157. }
  158. .villagecouranttxt {
  159. font-family: Arial, Helvetica, sans-serif;
  160. font-size: x-small;
  161. }
  162. .graslink {
  163. color: #FF0000;
  164. }


Message édité par smilm le 11-07-2006 à 14:23:54

---------------
AfterEnd: Batissez un nouveau monde
Reply

Marsh Posté le 11-07-2006 à 14:25:04    

Tu t'embête énormément avec l'attribut font-family. Tu l'aurais défini dans body et on en parlait plus.
 
Sinon tu as oublié de définir ta balise a. C'est probablement pour ca.

Reply

Marsh Posté le 11-07-2006 à 14:25:04   

Reply

Marsh Posté le 11-07-2006 à 14:25:16    

Autant pour moi, j'ai compris !
 
Les liens visités sont aggrandis.
Donc il faut bien appliqués les CSS de taille partout sur les liens. Je veux dire conserver les CSS détaillés et non pas optimisé.
 
Bref, je suis revenu à mon point de départ.
Et <b>monlien</b> ne passe pas sous firefox.


Message édité par smilm le 11-07-2006 à 14:26:27

---------------
AfterEnd: Batissez un nouveau monde
Reply

Marsh Posté le 11-07-2006 à 14:30:14    

non pas si tu laisses dans a
(pourquoi as tu transformé mon a en a:link ? [:petrus dei] )
 
sinon tu peux declarer ainsi

Code :
  1. a:link, a:visited, a;active, a:hover {
  2. mes propriétés...
  3. }


Message édité par mIRROR le 11-07-2006 à 14:30:37
Reply

Marsh Posté le 11-07-2006 à 14:32:19    

Ca marche, il fallait définir "a" tout court.
En fait l'hypothèse de départ était la bonne.
Mes liens sont trop petit sous firefox pour que le gras puisse le mettre en valeur.
 
J'ai un problème avec la taille de mes liens en fait.
x-small est minuscule sous firefox alors que c'est "normale" sous IE.
Par contre, small est bien sur firefox mais beaucoup trop grand sous IE.
 
Je reviens avec des questions plus claires.


Message édité par smilm le 11-07-2006 à 14:33:43

---------------
AfterEnd: Batissez un nouveau monde
Reply

Marsh Posté le 11-07-2006 à 14:36:46    

Ta essayé de mettre la taille de ta police en normale sous Firefox (CTRL + 0) ? [:barthaliastoxik]

Reply

Marsh Posté le 11-07-2006 à 14:40:35    

Merci beaucoup à vous tous pour votre réactivité. C'est toujours un plaisir de se faire aider par vous. En fait mon problème était ailleurs mais grace à vos remarques j'ai pu trouver la solution et apprendre quelques petites choses.
 
En fait, les tailles de police du type "small" "x-small" ect sont relatives aux navigateurs. Ainsi, sous IE elles seront en général bien plus grande que sous FireFox.
J'ai donc passé ces données en valeurs absolu (12pt); de cette façon, la taille de la police est la même sur les deux navigateur, juste comme il faut.
 
Par ailleurs, en ce qui concerne mon problème de mise en gras, le problème venait de firefox (hé oui !) qui ne voulait passer en gras ce que je lui demandais car c'était trop petit (et cela aurait était sans doute illisible donc l'intelligent FF ne passe pas les liens en gras)
 
Merci encore à vous tous.
 
@alphazone: oui, j'ai bien vérifié, sous IE et sous FF, la taille de la police était configuré en moyenne.

Message cité 1 fois
Message édité par smilm le 11-07-2006 à 14:41:14

---------------
AfterEnd: Batissez un nouveau monde
Reply

Marsh Posté le 11-07-2006 à 14:44:07    

si si c est bien gras j ai essayé chez moi fais deux liens cote a cote un en gras l autre en normal ;)
parce que justement tu peux faire ctrl+ a volonté donc il FAUT que le gras soit appliqué

Reply

Marsh Posté le 11-07-2006 à 15:19:20    

smilm a écrit :

En fait, les tailles de police du type "small" "x-small" ect sont relatives aux navigateurs. Ainsi, sous IE elles seront en général bien plus grande que sous FireFox.
 
...
 
@alphazone: oui, j'ai bien vérifié, sous IE et sous FF, la taille de la police était configuré en moyenne.


 
Dans firefox, cela va dépendre de la taille de police par défaut que tu as choisi.
Si tu vas dans le menu outils / options / contenu tu verras quelle taille est définie par défaut. En jouant sur cette taille, tu constateras que toutes les tailles relatives (genre les x-small ou tailles en em) varient, et que donc la taille "normale" n'est pas la même suivant la taille choisie par défaut. Chez moi, la police par défaut à 16px correspond à la même taille de caractères que sur IE (donc le small, x-small,... ont le même rendu).

Reply

Marsh Posté le 11-07-2006 à 15:32:03    

Merci pour ces informations Pitsy.  :)


---------------
AfterEnd: Batissez un nouveau monde
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed