Se connecter / S'enregistrer
Votre question

prob firefox et image en css

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
21 Juillet 2006 23:18:44

Pourquoi sa marche pas ???!!!
Ma page
avec internet explorer, pas de probleme le menu en css marche nikel mais dès que je passe la meme age avec firefox c'est comme si le menu n'existai pas, et pourtant le navigateur traite le fichier css puisque il utilise <h1><h1/> avec les proprieté du fichier ...
vous pouvez m'expliquer, ou encore mieu me dire comment je doi faire

Autres pages sur : prob firefox image css

21 Juillet 2006 23:26:01

fire fox et Internet explorer ne sont pas "aussi compatible" l'un que l'autre. L'un voit le code css d'une maniere, l'autre d'une toute autre maniére. il faut malheuresement avouer que firefox a un serieux désavantage par rapport à internet exploreur. IE lit correctement le css, ce qui n'est pas le cas de firefox, il te faut donc essayer de voir si tu ne peux pas faire un second css, reservé à firefox.
21 Juillet 2006 23:30:23

mais j'ai eu beaucoup de mal a faire ce css parce que je suis debutant en la matiere, tu peux me filé un coup de main, un depart, ou un cour à voir en particulier STP
Contenus similaires
21 Juillet 2006 23:39:33

je voudrais bien t'aider lol, enfin si tu veux tu peux me rentrer dans tes contacts msn (si tu me voi pas connecté envoi moi un mail). En fait ce probléme est rencontré par tous les webmaster utilisant beaucoup le css, je suis moi même confronté à ce probléme, mais je peux voir si je peux te donner quelques atributs qui pourrons t'aider.
22 Juillet 2006 00:04:49

Citation :

mongos a écrit :
il faut malheuresement avouer que firefox a un serieux désavantage par rapport à internet exploreur. IE lit correctement le css, ce qui n'est pas le cas de firefox,


:-o

Euh, tu es sûr de ne pas avoir fait une inversion entre ie et firefox, là... ?? ;-)

dans le css de notre ami on trouve:

  1. #Photos a{
  2.  
  3. background-image:url(Image/Menu/Photos1.png);width : 230px ;height : 40px;
  4.  
  5. }
  6.  
  7. #Photos a:hover{
  8.  
  9. background-image:url(Image/Menu/Photos2.png);
  10.  
  11. }


Hors la balise <a> est de type inline, donc les propriétés height et width ne peuvent lui être appliquée selon la norme css2 du w3c

Firefox l'interprête donc tout à fait juste en ne donnant aucune hauteur ou largeur à tes liens puisqu'ils ne contiennent rien...

On peut, par exemple, virer les div entourant les liens qui sont inutiles, donner l'ID directement au lien et remplacer le css ainsi:

  1. #photos {
  2. background-image:url(Image/Menu/Photos1.png); display:block;width: 230px ;height: 40px;
  3. }
  4. #photos:hover{
  5. background-image:url(Image/Menu/Photos2.png);
  6. }


le display block autorisant à donner une hauteur et une largeur à la balise <a>

22 Juillet 2006 00:06:59

Une petite ligne pour "équlibrer" les petites différences que l'on pourrait avoir entre les deux navigateurs

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
22 Juillet 2006 00:08:13

Au contraire FireFox respecte les normes du W3C, enfin mieux que IE....


Donc respecte les normes et tu verras que sa marcheras sous FF !!!
22 Juillet 2006 00:13:23

mdr, mon css respecte les norme à la lettre (il est reconnu apte par le w3C), et pourtant seul IE le lit corectement. Netscape a toujours eu du retard sur le css.
22 Juillet 2006 00:24:08

<div id="Photos"><a href="Photos.html"></a></div>

c'est l'attribut class et non l'attribut id qui affecte un style ...
22 Juillet 2006 00:37:32

Citation :

mongos a écrit :
mdr, mon css respecte les norme à la lettre (il est reconnu apte par le w3C), et pourtant seul IE le lit corectement. Netscape a toujours eu du retard sur le css.


Quel css, où ? je demande à voir pour me faire une idée...

Que le css passe la validation indique qu'il n'y a pas d'erreur de syntaxe. Qu'il présente sur IE le résultat que tu escomptais ne veut pas dire pour autant que c'est IE et non FF qui l'interprète selon les normes établies...
22 Juillet 2006 00:46:44

Citation :

chrisz a écrit :
c'est l'attribut class et non l'attribut id qui affecte un style ...


L'attribut id te permet d'indentifier un élément unique et de lui donner un style via la syntaxe css
  1. #nomdelid { }


L'attribut class te permet d'attribuer les mêmes styles à plusieurs balises via la syntaxe css
  1. .nomdelaclasse { }


Dans son cas, son menu est unique sur la page (avec une image différente pour chacun des boutons); l'utilisation de l'id plutôt que du class est donc justifiée.
22 Juillet 2006 01:01:34

Je ne dis pas que IE assure les normes ou non, ni que firefox ne le fais pas ! Ca a toujours était reconnu, netscape est en retard au niveau du css. Par exemple, l'attribut background-color n'est pas reconnu de la même maniére. Avec IE, lorsque tu rajoute l'attribut width, il va faire l'arriére plan de la taille demandé, Firefox va lui l'arréter à la fin du texte. c'est pareil pour d'autres attribut ! J'avais entendu dire qu'ils avaient corriger leur retard, apparement ce n'est pas encore tout à fait le cas.
22 Juillet 2006 01:16:33

En retard par raport à quoi ?! Il faut bien une norme de référence, non? C'est ce que le w3c s'occupe de faire justement.

Pourquoi tu reviens toujours avec netscape ? on parlait de firefox là...

Même les derniers Netscapes interprêtent les css plus conformément aus normes du w3c que IE6. Il est clair qu'IE a pris de l'avance avec la sortie d'IE5 en matière de css mais après, ils se sont un peu reposés sur leurs lauriers et ont préféré essayer d'imposer leur vision des chose que de respecter les standards du w3c. Donc peut-être que tes infos datent un peu ;-)

Avec l'exemple que tu donnes j'ai plutôt l'impression qu'il reste quelques flous dans ta connaissance des modèles de boîte selon les normes du w3c. Mais je peux me tromper (je ne maîtrise moi-même pas à fond), c'est pourquoi je te demande des exemples concrets de code avec le résultat donné pour pouvoir en débattre.
22 Juillet 2006 01:27:26

apparement tes connaissances sont limités, netscape est le groupe qui a non seulement devellopé le fameux navigateur netscape, mais aussi mozille, et mozilla-firefox ! voila, pour le code :
  1. le fichier css :
  2.  
  3. @charset "iso-8859-1";
  4.  
  5. /*page*/
  6. body{background: url("../img/backg.gif");}
  7. div.page{position : absolute; top:0px; left:100px; padding-top:0px; padding-bottom:10px; width :796px;}
  8. div.page#border{border:1 #AAAAAA solid; background-color:#FFFFFF; height:785;}
  9. div.bandetop {background: url("../img/bandeautop.gif") #1FAEF3; width:796; height:212; border: solid 2.5 #1FAEF3; border-top-style:none;}
  10. div.bouttopmenu{position: absolute; top:212px; right:0px; width:100px; height:38px; background-image: url("../img/bouttopmenu.gif");}
  11. /*fin page*/
  12.  
  13. /*menu top*/
  14. div.topmenu{width:795px; height:38px;}
  15. /*fin menu top*/
  16.  
  17. /*menu*/
  18. div.bandeaumenu {position:relative; top : 249px;left:25px; background-color:#DBDBDB; height: 520px;; width:200px; border: 1 #AAAAAA solid; border-top-style:none;}
  19.  
  20. div.esp {background: none; height:1px; font-size:1px;}
  21.  
  22. div.menu {position: relative; top: 23px; left: 20px; background-color: #ffffff; border : #AAAAAA solid 1; width: 1px; text-align: left; padding: 5px; font : 600;}
  23.  
  24. .inmenu {font-family:"sylfaen","cursor","sans-serif"; font-size:15px; font-style:normal; width:200px; height : 10px; text-decoration:none; text-align: left; padding-left:20px; padding-bottom:5px; padding-top:5px}
  25. /*fin menu*/
  26.  
  27. /*espace texte*/
  28. div.text{position: absolute; top: 275px; right: 20px; background-color: #ffffff; border : #AAAAAA solid 1; width: 500px; text-align: left; padding: 5px; height:450;}
  29. .text {font-family:"sylfaen","cursor","sans-serif"; font-size:15px; font-style:normal; width:500px; height : 10px; text-decoration:none; text-align: left; padding-left:20px; padding-bottom:5px; padding-top:5px}
  30. /*fin espace texte*/
  31.  
  32. /*ecriture*/
  33. p#titre{color:white; background-color:#1FAEF3;}
  34. a#ssmenu{color:#BABABA; font : 600; background-color:#FFFFFF;}
  35. a#ssmenu:hover{color:white; font-family: "trebuchet MS","cursor","sans-serif";font: italic 600; background-color: #EAC205;}
  36. a#ssmenu:active{color:white; font-family: "trebuchet MS","cursor","sans-serif";font: italic 600; background-color: #EA8204;}
  37. a.top{width:120px; height:38px; background:url("../img/button.gif"); text-align:center; color : #1FAEF3; text-decoration : none; font-size : 20; font-family : "trebuchet MS"; padding : 5; padding-left:15; padding-right:15;}
  38. a.top:hover{width:120px; height:38px; background: #EAC205; text-align:center; color : #FFFFFF; text-decoration : none; font-size : 20; font-family : "trebuchet MS"; padding : 5;padding-left:15; padding-right:15;font-style:italic;}
  39. a.top:active{width:120px; height:38px; background: #EA8204; text-align:center; color : #FFFFFF; text-decoration : none; font-size : 20; font-family : "trebuchet MS"; padding : 5;padding-left:15; padding-right:15;font-style:italic;}
  40. a#news{position : absolute; left:256;} /* +30 si news/accueil*/
  41. a#forum{position : absolute; left : 406;}/* +30 si news/accueil*/
  42. a#medias{position:absolute; left:526;}/* +30 si news/accueil*/
  43. a#partenaires{position:absolute; left:646;}/* +30 si news/accueil*/
  44. /*fin écriture*/
  1. le fichier html :
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Page de tests divers</title>
  6. <meta name="description" content="tests">
  7. <meta name="keywords" content="">
  8. <meta name="author" content="mongos">
  9. <meta name="generator" content="AceHTML 6 Pro">
  10. <link rel="stylesheet" href="data/style/ie.css" type="text/css">
  11. </head>
  12. <body>
  13. <div class="page" id="border">
  14. <div class="bandeaumenu"> </div>
  15. </div>
  16. <div class="page">
  17. <div class="bandetop"><font color="#FFFFFF" size="10"><div style="text-align: center">INDIANTONIC</div></font></div>
  18. <div class="topmenu">
  19. <div class="bouttopmenu"> </div>
  20. <img src="data/img/indiantonicmenutitle.gif" border="0" width="293" height="38" alt="">
  21. <a href="index.php"id="news"class="top">News/accueil</a>
  22. <a href="forum.php"id="forum" class="top">Forum</a>
  23. <a href="medias.php"id="medias" class="top">Médias</a>
  24. <a href="partenaire.php"id="partenaires" class="top">Partenaires</a>
  25. </div>
  26. <div class="menu">
  27. <p class="inmenu" id="titre">Menu 1</p>
  28. <a href="#" class="inmenu" id="ssmenu">sous menu 1</a><br>
  29. <a href="#" class="inmenu" id="ssmenu">sous menu 2</a><br>
  30. <a href="#" class="inmenu" id="ssmenu">sous menu 3</a><br>
  31. <a href="#" class="inmenu" id="ssmenu">sous menu 4</a><br>
  32.  
  33. </div>
  34. <div class="esp"> </div>
  35. <div class="menu">
  36. <p class="inmenu" id="titre">Menu 2</p>
  37. <a href="#" class="inmenu" id="ssmenu">sous menu 1</a><br>
  38. <a href="#" class="inmenu" id="ssmenu">sous menu 2</a><br>
  39. <a href="#" class="inmenu" id="ssmenu">sous menu 3</a><br>
  40. <a href="#" class="inmenu" id="ssmenu">sous menu 4</a><br>
  41. <a href="#" class="inmenu" id="ssmenu">sous menu 5</a><br>
  42. <a href="#" class="inmenu" id="ssmenu">sous menu 6</a><br>
  43.  
  44. </div>
  45. </div>
  46. <div class="page">
  47. <div class="text">
  48. <p class="text" id="titre">Note de version :</p>
  49. <p>Attention, cette version n'est pour le moment compatible qu'avec le navigateur <u>Internet Exploreur.</u></p>
  50. <p>Une version pour les autres navigateurs est en cours d'ellaboration.</p>
  51. <p>Veuillez nous excuser de ce contre-temps.</p><br>
  52. <p align="right">mongos webmaster d'Indiantonic</p>
  53. </div>
  54. </div>
  55. </body>
  56. </html>
22 Juillet 2006 09:34:16

Il suffit de rajouter display: block; dans #Photos A et ainsi de suite pour que cela fonctionne sous mozilla.
22 Juillet 2006 16:52:34

Citation :

mongos a écrit :
apparement tes connaissances sont limités, netscape est le groupe qui a non seulement devellopé le fameux navigateur netscape, mais aussi mozille, et mozilla-firefox !


Là n'est pas le question, actuellement netscape et firefox sont 2 navigateurs distincts.

Après la défaite de netscape face à IE, il est vrai que la suite Mozilla s'est dévelopée sur les base de netscape qui avait ouvert ses sources et lancé le projet Mozilla. Le navigateur Firefox s'est dévelopé en parallèle par le groupe (actuellement fondation) Mozilla, donnant naissance au moteur Gecko (avec le souci de respecter les standars et l'intégration des css) utilisé actuellement par de nombreux navigateurs (dont les derniers Netscapes). Avec le succès de Firefox, la suite Mozilla a cessé d'être développée mais le développement a été repris sous le nom de seamonkey.

Bref, la société Netscape n'a pas dévelopé le navigateur Firefox, c'est la fondation Mozilla.

Je m'arrête là parce que je ne maîtrise pas plus que ça l'historique des navigateurs, tu en apprendras plus en fesant une recherche sur le web.

Autrement tu m'as parlé de:
Citation :
mon css respecte les norme à la lettre (il est reconnu apte par le w3C)


Hors, que ce soit l'html ou le css que tu m'as fourni là, ni l'un ni l'autre ne passe la validation. De plus on voit clairement des aberrations dans ton css du genre de celle à l'origine de ce post, soit attribuer un width et height à un élément inline.

Bref, pour moi le sujet et clos, tu penses ce que tu veux; c'est ton droit. Mais quand je vois énoncer des choses que j'estime fausses sur ce forum ben je ne me gêne pas de le faire savoir, que les autres visiteurs du forum fassent leur choix après ;-)
22 Juillet 2006 18:51:26

Je sais que mon html ne le passe pas, et ceux pour des particularités qui ne changent pas grand chose, voir rien du tout, par contre mon cass avait bien passé la validation.
Ce que tu dit etre une abération ne l'est pas vraiment dans le sens que si tu enléve le height et/ou width tu as un chagement dans l'apparition présente ou futur des pages. Ils ont tous étaient mis dans un soucis de facilité de devellopement dynamique par la suite. Aprés on peut evidemnt être d'accord ou pas sur ce fait.
Aprés pour l'histoire des navigateurs, ce que tu dis n'est pas faux, cepandant les rapports d'erreurs sont toujours envoyés au groupe netscape...
Chacun peut voir les choses différement, et interprété à sa maniére les façons de faire.
Je suis d'accord sur le fait de dire que le sujet est clos, chacun a dit ceux qu'il avait à dire sur ce dernier.
22 Juillet 2006 19:27:29

Citation :
IE lit correctement le css, ce qui n'est pas le cas de firefox


N'importe quoi
IE ne respecte pas les normes W3C, il ya un article Sur w3c validator qui explique "pourquoi ie n'est pas conforme aux normes w3c"

Citation :
Au contraire FireFox respecte les normes du W3C, enfin mieux que IE....


+1
22 Juillet 2006 20:19:16

Mongos, fils de Bill Gates ? ;-)
22 Juillet 2006 21:45:35

Citation :

Sethpolma a écrit :
Mongos, fils de Bill Gates ? ;-)


:ripeer: :p anolol:
je deteste microsoft, et ej deteste également IE. Oui je préfére largement mozilla firefox, mais je ne fais que dire ce que je constate malheuresement.
Ensuite, je n'ai jamais dit qu'ie respectait les normes du w3c, et que firefox non, je suis mal placé pour le dire, car je ne connais pas plus que ça ces normes. Je ne fais que dire par rapport à ce que je sais que doit donner tel attribut ou tel autre, quelques uns ne donne pas le resultat esconté avec firefox.
Apparement je ne me suis pas fait comprendre lol, et j'en suis désolé.
J'ai juste fais un test en respectant une fois les normes à la lettre, il n'avait pas été trés concluant c'est tout. :confused:
15 Mai 2007 19:04:03

De toutes façon ni IE, ni Firefox ne passent les normes de la W3C (y a qu'à voir le test du smiley HelloWorld, on sait également que Firefox les respecte un peu mieux), seul Opéra de Sun les respecte à la lettre ce qui fait un navigateur avec trop peu de souplesse malheureusement.

Considérant mon problème : pas de prise en charge de background-color dans une imbrication de div sous firefox, je trouve cela tout de même abominable dans une architecture de dev normalisée et unifiée...
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS