Problème css avec firefox

zokin76 · 30 Août 2007

Comme d'autre personnes, moi aussi j'ai un problème de css lorsque j'affiche mon site sur firefox. Et je n'ai pas encore trouvé une bonne solution pour moi.

http://www.sharefreeware.com

Ca a affiché correctement dans IE, mais il y a declage dans firefox, je ne sais pas pourquoi.

Pouvez vous m'aider si qqn a une idée?

bproductiv · 30 Août 2007

En général il est conseillé de faire l'inverse : développer pour firefox (qui lui respecte les standard W3C) PUIS faire une petite feuille de style spécifique IE (uniquement les propriété de margin et padding en général) que l'on charge grâce à un commentaire conditionnel.
Je jette un oeil et je reviens si je vois qq chose.

bproductiv · 30 Août 2007

Code:

#wrapper {
	width: 944px;
	margin: 0 auto;
	background:#FFF url(../gofreeware/images/gofreeware_bkg.png) repeat-y center top;
	text-align: center;
	float: none;
	padding: 0;
}
body,h1,h2,h3,h4,p,ul,li {
	margin: 0;
	padding: 0;
}

#innerwrapper {
	background-image: none;
	width: 920px;
	margin: 0;
	padding: 0;
}

Et voilà

Florent V. · 30 Août 2007

bproductiv a dit:
En général il est conseillé de faire l'inverse : développer pour firefox (qui lui respecte les standard W3C)

Je dirais même: développer pour un navigateur ayant une bonne implémentation du standard CSS 2.1, tout en vérifiant avec un deuxième navigateur ayant une bonne implémentation également (Firefox, Konqueror, Safari, Opera... sous Windows, le couple Firefox+Opera est un bon choix). Ensuite, on applique les correctifs pour IE, s'ils sont nécessaires.

bproductiv a dit:
PUIS faire une petite feuille de style spécifique IE (uniquement les propriété de margin et padding en général) que l'on charge grâce à un commentaire conditionnel.

À noter que l'on peut viser grâce aux commentaires conditionnels différentes versions d'IE. Pour ma part, j'adresse souvent des correctifs CSS (pas forcément des histoires de marges et padding... plutôt des corrections de bug via le HasLayout) à IE6 et inférieurs, tandis qu'IE7 aura la même version sans correctifs que les autres navigateurs modernes.

Dans certains cas, on devra peut-être adresser deux-trois correctifs à IE7, une dizaine à IE6... et une feuille de style dégradée (simplification du design) pour IE5, par exemple. Là, on jouera pas mal avec les commentaires conditionnels. Mais ce genre de cas est tout de même assez rare.

passion · 30 Août 2007

bproductiv a dit:
En général il est conseillé de faire l'inverse : développer pour firefox ...

Quoi??
Absolument pas!
Tu n'es pas sans savoir que + de la moitié des internautes (stats à l'appui tous les jours) pour ma part, 70% des internautes sont encore sur IE6 !!

Donc ton affichage doit être compatible sur IE6, IE7 et FF
Et pour ce qui des bidouilles javascript <-- c'est à proscrire car cela marchera un temps mais l'évolution des navigateurs (ex IE6 pour IE7 et suite...) rendra obsolètes ces bidouilles pouvant créer peut être des prob!!

Suivant les cas, si cela ne marchera pas en CSS standard, je préfère utiliser des astuces genre <div> d'écartement horizontal ou vertical selon les besoins !!

De cette façon, mon affichage sera toujours standard sur tous les navigateurs !

bproductiv · 30 Août 2007

passion a dit:
bproductiv a dit:

En général il est conseillé de faire l'inverse : développer pour firefox ...

Cliquez pour agrandir...

Quoi??
Absolument pas!
Tu n'es pas sans savoir que + de la moitié des internautes (stats à l'appui tous les jours) pour ma part, 70% des internautes sont encore sur IE6 !!

Donc ton affichage doit être compatible sur IE6, IE7 et FF
Et pour ce qui des bidouilles javascript <-- c'est à proscrire car cela marchera un temps mais l'évolution des navigateurs (ex IE6 pour IE7 et suite...) rendra obsolètes ces bidouilles pouvant créer peut être des prob!!

Suivant les cas, si cela ne marchera pas en CSS standard, je préfère utiliser des astuces genre <div> d'écartement horizontal ou vertical selon les besoins !!

De cette façon, mon affichage sera toujours standard sur tous les navigateurs !

Tu isole un seul morceau du post..
Je dis que firefox reconnait mieux les standard donc 'lors du dev' tu bosse avec et quand le rendu est bon dans FF il le sera dans opera et quasiment dans ie7..DONC apres tu fais ta feuille de style pour ie (ou les différentes comme le dit florent).
Cette (ces) feuille(s) de style spécifique(s) est intégré grace aux commentaires conditionnels (où as tu lu javascript???) qui cible telle ou telle version d'IE..
C'est suffisamment clair?

bproductiv · 30 Août 2007

Code:

<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="css/defaut-ie.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/accueil-ie.css" media="all" />
<![endif]-->
<!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="css/defaut-ie7.css" media="all" />    
<![endif]-->

Pour info, voici des commentaires conditionnels NON JAVASCRIPT 8O

passion · 30 Août 2007

Ok mea culpa pour le js (j'ai lu en travers... désolé

Par contre, je persiste et signe...

Je dis que firefox reconnait mieux les standard donc 'lors du dev' tu bosse avec et quand le rendu est bon dans FF il le sera dans opera et quasiment dans ie7..DONC apres tu fais ta feuille de style pour ie (ou les différentes comme le dit florent).

On ne doit pas faire le site sur FF (ou autre navigateur W3C) sous prétexte qu'il respect les normes et régulariser les erreurs après! (c'est mon avis biensûr)

Je trouve plus judicieux comme je te l'ai expliqué, lors du "dev." d'avoir une fenêtre active sur FF et IE6 et en direct, tu peux apprécier les rendus. Et delà, faire les modifs <div> selon les cas "en live". Ainsi, ton affichage sera standard sans mise au point complémentaire!

C'est de la perte de temps :wink:

bproductiv · 30 Août 2007

passion a dit:
Ok mea culpa pour le js (j'ai lu en travers... désolé
Par contre, je persiste et signe...
On ne doit pas faire le site sur FF (ou autre navigateur W3C) sous prétexte qu'il respect les normes et régulariser les erreurs après! (c'est mon avis biensûr)
Je trouve plus judicieux comme je te l'ai expliqué, lors du "dev." d'avoir une fenêtre active sur FF et IE6 et en direct, tu peux apprécier les rendus. Et delà, faire les modifs <div> selon les cas "en live". Ainsi, ton affichage sera standard sans mise au point complémentaire!

C'est de la perte de temps :wink:

Chacun sa méthode, on ne va polémiquer sur les bonnes et les mauvaises...
:?
Donc c'est comme ca que tu as fait ton www ?
car sur FF j'ai des grands espaces blanc tout vide, c'est normal? :cry:

passion · 30 Août 2007

bproductiv a dit:
Donc c'est comme ca que tu as fait ton www ?
car sur FF j'ai des grands espaces blanc tout vide, c'est normal? :cry:

Oui c'est normal car il date un peu... (il a été développé à mes débuts avant que cela en devient ma profession)
Je suis entrain de le rependre entièrement en interne !
Diriges-toi plutôt pour les critiques vers mon avatar! :wink:

zokin76 · 31 Août 2007

Merci à tous. Enfin j'ai trouvé une solution--j'ai réduit la taille de div, cela a permis d'afficher correctement mon site dans FF et IE. Tout ca reste dans mon serveur local, je vous tiens au courant dès qu'il est en prod.
Vous verrez que la réduction de la taille div peut être une bonne solution pour ce genre de problème.

Encore merci.

Leonick · 31 Août 2007

bproductiv a dit:
Chacun sa méthode, on ne va polémiquer sur les bonnes et les mauvaises...

de toutes façons, pour avoir le moins de problème de rendus entre les différents navigateurs, il faut valider son code http://validator.w3.org/check?verbose=1 ... are.com%2F 51 erreurs :cry:
en plus, cela montre que la mise en page avec des <table><tr><td> pose plus de problème qu'avec les <div> :lol:

MarvinLeRouge · 1 Septembre 2007

+1 pour bproductiv : j'utilise quotidiennement cette méthode, et ça marche très bien. De plus, les défauts css de IE (surtout IE6) étant connus, il est beaucoup plus simple de travailler dans ce sens que dans l'autre. Ceci dit, la méthode parallèle doit aussi bien marcher pour d'autres personnes; à mon avis, ça doit dépendre du type de structures et de workarounds qu'on utilise en général.