Problème Css sur Différents navigateurs

Bonjour,

Étant graphiste infographiste, j'ai décidé de refaire mon site web.

Cependant je m'autoforme en développement notamment en HTML5 et css3 que j'essaye d'utiliser au max.

Je vous met le lien de mon site provisoire car je rencontre un problème : http://www.remyvienne.fr/test/index.html

En faite le site marche parfaitement comme je le souhaite sur safari, chrome et opéra mais par contre sur firefox j'ai comme l'impression qu'il ne suit plus la feuille de style voir très peu.

Merci d'avance,

Rémy

J'ai peut être trouvé un début de réponse :

Remplacer :

-moz-box-shadow: ...

Par :

box-shadow: ...

??

Bonjour babichon59,

Si tu veux savoir comment sont supportées les différentes propriétés CSS par les différents navigateurs : Can I use
(Tu sauras ainsi, si le support est natif, depuis quelle version, et s'il nécessite un préfixe vendeur)

Merci pour ta réponse,

Le problème c'est que je ne sais pas quelles sont les propriétés CSS qui ne fonctionnent pas sur firefox et fonctionnent sur les autres navigateurs.

Rémy

Tu pourrais par exemple regarder du côté des avertissements du validateur CSS du W3C, et regarder ce qu'il convient de faire (préfixer ou non, suivant ton besoin de rétro-compatibilité)

Bonsoir,

J'ai résolu mon problème, je n'avait pas définit de largeur max à mon bloc contenu tout simplement.

cependant pour revenir au avertissements du validateur css, il y a quelques trucs que je ne comprend pas :

a écrit :
La propriété -moz-transition-duration est une extension propriétaire inconnue

pourquoi ?

a écrit :
Propriété erronée : font-family La propriété font-family n'existe pas en CSS niveau 2.1. mais existe en [css1, css2, css3] : 'Abel'

Cela peux il poser problème ?

a écrit :
La propriété transition n'existe pas en CSS niveau 2.1. mais existe en : background 0.5s

Idem pour d'autres transitions, cependant lorsque je teste desormais mon site sur plusieurs navigateurs les transitions fonctionnent plus ou moins bien ! que veut donc dire toutes ces lignes ?

Merci d'avance,

Rémy

salut,
tu aurais peut être oublié de préciser la version de FF que tu utilises. FF a été le premier a implémenté plusieurs des propriétés CSS3 sans préfixes donc j'ai du mal à me dire que tu possèdes la dernière version.
Par contre il y encore une propriété au moins qui n'est pas prise en compte sans préfixe, il s'agit de box-sizing (et au passage overflow:none n'existe pas, il s'agit de overflow:visible pour la valeur par défaut).
Quand le validateur t'indique la présence d'une extension propriétaire, c'est en rapport avec les préfixes des navigateurs. Avant d'être standardisée, une propriété est interprétée plus ou moins au bon gré de chaque navigateur (même si les différences sont minimes) et lorsque tu préfixes une propriété, elle n'est interprétée que par le navigateur que tu cibles (en gros -moz-transition ne sera pas appliquée sur Chrome par ex). Mais pour une question de rétrocompatibilité, elles sont essentielles. De plus elles n'invalident pas le code depuis CSS2.1, donc par de problèmes pour leur utilisation.
En résumé, tu dois te référer au site qui t'as été donné pour voir quelles propriétés préfixer et prendre soin d'écrire en dernier la propriété sans préfixes, pour permettre aux navigateurs l'interprétant de le faire selon les standards.
Exemple:

-moz-transition:color .3s;
-webkit-transition:color .3s;
-o-transition:color .3s;
transition:color .3s;