Probleme de couleurs de police sous Firefox

Probleme de couleurs de police sous Firefox - HTML/CSS - Programmation

Marsh Posté le 27-07-2006 à 08:20:04    

Bonjour, j'ai expérimenté un probleme bizarre sous Firefox (et qui marche tres bien sous IE) :
les couleurs de police définies dans un CSS ne passe pas sous Firefox, en l'occurence sur un site en fond noir, le texte devait apparaitre en blanc et il était en fait noir ... donc on ne voyait rien du coup !
Alors qu'en mettant un bête style="color:white;" dans la balise concernée, tout passe nickel !
Y a-t-il une formalisation particulière pour que ça soit bien pris en compte sous Firefox ???
Merci bien pour votre aide ;)

Reply

Marsh Posté le 27-07-2006 à 08:20:04   

Reply

Marsh Posté le 27-07-2006 à 08:45:53    

Problème d'héritage, mais si tu ne nous communiques pas le code, ça va être difficile de te répondre.

Reply

Marsh Posté le 27-07-2006 à 09:22:26    

Oki ... pardon, c'était au cas où c'est un bug connu ^^
Voila le code :
dans le CSS

Code :
  1. p.news-date {color:#FFFFFF; font-family:Arial; font-size:10px; margin: 2px 0px 0px 0px;}


et dans le PHP

Code :
  1. <p class="news-date"><?php echo $date; ?></p>


le css est bien inclus en en-tete de PHP :
<link rel="stylesheet" href="defs.css" type="text/css">
ça c'est un exemple mais il y a plusieurs autres endroits où ça marche pas !
ce qui est bizarre, c'est qu'à d'autres endroits, le lien CSS fonctionne bien !


Message édité par KahL le 27-07-2006 à 09:25:10
Reply

Marsh Posté le 27-07-2006 à 09:34:09    

on va faire simple
tu colles le code complet de ta CSS
et tu colles le code complet de ton fichier HTML une fois généré.
tu peux tres bien avoir oublié un bout de code dans ta CSS

Reply

Marsh Posté le 27-07-2006 à 10:51:45    

Ok
 
CSS :
 

Code :
  1. td {text-align: left; vertical-align: top;}
  2. b {font-weight: bold;}
  4. /* links */
  5. a:link, a:visited, a:active {color: #FFBA00; text-decoration: none;}
  6. a:hover {text-decoration: underline;}
  8. a.inv:link, a.inv:visited, a.inv:active {color: #298F00; text-decoration: none;}
  9. a.inv:hover {color: #FF9600;}
  11. a.intxt:link, a.intxt:visited, a.intxt:active {color: #555; text-decoration: none;}
  12. a.intxt:hover {text-decoration: underline;}
  14. img {border: 0);
  16. /* colors */
  17. .wh {color: #FFFFFF;}
  18. .blk {color: #000000;}
  19. .gry {color: #888888;}
  20. .blu {color: #38318A;}
  22. /* header */
  23. table.header td {background: #383838;}
  24. table.header td.div {background: #383838 url(gfx/div-dash.gif) repeat-y;}
  26. div.menu-item, div.menu-item-sel,
  27. div.menu-itemhi, div.menu-itemhi-sel {text-align: center; vertical-align:bottom; width: 104px; height: 69px; behavior: url(js/htf-selectmenuitem.htc); -moz-binding: url(js/xbl-selectmenuitem.xml#selectmenuitem);}
  28. div.menu-item img {margin: 48px 0px 0px 0px;}
  29. div.menu-item-sel img {margin: 34px 0px 0px 0px;}
  30. div.menu-itemhi img {margin: 37px 0px 0px 0px;}
  31. div.menu-itemhi-sel img {margin: 23px 0px 0px 0px;}
  32. div.menu-item-sel, div.menu-itemhi-sel {background: url(gfx/back-menu-sel.gif) repeat-x;}
  34. /* fonts */
  35. td, div, p, dd, dl {color: #FFF; font-size: 11px; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;}
  36. p {margin: 10px 0px 0px 0px; line-height: 16px;}
  37. h1 {font-weight: bold; margin: 10px 0px 0px 0px; font-size: 16px;}
  38. h2 {font-weight: bold; margin: 0px 0px 10px 0px; font-size: 14px;}
  40. /* main */
  41. td.div-dash {background: url(gfx/div-dash.gif) repeat-y;}
  42. img.div-dash1 {background: url(gfx/div-dash1.gif) repeat-x; margin: 4px 0px 4px 0px;}
  43. img.div-dash2 {background: url(gfx/div-dash1.gif) repeat-x; margin: 10px 0px 10px 0px; width: 50px;}
  45. p.news-hd {font-weight: bold;}
  46. p.news-date {font-family: Arial; color:#FFFFFF; font-size:10px; margin: 2px 0px 0px 0px;}
  47. p.news-lead {font-family: Arial; color:#FFFFFF; font-size:12px; margin: 10px 0px 0px 0px; line-height: 15px;}
  48. img.news {border: #383838 7px solid; margin: 2px 0px 4px 16px; float:right;}
  49. img.news1 {border: #383838 7px solid; margin-top: 20px;}
  51. div.rcol {padding: 0px 20px 0px 0px; text-align: right;}
  52. div.ccol {padding: 6px 100px 50px 20px;}
  53. div.ccol1 {padding: 6px 20px 50px 20px;}
  55. img.coll {border: #383838 7px solid; margin: 2px 16px 4px 0px;}
  56. img.coll1 {border: #383838 7px solid;}
  58. br.nofloat {style: no-float;}
  62. /* forms */
  63. form {margin: 0px;}
  64. input, textarea, select {background: #383838; border: 1px solid #777; padding-left: 3px; color: #FFF; font: 11px Verdana, Tahoma, "Arial CE", Arial, Helvetica, sans-serif;}
  65. input.submit {font-family: Tahoma, Arial, Helvetica, sans-serif;}
  66. textarea {overflow: auto;}
  67. input.btn {border-width: 0px; padding: 2px; color: #000; background: #CCC;}
  69. table.ccol-form td {font: 11px/16px Verdana, Tahoma, "Arial CE", Arial, Helvetica, sans-serif;}
  70. table.ccol-form td.descr {text-align: right;}
  71. table.ccol-form td input.btn {padding-left: 0px; border: 0px;}


 
et PHP :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  5. <meta name="description" content="Créateur de  vos dessus-dessous, lingerie pour homme et femme,  prêt-à-porter. Des collections créatives, sensuelles et élégantes. Le style imaginé pour vous">
  6. <meta name="keywords" content="loceanic, oceanic,ocean,creation, creations, chics, dessous, lingerie, body look,manufacturer of lingerie fabrics in eu, market of intimates, nightwear, unterwäsche, underwear, underclothes, urban underwear, wäsche, clothes, damen bekleidung, ladys wear, lingerie, damenwäsche,herren bekleidung, men s wear,herrenwäsche,mode , fashion,bh,büstenhalter, push- up bra,t-shirt, t-shirts,slip,shorty,unterhose,nachthemden,pyjama,schlafanzug,schlüpfer,tanger,mieder,unterhemd,erotische wasche,erotic  clothes,erotische bekleidung,neglige,qualitätswaren,quality goods,quality wears,qualitätskleidung,vernünftige preise,franzosische mode,inspiration,reasonable prices,french  fashion,soutien-gorge,strings, g-string,string tanger,taille unique,fabricants, technicite et mode,societe entreprise,la rochelle,lingerie homme,lingerie femme,lingerie,push up,tanga,shorty,debardeur ,top,t-shirt,caraco,soutien-gorge,string,slip,taille unique,fabricant,vente,vente en gros,vente en detail,grossiste,distribution,vetements,pret a porter,habillement,fabrication,tissus,soie,microfibre,dentelle,coton,broderie,createur lingerie,vente directe,dessus,dessous,pyjama,sous vetement, show room, représentant, grossiste, Poitou-Charentes, Charente-Maritime, détaillant, vente directe">
  8. <meta http-equiv="content-language" content="fr">
  9. <meta name="robots" content="all">
  11. <title>Loc&eacute;anic-Cr&eacute;ations: Cr&eacute;ateur de lingerie et pr&ecirc;t-&agrave;-porter pour femme et homme</title>
  13. <link rel="stylesheet" href="defs.css" type="text/css">
  15. <script language="JavaScript" src="js/jsf-main.js"></script>
  16. <script language="JavaScript" type="text/javascript">
  17. <!--
  18.  if (document.all) document.writeln('<link rel="stylesheet" href="defs-ie.css" type="text/css">');
  19.  else if (document.getElementById) document.writeln('<link rel="stylesheet" href="defs-nn.css" type="text/css">');
  21.  pageid = new PageID(0);
  23.  function init() {}
  25. //-->
  26. </script>
  28. </head>
  30. <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init(); initMain();">
  32. <script src="AC_RunActiveContent.js" type="text/javascript"></script>
  33. <script language="JavaScript" src="js/ft-header-fr.js"></script>
  35. <div style="display:none;">Loceanic-Creation: manufacturer of lingerie fabrics in EU.</div>
  36. <div style="display:none;">loceanic, oceanic,ocean,creation, creations, chics, dessous, lingerie, body look,manufacturer of lingerie fabrics in eu, market of intimates, nightwear, unterw&auml;sche, underwear, underclothes, urban underwear, w&auml;sche, clothes, damen bekleidung, ladys wear, lingerie, damenw&auml;sche,herren bekleidung, men s wear,herrenw&auml;sche,mode , fashion,bh,b&uuml;stenhalter, push- up bra,t-shirt, t-shirts,slip,shorty,unterhose,nachthemden,pyjama,schlafanzug,schl&uuml;pfer,tanger,mieder,unterhemd,erotische wasche,erotic  clothes,erotische bekleidung,neglige,qualit&auml;tswaren,quality goods,quality wears,qualit&auml;tskleidung,vern&uuml;nftige preise,franzosische mode,inspiration,reasonable prices,french  fashion,soutien-gorge,strings, g-string,string tanger,taille unique,fabricants, technicite et mode,societe entreprise,la rochelle,lingerie homme,lingerie femme,lingerie,push up,tanga,shorty,debardeur ,top,t-shirt,caraco,soutien-gorge,string,slip,taille unique,fabricant,vente,vente en gros,vente en detail,grossiste,distribution,vetements,pret a porter,habillement,fabrication,tissus,soie,microfibre,dentelle,coton,broderie,createur lingerie,vente directe,dessus,dessous,pyjama,sous vetement, show room</div>
  38. <div style="width: 700px;"><div style="padding: 12px 15px 15px 15px; background: #383838;">
  39. <div style="text-align: right; margin-bottom: 6px;">S&eacute;lection langue&nbsp;<a href="index-fr.php"><img src="gfx/flag-fr_.gif" alt="française" width="22" height="14" border="0"></a> <a href="index-de.php"><img src="gfx/flag-de.gif" alt="deutsch" width="22" height="14" border="0"></a> <a href="index-en.php"><img src="gfx/flag-en.gif" alt="english" width="22" height="14" border="0"></a></div>
  40. <script type="text/javascript">AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','500','height','395','src','video/video','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','video/video' );</script>
  41. <noscript>
  42.     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="395">
  43.       <param name="movie" value="video/video.swf">
  44.       <param name="quality" value="high">
  45.       <embed src="video/video.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="395"></embed>
  46.     </object>
  47. </noscript>
  48. </div></div>
  50. <br><br>
  51. <table width="700" border="0" cellspacing="0" cellpadding="0"><tr><td width="50%">
  52. <img src="gfx/txt-ourorigins-fr.gif" alt="où sommes-nous"><br>
  53. <a href="aboutus-fr.html"><img src="gfx/front-mapka-2.gif" alt="qui sommes-nous"></a>
  55. </td><td class="div-dash"><img src="gfx/px.gif" width="1" height="1"><br></td><td width="50%" style="padding-left: 15px;">
  56. <a href="news.php?lang=fr"><img src="gfx/txt-news-fr.gif" alt="actualités"></a><br>
  57. <?php
  58. include"mysql.php";
  59. $db= new DB();
  60. $db->query("select * from news where lang='fr' order by datenews desc" );
  61. $db->close();
  62. if($db->num_rows())
  63. {
  64. $row = $db->next_record();
  65. $date = explode(" ", $row['datenews']);
  66. $d = explode("-",$date[0]);
  67. $date = $d[2]."/".$d[1]."/".$d[0];
  68. $titre = $row['titre'];
  69. $txt = $row['txt'];
  70. ?>
  71. <p class="news-hd"><a href="news.php?datenews=<?php echo $row['datenews']; ?>&lang=fr"><?php echo stripslashes($titre); ?></a></p>
  72. <p class="news-date"><?php echo $date; ?></p>
  73. <p class="news-lead">
  74. <?php echo stripslashes(substr($txt,0,300)); ?> [...]<br>
  75. <a href="news.php?datenews=<?php echo $row['datenews']; ?>&lang=fr">[en savoir plus]</a>
  76. </p>
  77. <?php
  78. }
  79. else
  80. {
  81. echo "Aucune actualit&eacute; actuellement.";
  82. }
  83. ?>
  85. </td></tr></table>
  87. <script language="JavaScript" src="js/ft-footer.js"></script>
  88. </body></html>


 
là où ça marche pas c'est pour les balise < p > avec les classes css news-date et news-lead ... avec les autres ça fonctionne !!!

Reply

Marsh Posté le 27-07-2006 à 11:58:07    

img {border: 0);
il suffisait juste de faire valider ta feuille de style pour trouver l erreur
voila l adresse
http://jigsaw.w3.org/css-validator/

Reply

Marsh Posté le 27-07-2006 à 14:22:31    

Ok super merci beaucoup j'y penserai la prochaine fois ;)
Je voudrais juste préciser que le code n'est pas de moi et que j'ai repris le site pour y rajouter "des bouts", et évidement j'ai pas eu beaucoup de temps pour refaire toutes les vérifs d'usage sur la programmation de base ... malheureusement !
Encore merci pour le coup de main ;)

Reply

Marsh Posté le 27-07-2006 à 14:25:39    

tu n aurais pas eu ce probleme avec une bonne coloration syntaxique
tu utilises quoi comme editeur de texte ?

Reply

Marsh Posté le 27-07-2006 à 15:53:20    

dreamweaver !!! mais je l'utilise qu'en éditeur de texte parce que le mode graphique est archi nul de mon point de vue de codeur !
tu me conseillerais quoi sinon ?


Message édité par KahL le 27-07-2006 à 15:54:23
Reply

Marsh Posté le 27-07-2006 à 16:19:01    

bah dreamweaver est bien et il souligne bien la faute ;)

Reply

Marsh Posté le 27-07-2006 à 16:19:01   

Reply

Marsh Posté le 27-07-2006 à 17:21:29    

euh ben pas chez moi ... il met aucune erreur dessus !!!???
je l'ai peut être mal paramétré ?


Message édité par KahL le 27-07-2006 à 17:22:24
Reply

Marsh Posté le 27-07-2006 à 17:39:13    

normalement le .wh s'affiche d une autre couleur

Reply

Marsh Posté le 27-07-2006 à 17:42:16    

le .wh ???? kézako ?

Reply

Marsh Posté le 27-07-2006 à 18:13:35    

http://membres.lycos.fr/metaltrade//Sans-titre-6.png

Reply

Marsh Posté le 27-07-2006 à 18:20:18    

ah pardon désolé j'avais mm pas vu qu'il y avait ça dedans :P
et bien chez moi il est bien en rose comme les autres !!!
honnêtement, si c'était que de moi, et surtout si j'avais le temps, je reprendrai tout le site pour le recoder, parce que c'est un vrai catastrophe pour s'y retrouver ... ya la moitié des trucs dont je ne vois pas l'utilité, mais bon : /
bon tant pis .... je ferai plus confiance au validateur (ouh le vilain anglissisme ^^) CSS du W3C plutot qu'à copain dreamweaver ;)
ce que je trouve bien pratique avec dream, c'est l'auto-completion (je crois que c'est le bon terme :P) qui me fait gagner pas mal de temps des fois ;)


Message édité par KahL le 27-07-2006 à 18:24:35
Reply

Sujets relatifs:

Leave a Replay

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