28172 sujets

CSS et mise en forme, CSS3

Léger pb d'alignement avec Safari (PC)

Bonjour,

J'ai un petit soucis d'alignement selon les navigateurs...

Voici mes 2 pages, une avec le contenu en slider et la classe product-slider et une sans avec la classe product-unique.

Slider : www.cedricgournay.com/design-global/merchandising/dr-pierre-ricaud/
Unique : www.cedricgournay.com/design-global/merchandising/yves-rocher/

Les titres des 2 produits ne sont pas parfaitement au même niveau. Sur Safari, Yves Rocher est un peu au dessus de Pierre Ricaud alors que sur FF, Yves Rocher est un chouille plus bas.

Voici les print écrans. Est ce que qqn peut m'éclairer ? (et regarder sur Safari Mac...) upload/50580-Safari.PNG
upload/50580-FF.PNG

Merci de votre aide car pfiouuuuu.....
Bonne journée
Tu parles de PC dans le titre et Mac dans ton message... Safari n'est plus développé sur PC depuis longtemps donc il n'est pas nécessaire de s'y intéresser. Sur MAC, je ne peux pas regarder maintenant mais est-ce que tu peux montrer ton code CSS appliqué sur ces textes ? Merci.
Comme je n'ai pas de Mac, je jette un oeil sur Safari PC pour "valider" ce que ça donne puis sur mon ipad ms c'est galère car je ne peux pas brancher de debbugueur sur mon l'ipad, c'est pas dispo depuis PC.

Mon client (un studio de design) travaille sur Mac donc ils ont vu ce léger décalage.

Voici les 2 codes css :

.product-unique h3 {
color: #c9c9c9 !important;
font-size: 11px;
margin-bottom: 0 !important;
margin-top: -13px;

.product-slider h3 {
color: #c9c9c9 !important;
font-size: 11px;
margin-top: -3px !important; ce -3 est pour que sur FF product slider et product unique soient OK

C'est vrai qu'en voyant les codes, je trouve pas ça propre.... L'idée est que le bas du Titre soit à 46 px au dessous de la bordure-bottom du grand rectangle gris.

Si tu veux regarder plus tard en live pas de soucis, l'urgence n'est pas pr aujourd'hui.
Merci !!
Sauf si tu as corrigé le soucis depuis, je n'ai pas compris le problème.

Sinon, le texte en bas, sur Yves rocher, et collé à droite, contrairement à celui du Dr Pierre Ricaud. (le copyright).
Je n'ai rien touché mais c'est vai, sur mon ipad je ne vois pas non plus le pb (et j'oublie définitivement Safari PC !)
Je demande à ma cliente des prints écran sur son mac safari / firefox.
Quant au copyright qui se balade, c'est nouveau ça ! Quand tu vas sur la home du site et que tu descends Design global / merchandising / Yves rocher ça va mais qd tu entres direct l'url produit que je t'ai donné, ça va pas. Une idée ?
Ah non, moi ça va pas non plus quand je fais ce que tu indiques.

Un peu complexe de trouver le soucis, probablement un tag mal fermé (suffit de valider le HTML pour vérifier) ou un clear:both là où il ne faut pas.

Sinon, je précise etre sur mac, et j'ai controlé sur Safari, je n'ai pas vu le soucis.
Ca y est voici les print écran de ma cliente, le problème est sur Mac - Firefox pour l'alignement.
Je te joints les 6 prints écrans (2 produits sur FF, 2 pdts sur Safari et la superposition de calque que j'ai faite pour chaque cas).
upload/50580-mac-safari.jpg upload/50580-mac-safari.jpg upload/50580-mac-firefo.jpg upload/50580-mac-firefo.jpg upload/50580-Mac-Firefo.PNG upload/50580-Mac-Safari.PNG

Dis moi si tu arrives à reproduire sur Mac - FF (je vais devoir mettre le site hors ligne en attendant de nouveaux contenus mais je te laisse regarder avant !)
Merci !
Salut,
Newki75 a écrit :
Comme je n'ai pas de Mac, je jette un oeil sur Safari PC pour "valider"

Tu peux installer Mac OS X sur une machine virtuelle, qui te permettra d'avoir Safari sur Mac comme si tu avais un Mac. Smiley cligne

Soit dit en passant, la dernière version de Safari pour Windows est la 5.1 ; or, la version actuelle de Safari est la 8. Tout dépend de la compatibilité demandée, mais, en règle générale, la compatibilité avec Safari pour Mac OS X s'arrête à la dernière version.

Quant à l'inspecteur d'élément sous Safari pour iOS, si tu veux l'utiliser, tu n'as pas d'autre choix que de le faire avec un Mac.
Modifié par Victor BRITO (06 Feb 2015 - 17:27)
Merci Victor, tu n'aurais pas une petite URL de tuto pour faire ça car je ne sais pas si j'en ai les compétences...
Ah, je viens enfin de comprendre le soucis Smiley lol

Euh franchement, c'est un décalage ridicule et tolérable ...

Pour moi, c'est la méthode que tu utilises qui est à revoir sur un angle totalement différent, là tu vas forcement perdre du temps inutilement à régler pixel par pixel, prend un point de référence différent.

Exemple, tu te fixes sur la ligne du bas (si celui-ci n'a pas de décalage), tu fixes un height de X pixel, et il n'y a aucune raison que ce soit différent selon le navigateur.
Je suis d'accord avec toi ! 2 px ça va Smiley cligne j'avais rien vu d'ailleurs mais ce sont des designers dc ils l'ont vu direct lolll je vais essayer par le bas quand j'aurai le temps.
Le copyright m'embête plus surtt que c'est nouveau, dû à une nvelle version de chrome j'imagine... Si ça te saute aux yeux, dis-moi Smiley cligne
En tt cas merci pr ton aide cet aprèm !
Pour le coup, ça saute aux yeux oui, c'est simple, le copyright est collé à la barre de défilement sur une des 2 pages, donc totalement hors du design, et la barre vertical tout à gauche est un poil moins haut. (j'aurai bien fait une capture d'écran , mais là le site est marqué en maintenance).

Autant le micro pixel je le vois pas, (je ne sais même pas comment ils ont pu voir ça, sauf à superposer une maquette fournit à la base), autant là, c'est forcement très visible.
Modifié par kenor (06 Feb 2015 - 22:32)
Sujet clos
Aller à