28173 sujets

CSS et mise en forme, CSS3

Bonjour,

En testant sur un mac un site que je suis en train de mettre en place (sur un PC), je me suis rendu compte que le rendu de firefox sur PC et sur Mac ne sont pas tout à fait pareil.

De façon à corriger ces petites différences, je cherche un hack, un commentaire conditionnel ou une autre astuce qui me permettrait de spécifier des valeurs spécifique à FF Mac pour mes styles.

Avez vous des solutions à me suggèrer.

Merci.
Modifié par fleuveblanc (25 May 2007 - 16:34)
As-tu un exemple en ligne ou une capture d'écran de ces différences? Je suis très curieux de voir ce qui te pose problème, le rendu sur FF étant (à 99%) identique sur les différentes plateformes. À ma connaissance, seul le rendu des fontes peut être dissemblable.
Ce n'est pas possible à ma connaissance, à part en javascript

2 solutions donc :
- tu laisse comme ça
- tu trouve une éventuelle valeur ou propriété css qui corrige le problème sur l'un sans affecter l'autre

peux-tu nous donner un exemple de différence entre les 2 ? je suis curieux de voir ça
Ca n'est pourtant pas une histoire de fontes, mais de hauteur de <div> et d'un objet flash.

La page en ligne : http://fleuveblanc.com/test/
le code n'est pas très propre, c'est un skin pour un cms qui n'est ni correctement indenté ni alègé de tableau complètement inutile. Mais il faut que je fasse avec.

Une capture d'écran sur Firefox 2.0.0.3 PC

upload/12335-captffpc.jpg

Une capture d'écran sur Firefox 2.0.0.3 Mac

upload/12335-captffmac.jpg

Il y a une ligne d'1px en dessous de "Accueil".

Du coup, je suis en train de suivre la piste du javascript.

J'en profite pour demander aux utilisateurs Mac ce que ça donne sur Safari ? Chez moi, c'est comme s'il y avait les 3/4 de la feuille de style qui a disparu. Smiley confus
Modifié par fleuveblanc (25 May 2007 - 16:03)
Pour info, j'ai trouvé une solution à mon problème en ajoutant ce code en fin <head> :


<script type="text/javascript">
if(navigator.userAgent.indexOf("Mac OS X") != -1)
{
	document.styleSheets[2].insertRule('#pathway {padding-top:65px;}',
	document.styleSheets[2].cssRules.length)
}
</script>


Le problème est règlé, du coup, je rajoute la balise. Mais comme je sais qu'il y a de vrais puristes sur ce forum et qu'ils ne vont pas manquer de trouver cette solution pas propre, je reste ouvert à toutes suggestions qui fixent ce soucis sans remettre en cause l'aspect graphique de ce skin.

Smiley cligne